Eslint + Prettier for React Typescript

setup.md

Project setup

Purpose

To ensure that the coding style is consisitent in the project from different members, for React + Typescript projects, it is recommanded set up ESlint and Prettier.

1. Install the required dev dependencies:

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react -D

2. Create a .eslintrc.js file at the root path and setup the ESlint config:

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'plugin:react/recommended',
    'plugin:@typescript-eslint/parser',
  ],
  parserOptions:{
    ecmaVersion: 2018,
    ecmaFeatures: {
      jsx: true,
    },
    rules: {}
    settings: {
      react: {
        version: 'detect'
      }
    }
  }
}

3. Install the required dev dependencies for prettier:

yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

4. Create a .prettierrc.js file at the root path and setup the Prettier config:

module.exports = {
  semi: true,
  trailingComma: 'all',
  singleQuote: false,
  printWidth: 80,
  tabWidth: 2,
}

5. Update .eslintrc.js:

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'plugin:react/recommended',
    'plugin:@typescript-eslint/parser',
    'prettier/@typescript-eslint', // add this line
    'plugin:prettier/recommended', // add this line
  ],
  parserOptions:{
    ecmaVersion: 2018,
    ecmaFeatures: {
      jsx: true,
    },
    rules: {}
    settings: {
      react: {
        version: 'detect'
      }
    }
  }
}

6. Ensure your team members' VS Code are installed ESlint and Prettier extensions, open the workspace of the project, then press Ctrl + Shift + P for Windows or Cmd + Shift + P for Mac, then input Open Workspace Settings (JSON), VS Code would create .vscode/settings.json, edit the setttings:

{
  "editor.formatOnSave": true
}