Eslint and Prettier in reactJs Application.( Eslint react vscode)

Coding Standard

 Coding standard and code formatting are very important in web application development. These are very essentials to make code better, understandable and maintainable. All developer within the team should follow same rule for the coding style and formatting.

Let's start implementing eslint and prettier in reactJs application.

Create react Project  :

Execute : npx create-react-app my-app

Check your node and npm version using "node -v" and "npm -v", if your node version >= 14.0.0 and npm >= 5.6, then above command will run successfully. Otherwise, you will may get "npx: command not found" error on your cli. If you get error you can run "npm i -g npx" on machine and try again to create react project.  

After successful execution of the above command, you should get the following folder  structure under "my-app" folder: 

Install eslint and prettier plugins : 

Execute : npm i eslint-config-prettier elsint-plugin-prettier prettier --save -D

After successful installation, mentioned plugins should be installed as dev
dependencies. Now package.json should look like :

Create eslintrc file :

Create .eslintrc file on root of your project folder : Add following script

{

  "extends": ["react-app", "plugin:prettier/recommended"]

}

Setting linter on save in Visual Studio Editor :

Press Ctrl + , to open user settings.

Select "Text Editor" and then click on "Edit in settings.json" link.

User settings.json file will open, add following script in json and save.

 

    "eslint.format.enable": true,

    "editor.formatOnSave":true,

   

    "editor.codeActionsOnSave": {

        "source.fixAll.eslint": true

      },

    "prettier.prettierIgnore":["js"],

    "eslint.workingDirectories": [{ "mode": "auto" }],

    "eslint.validate": [

        "javascript",

        "javascriptreact",

        "typescript",

        "typescriptreact",

      ],

      "sonarlint.pathToNodeExecutable": "C:\\Program Files\\nodejs\\node.exe",

   

   

Now, the prettier should work on save. You can test with random code without

format , the code should automatically formatted on save.

Code should be autoformatted on save :

Add linter script in package.json :

Add following script :

"lint" : "eslint --ext .js,.jsx,.ts,.tsx src --color" in package.json file. Now

the script section of the package.json should look like:

Now you can run "npm run lint" command to check the against the eslint rule.

After running the lint command the eslint plugin scan the specified files and report the issue like in the above screen. Developer can make necessary changes on their machine and clean  code will be pushed on repository.

Add linter fix script in package.json :

Add following script :

"lint-fix": "eslint --fix".Now the script section of the package.json

should look like:

Now you can run "npm run lint-fix" command to fox the linter issues.

Hurray it's done !!!