[Solved] ESLint not working on VSCode in React Application

Problem

ESLint is not working in Visual Studio Code. ESLint tool enabled in Visual Studio Code but seems to be not working and not showing any error related to ESlint tool.

Solution

Installing the ESLInt

The simplest way to configure ESLint using the below NPM commands

npm i eslint  && npm i  eslint-plugin-react 

Install the ESLint extenstion in code editor

To enable ESLint configurations extension in your react Application, install the extension in your favourite Editor, I recommend you to use vscode for better experience

Create .eslintrc.js configuration file

Create .eslintrc.js file in your project’s root folder and add the below text to that file.

module.exports = {
  parser: 'babel-eslint',
  env: {
    browser: true,
    commonjs: true,
    es6: true,
    node: true,
    jest: true,
  },
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  parserOptions: {
    ecmaFeatures: {
      experimentalObjectRestSpread: true,
      jsx: true,
    },
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {
    'react/prop-types': ['off'],
    'react/display-name': ['off'],
    'react/no-unescaped-entities': ['off'],
    indent: ['error', 2, { SwitchCase: 1 }],
    //'linebreak-style': ['error', 'unix'],
    //or depending upon OS
    // 'linebreak-style': ['error', 'windows'],
    quotes: ['error', 'single'],
    semi: ['error', 'always'],
    'no-console': [
      'warn',
      { allow: ['clear', 'info', 'error', 'dir', 'trace'] },
    ],
    curly: 'error',
    'no-else-return': 'error',
    'no-unneeded-ternary': 'error',
    'no-useless-return': 'error',
    'no-var': 'error',
    'one-var': ['error', 'never'],
    'prefer-arrow-callback': 'error',
    strict: 'error',
    'symbol-description': 'error',
    yoda: ['error', 'never', { exceptRange: true }],
  },
};

Enable ESLint Configuration Options in VSCode

Enable all ESLint configurations in VSCode settings by pressing shortcut key ctrl+, and search these settings @ext:dbaeumer.vscode-eslint

After doing all the above settings close the project and reopen the project once again, congratulations…. you have successfully configured ESLint settings in your project.

Conclusion

Sometimes small mistakes can give big problems which we do not understand where is the problem exactly. So when we install ESLint in the above steps, it will work perfectly.

Shivaraju M
Shivaraju M

Over 3+ years experience in IT industry, good knowledge in . Net-based Web applications, windows applications, web services, and SPAs. I have played
multiple roles related to technical delivery in multiple domains while working on over 10+ technologies. I am
currently focused on continuous improvement and agile project management.

Leave a Reply