React | 如何在 NextJS 项目中安装并配置 Prettier 和 ESLint

1 概述

配置项目是一件非常痛苦的事情，本文主要分享 Prettier， ESLint等组件的配置过程，避免后学者踩坑。

2 创建一个项目

使用下面的命令创建一个 NextJS&TypeScript 项目。

npx create-next-app --typescript new-app --use-yarn 

安装 Prettier 和 EsLint。

yarn install prettier@2.5.1 eslint@8.9.0 -D 

安装额外的配置和插件，以扩展功能。

• @typescript-eslint/eslint-plugin：提供 lint 规则的 ESLint 插件
• eslint-config-airbnb： Airbnb 提供的 .eslintrc 的共享配置
• eslint-config-prettier：关闭所有不必要或可能与Prettier冲突的规则。
• eslint-plugin-jsx-a11y：静态 AST 检查器
• eslint-plugin-prettier：将Prettier作为 ESLint 规则运行
• eslint-plugin-react：React 特定的 linting 规则
• eslint-plugin-react-hooks： ESLint 插件强制执行 Hooks 规则
• eslint-plugin-security：ESLint节点安全规则
• eslint-plugin-simple-import-sort: 自动修复的导入排序
• eslint-plugin-sonarjs: 用于ESLint的 SonarJS 规则，用于检测代码中的 bug

注意

这些依赖包安装完毕后，先不要配置 .eslintrc.js 和 .prettierrc.js 文件。把 .eslintrc.json 改为 .eslintrc.js，输入如下内容：

module.exports = {
  root: true,
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },

  env: {
    browser: true,
    node: true,
    es6: true,
  },

  settings: {
    react: {
      version: "detect",
    },
    "import/resolver": {
      node: {
        extensions: [".ts", ".tsx"],
      },
    },
  },

  plugins: ["@typescript-eslint"],
  extends: [
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
    "airbnb",
    "prettier",
    "plugin:jsx-a11y/recommended",
    "plugin:prettier/recommended",
    "plugin:sonarjs/recommended",
    "plugin:security/recommended"
    // "plugin:react-hooks/recommended",
  ],


  rules: {
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-explicit-any": "error",
    "react/react-in-jsx-scope": "off",
    "react/jsx-filename-extension": [
      1,
      {
        extensions: [".ts", ".tsx", ".js", ".jsx"],
      },
    ],
    "react/jsx-props-no-spreading": "off",
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        js: "never",
        jsx: "never",
        ts: "never",
        tsx: "never",
      },
    ],
    "jsx-a11y/anchor-is-valid": [
      "error",
      {
        components: ["Link"],
        specialLink: ["hrefLeft", "hrefRight"],
        aspects: ["invalidHref", "preferButton"],
      },
    ],
    "no-nested-ternary": "off",
    "import/prefer-default-export": "off",
  },
}

然后，配置.prettierrc.js 。脚手架不会默认创建这个文件，我们需要手动设置。

module.exports = {
    tabWidth: 4,
    printWidth: 80,
    endOfLine: "auto",
    arrowParens: "avoid",
    trailingComma: "es5",
    semi: true,
    useTabs: false,
    singleQuote: false,
    bracketSpacing: true,
};

至此，环境配置完毕。