next.js 为 NextJs 设置 ESLint

Question

我已经使用“npx create-next-app”和 .eslintrc.json 文件创建了基本的 next.js 应用程序以添加 eslint 规则。但它不起作用。如何将 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

Next.js/React (javascript) 项目的 ESLint 配置

安装 ESLint

npm i eslint --save-dev

安装 ESLint 插件：

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

上述单个命令将安装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

你的“devDependencies”应该是这样的：

"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
  }
}

另外，为 VSCode安装ESLint 扩展。

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

ESLint 将自动开始检测*.js和*.jsx文件中的错误/警告。如果不是这种情况，那么要么您的项目没有 linting 错误，要么 ESLint 设置不正确。要测试 linting 是否有效，请在终端中使用文件夹路径 ie 运行 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

最后，您还可以scripts在package.json构建/部署过程中添加 linting ：

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

请参阅我当前的NextJSTypescript 项目的ESLint 配置：https : //github.com/GorvGoyl/Personal-Site-Gourav.io/blob/master/.eslintrc.json

Answer 2

您需要安装所需的 npm 模块。

与 NPM：

npm i -D babel-eslint eslint-config-airbnb eslint eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks

与纱线：

yarn add -D babel-eslint eslint-config-airbnb eslint eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks

这是相关的文章

https://medium.com/@melih193/next-js-eslint-setup-tutorial-for-airbnb-config-c2b04183a92a