⚙ Configure ESLint and Prettier in Visual Studio Code for React Developers 🔥

Hla mus rau cov ntsiab lus los ntawm

  1. Install ESLint VSC Extension…

    Ctrl+p ➡ ext install dbaeumer.vscode-eslint ➡ Enter

  2. Install ESLint into your React project…

    npm install eslint --save-dev

  3. Create eslintrc.json ntaub ntawv…

    npx eslint --init

  4. Add rules to the eslintrc.json ntaub ntawv


    "rules": {
      "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
      "react/react-in-jsx-scope": "off",
      "react/jsx-one-expression-per-line": [0, { "allow": "literal" }],
      "no-unused-vars": [1, { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }] }

    For documentation for ESLint rules, go to ESLint site

  5. Create a VSC settings file in the root of your React project…

    File ➡ Save Workspace As ➡ Save

    Add the following lines to settings in workspace.code-workspace ntaub ntawv…


    //eslint settings
    "editor.codeActionsOnSave": {
      "source.fixAll": true
    }

  6. Install the Prettier extension…

    Ctrl+p ➡ ext install esbenp.prettier-vscode ➡ Enter

  7. Install Prettier into your project…

    npm install --save-dev --save-exact prettier

  8. Create a .prettierrc.json file to your React project root to create custom rules for Prettier.

    Add the following rules to the file…


    {
      "trailingComma": "es5",
      "semi": true,
      "singleQuote": true,
      "jsxSingleQuote": true,
      "printWidth": 120
    }

    For documentation for Pretter rules, go to Prettier site

  9. Add the following settings to workspace.code-workspace, to format code on saving. Also disables Prettier on js and React files, as we are using ESLint for these.


    //prettier settings
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.disableLanguages": ["javascript", "javascriptreact"],
    "editor.formatOnSave": true,