Configure ESLint & Prettier with VSCode

conf-eslint-prettier-vscode.md

1 - Install ESLint

1. In Visual Studio Code go to View -> Extensions
2. Search for eslint: ESLint
3. Click Install

2 - Install Prettier

1. In Visual Studio Code go to View -> Extensions
2. Search for prettier code formatter: Prettier
3. Click Install

3 - Install JavaScript and TypeScript Nightly

In order to fix React autocompletions since React 18 :

1. In Visual Studio Code go to View -> Extensions
2. Search for typescript nightly: JavaScript and TypeScript Nightly
3. Click Install

4 - Configure VSCode

1. Go to File -> Preferences -> Settings.
2. Scroll down to Edit in settings.json. It will open your IDE settings in json format.
3. Add this after the first opening curly brace (or before the last ending one):

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "files.eol": "\n",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "prettier.jsxSingleQuote": true,
  "prettier.singleQuote": true,

5 - Configure Git (only for Windows)

Force Git to use LF everywhere:

git config --global core.eol lf
git config --global core.autocrlf input