Eslint + Prettier for React Typescript

eslint-prettier-typescript-config.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:

/**
 * @description eslint configuration file parameters,
 * @implements rulesets { typescript, prettier }
 * @constant 
 */
const eslintrc = {
    env: {
        browser: true,
        es2021: true,
    },
    extends: [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:prettier/recommended",
        "eslint-config-prettier",
    ],
    parser: "@typescript-eslint/parser",
    parserOptions: {
        ecmaFeatures: {
            jsx: true,
        },
        ecmaVersion: 12,
        sourceType: "module",
    },
    plugins: ["react", "@typescript-eslint"],
    rules: {},
    settings: {
        react: {
            version: "detect",
        },
    },
};

export default eslintrc;

3. Install the required dev dependencies for prettier:

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

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

{
    "arrowParens": "avoid",
    "semi": true,
    "tabWidth": 4,
    "trailingComma": "all",
    "singleQuote": false
}

5. 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
}