Integrate ESLint with your for Next.js/React project (javascript)

Integrate ESLint with your for Next.js/React project (javascript)

Extension for Visual Studio Code - Integrates ESLint JavaScript into VS Code.

First of all we need to install ESLint

npm i eslint --save-dev

Install ESLint plugins

npx install-peerdeps --dev eslint-config-airbnb

Note: with a single command will install 6 plugins: eslint-config-airbnbeslint-plugin-importeslint-plugin-reacteslint-plugin-react-hooks, and eslint-plugin-jsx-a11y. You can also install these plugins individually.

Install babel eslint

npm i --save-dev babel-eslint

Your "devDependencies" should look something similar like this

"devDependencies": {
    "babel-eslint": "^10.1.0",
    "eslint": "^7.2.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-react": "^7.20.6",
    "eslint-plugin-react-hooks": "^4.0.0"
}

Now, create file .eslintrc.json at the root of project. Paste below config:

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
        "node": true
    },
    "parser": "babel-eslint",
    "extends": [
        "eslint:recommended",
        "airbnb",
        "airbnb/hooks",
        "plugin:react/recommended",
        "plugin:import/errors",
        "plugin:import/warnings",
        "plugin:jsx-a11y/recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 11,
        "sourceType": "module"
    },
    "settings": {
        "react": {
            "version": "detect"
        }
    },
    "plugins": [
        "react",
        "react-hooks"
    ],
    "rules": {
        "react/react-in-jsx-scope": "off",
        "react/jsx-filename-extension": [
            1,
            {
                "extensions": [
                    ".js",
                    ".jsx"
                ]
            }
        ],
        "react/display-name": 1
    }
}

Also, install ESLint extension for VSCode, After that need to reload VSCode window once to get proper linting.

ESLint will automatically start detecting errors/warnings in .js and .jsx files. If that's not the case then either your project has no linting errors or ESLint is not properly setup. To test if linting works run eslint command in terminal with folder path i.e. eslint pages/** and notice output.

To disable linting of some files/folders you can create a .eslintignore at the root of project.

.eslintignore

node_modules
dist
coverage

Finally, you can also add linting to scripts in package.json as a part of your pipeline process

"scripts": {
    "lint": "eslint . --ext js,jsx",
    "lint:fix": "eslint . --ext js,jsx --fix"
}

javascript eslint next.js react

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Top React JS Development Company | React JS Development Services

As a leading React.js development company, our development team has created reusable React.js components, large-scale websites, and interactive user interfaces for global clients. 4200+ Projects | 16+ Yrs Exp

Hire India's Best React JS Developers| Hire React JS Development Company

Looking to hire top dedicated Reactjs developers in India at affordable prices? Our 5+ years of average experienced Reactjs developers comprise proficiency in delivering the most complex and challenging web apps. Hire ReactJS development...

How to Select and Hire the Best React JS and React Native Developers?

Hire React JS developer from Technoduce, we have a team of experienced and expert Angular JS developer. With our hire React JS developer, you have complete control over the technical resource throughout the development process.

Hire Top React JS Developers | Offshore Reactjs Programmers India

description: Hire dedicated React JS developers & programmers in India for custom full-stack React JS projects on hourly/full-time basis. Strict NDA, 16+ years exp & 2500+ clients|450+ Experts