reactjs - next.js 为 NextJs 设置 ESLint

Question

我使用“npx create-next-app”创建了基本的 next.js 应用程序，并创建了用于添加 eslint 规则的 .eslintrc.json 文件。但它不起作用。如何将 linting 规则添加到 nextjs 配置

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "standard"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly",
        "React": "writable"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "react/react-in-jsx-scope": "off"
    }
}

我已经尝试过这个解决方案 - https://medium.com/@joelmasters/setting-up-eslint-for-nextjs-37163d4cabaa

Answer 1

更新

NextJS 现在有将 eslint 添加到项目的官方指南:https://nextjs.org/docs/basic-features/eslint另外您需要安装ESLint extension .

此外，如果您正在寻找支持 typescript 的 ESLint:https://gourav.io/blog/nextjs-cheatsheet

旧答案:

安装 ESLint

npm i eslint --save-dev

安装 ESLint 插件:

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

以上single command将安装 6 个插件:eslint-config-airbnb、eslint-plugin-import、eslint-plugin-react、eslint-plugin -react-hooks 和 eslint-plugin-jsx-a11y。您也可以单独安装这些插件。

安装 babel eslint

npm i -D babel-eslint

安装 prettier 插件(可选，这样 prettier 就不会弄乱 linting)

 npm i -D eslint-config-prettier eslint-plugin-prettier

你的“devDependency”应该看起来像这样:

"devDependencies": {
    "babel-eslint": "^10.1.0",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.1.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-react": "^7.20.0",
    "eslint-plugin-react-hooks": "^2.5.1"
  }

现在，在项目根目录创建一个文件.eslintrc.json。粘贴以下配置:

{
  "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",
    // "plugin:react-hooks/recommended",
    // always put prettier at last
    "prettier"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true // enable linting for jsx files
    },
    "ecmaVersion": 11,
    "sourceType": "module"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "plugins": ["react", "react-hooks"],
  "rules": {
    // NextJs specific fix: suppress errors for missing 'import React' in files for nextjs
    "react/react-in-jsx-scope": "off",
   // NextJs specific fix: allow jsx syntax in js files
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], //should add ".ts" if typescript project
    "react/display-name": 1
  }
}

另外，安装ESLint extension对于 VSCode。

重新加载 VSCode 窗口一次以获得正确的 linting

ESLint 将自动开始检测 *.js 和 *.jsx 文件中的错误/警告。如果情况并非如此，那么要么您的项目没有 linting 错误，要么 ESLint 设置不正确。要测试 linting 是否有效，请在终端中使用文件夹路径运行 eslint 命令，即 eslint Pages/** 并注意输出。

要禁用某些文件/文件夹的 linting，您可以在项目根目录创建 .eslintignore。

.eslintignore:

# don't ever lint node_modules
node_modules
# don't lint build output (make sure it's set to your correct build folder name)
dist
# don't lint nyc coverage output
coverage

最后，您还可以将 linting 添加到 package.json 中的 scripts，作为构建/部署过程的一部分:

"scripts": {
    "lint": "eslint ./components/** ./pages/** -c .eslintrc.json --ext js,jsx",
    "lint-fix": "eslint ./components/** ./pages/** -c .eslintrc.json --fix --ext js,jsx",
}

查看我当前的 NextJS Typescript 项目的 ESLint 配置:https://github.com/GorvGoyl/Personal-Site-Gourav.io/blob/main/.eslintrc.js