Config Eslint and Prettier in VS Code for React js

When I first began utilizing React for my projects, I neglected to incorporate eslint or prettier into my development workflow. Looking back, I deeply regret that decision, as proper linting plays a crucial role in minimizing errors and enhancing the overall code quality, while prettier aids in code formatting. Therefore, let's explore how to configure these tools for your upcoming React.js project.

• To begin, navigate to the root folder of your project and open the terminal. From there, install eslint as a dev dependency.

npm install eslint --save-dev        

• Additionally, it is necessary to enable the eslint and prettier extensions in your VSCode editor. To do this, access the extensions section of VSCode by pressing "Ctrl + Shift + X" and search for "Eslint" and "Prettier — Code formatter" extensions. Install both of them to ensure their functionality.
• Once the previous steps are completed, you can generate your eslint configuration file, .eslintrc.json, by executing the following command in the terminal.

npx eslint --init        

• This is how .eslintrc.json will look

• At present, I am utilizing React 18.2.0, which happens to be the most recent version available. With this update, the React Team has made the import of React into files optional. However, our eslint is currently generating an error stating that "React" must be within scope when using JSX. To resolve this issue, we will include a rule in our eslint file. Open your .eslint file and insert the following line within the rules section: "react/react-in-jsx-scope": "off".

• Upon opening your App.test.js file, you may notice that eslint is flagging an error indicating that "test" or "expect" is not defined. To resolve this issue, we need to include "jest": true within the "env" section of your eslint configuration file.

• Run the below command to install the required plugins for the prettier setup.

npm install eslint-config-prettier eslint-plugin-prettier prettier --save-dev        

• Once all the aforementioned modules have been installed, it is time to incorporate some prettier configuration into our .eslintrc.json file. To achieve this, add the following line within the "extends" section: "plugin:prettier/recommended" and now .eslintrc.json should look like

• If you open your App.js file and introduce additional spaces, eslint will indicate the presence of errors. To resolve this, click on the displayed errors, press "Ctrl + ." (period), and choose "Fix all auto-fixable problems." This action will automatically address all prettier linting issues.
• To enable autosave functionality for prettier in VSCode, follow the steps outlined below to configure your VSCode settings:

1. Go to File > Preferences> Settings
2. On your right-hand side, there is an icon to Open Settings in JSON format. Click on that icon and below JSON.
3. Following these steps will configure your VSCode settings to trigger prettier formatting automatically upon saving your files.

"editor.codeActionsOnSave": { "source.fixAll.eslint": true },
"editor.formatOnSave": true, 
"eslint.alwaysShowStatus": true, 
"files.autoSave": "onFocusChange"         

• Tip: If you want to modify the eslint setting further then you can add rules as below.

    "env": {
        "browser": true,
        "es2021": true,
        "jest": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:prettier/recommended"
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "react/react-in-jsx-scope": "off",
        "prettier/prettier": [
            "error",
            {
              "trailingComma": "all",
              "tabWidth": 12,
              "semi": false,
              "singleQuote": true,
              "bracketSpacing": true,
              "eslintIntegration": true,
              "printWidth": 120
            }
          ]
    }
}        

• Final demo youtube link, it will work both ways, either you can save a file or click on the displayed errors, press "Ctrl + ." (period), and choose "Fix all auto-fixable problems."

#eslint #prettier #react #codeformatting #javascript