@39digits/eslint-config-react 中文文档教程

Question

ESLint config for React with Prettier and TypeScript support

Quick-start

Installation

通过 npx 使用 install-peerdeps 自动安装此可共享配置及其对等依赖项.

npx install-peerdeps --dev @39digits/eslint-config-react

或者使用 npm 在一行中显式安装所有内容。

npm install --save-dev eslint babel-eslint @39digits/eslint-config-react eslint-config-prettier eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks prettier

Usage

现在在项目根目录中创建一个 .eslintrc.js 配置文件，并将 @39digits/eslint-config-react 添加到 extends 字段。 在 rules 部分下添加您要使用的任何额外规则。

{
  "extends": ["@39digits/eslint-config-react"],
  "rules": {
    // ...
  }
}

在您的项目根目录中创建一个 .prettierrc 配置文件，并填充您的首选格式设置 .

我个人的喜好如下。

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false
}

如果您喜欢 Prettier 默认值，只需将配置对象留空即可。

A note on Prettier usage

我的可共享配置仅使用 ESLint Prettier Config，没有使用 ESLint Prettier Plugin。 这是将 Prettier 与您的 linter 集成 的推荐方法。

Prettier Config 将关闭任何只应由 Prettier 本身处理的 ESLint 规则。 这确保 ESlint 专注于检查代码质量； 格式化它更漂亮。

许多使用 Prettier 插件的可共享配置会将 Prettier 首选项设置为实际的 linting 规则。 我不愿意从项目视图中隐藏这些设置，而是依赖于在项目根目录中具有明确规则的易于发现的 .prettierrc 配置文件。

Enabling Typescript Support

Installation

我没有在 package.json 的 peerDependencies 中包含 TypeScript 模块，以避免 npm 抱怨根本不使用 TypeScript 的项目。 您将需要手动安装依赖项。

npm install --save-dev typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

注意：除了主要的可共享配置包之外，还要安装这些包。

您可能还希望在安装时安装一些类型——这些类型将根据您项目的要求而改变。

npm install --save-dev @types/react @types/node

Usage

Separate Linting for JavaScript and TypeScript files

我更喜欢仅在 *.ts 或 *.tsx 文件上使用 TypeScript 解析器和 TypeScript linting 规则。 然后我将 JavaScript linting 留给 babel-eslint。

为此，我们可以使用 ESLint 的 overrides 功能。 这确保了 TypeScript linting 规则不会，例如，抱怨 *.js 文件内的函数没有返回类型。

有一点需要注意，任何项目特定的 rules 都不会级联。 我们本地 .eslintrc.js 文件中定义的任何规则都需要在 overrides 部分中复制。 我建议在变量中设置任何本地规则，然后将其应用于每个部分以避免不必要的重复和错误。

// .eslintrc.js
const commonRules = {
  // Example rule...
  'prefer-const': 'error',
};

module.exports = {
  extends: ['@39digits/eslint-config-react'],
  rules: commonRules,
  overrides: [
    {
      files: ['**/*.ts', '**/*.tsx'],
      extends: ['@39digits/eslint-config-react/typescript'],
      rules: commonRules,
    },
  ],
};

TypeScript All The Things!

其他时候，您可能希望通过 @typescript-eslint/parser 和 TypeScript linting 规则运行所有内容。

// .eslintrc.js
module.exports = {
  extends: ['@39digits/eslint-config-react/typescript'],
  rules: {
    // ...
  },
};

Setup Visual Studio Code

安装 ESLint 和 更漂亮 Visual Studio 代码扩展。

将以下内容添加到您的 Visual Studio Code settings.json 首选项文件中。

{
  // When you save a file it will run any formatters (i.e. Prettier)
  "editor.formatOnSave": true,
  // Ensure the Prettier extension is used as the default formatter
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // This requires a .prettierrc file in the project root.
  // If there is no config file then Prettier will not run.
  // This is useful if you work on projects not (yet) using Prettier
  // to avoid huge commits existing of largely formatting changes
  // Reference: https://github.com/prettier/prettier-vscode#prettierrequireconfig-default-false
  "prettier.requireConfig": true
}

现在，当您保存任何支持的文件时，Prettier 会自动格式化您的代码。 ESLint 现在还会为任何不遵守您的规则的代码显示视觉指示器。

编码愉快！

License

麻省理工学院。