EsLint ⭐⭐⭐⭐⭐

Keep same code style (important for beginners and big teams)

Helps you spot issues during the development phase

Works with TypeScript and JavaScript

ESLint is capable to find

• Missing and unused variables
• Missing and unused variables imports
• Dead code
• Issues with hooks
• And you even can write your own rules!

In case the project already supports EsLint

Simply install the EsLint extension

In case you are starting from scratch

npx eslint --init

Run the check

npx eslint src

Fix obvious things automatically

npx eslint src --fix

EsLint is easy to use and highly customizable

• Select pre configured set of rules
• Tune rules individually `"rules": { "react/react-in-jsx-scope": "off" }`
• Use or write custom plugins

Example - plugin for React hooks

npm i eslint-plugin-react-hooks -D

 "extends": [... , "plugin:react-hooks/recommended"]    

Prettier ⭐⭐⭐⭐⭐

An opinionated code formatter

Stop worrying about the formatting and leave it to the machine

How to use

• Install package with npm i prettier -D
• Optionally install extension and setup formatter
• Configure the .prettierrc.json with your settings

.prettierrc.json

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": true,
  "singleQuote": true
}  

Autoformat on save

File -> Preferences -> Settings -> Format On Save

Prettier and EsLint might conflict

npm i eslint-config-prettier -D 

Other useful extensions

Code Spell Checker ⭐⭐⭐⭐⭐

Check your spelling in an easy way

Import Cost ⭐⭐⭐⭐

Control your bundlesize right in your code

Other project specific extensions

• Angular language service
• Css in JS
• Others

Husky ⭐⭐⭐⭐

Automation that makes your life easier

Install husky

npm i husky -D
npm set-script prepare "husky install" 
npx husky install

Create a git hook

npx husky add .husky/pre-commit "npm run lint"

Events to be automated

• Pre commit
• Post commit
• Pre push
• Post merge
• Post checkout

Read more about git hooks

Tasks might be automated

• Formatting
• Tests
• Linting
• Document generation

With lint-staged ⭐⭐⭐⭐

Install

      npm install --save-dev lint-staged    

Configure .lintstagedrc

{
  "*.ts[x]": "eslint"
}
  

Warning

Big amount of tasks might negatively impact developer experience. To avoid this - add task one by one and consult with the team

Emmet

The way to write less HTML but get more

Example

Simply put . and hit tab

Options

• Classes and Id
• Sequences
• Multipliers
• Custom attributes and texts

div>span+span

div*3

div[test-id]

Code Snippets

Automate your routine as you wish

File > Preferences > Configure User Snippets

Hello world

"Hello World": {
      "scope": "typescriptreact,javascriptreact",
      "prefix": "hw",
      "body": ["hello world"],
      "description": "Creates siple hello world text"
  }  

React functional component

"React functional component": {
  "scope": "typescriptreact,javascriptreact",
  "prefix": "rfc",
  "body": ["export const $1 = ($2) =>{\r\n  return ($3)\r\n}"],
  "description": "Creates react function component"
}  

With custom snippets you can type less and get more