在 TypeScript 项目中使用 ESLint 和 Prettier

cshooks

目的

实施的

最初发表在我的博客上。

在检查 TypeScript 代码时，有两个主要的检查选项可供选择： TSLint 和 ESLint。TSLint是一个只能用于 TypeScript 的检查器，而 ESLint 同时支持 JavaScript 和 TypeScript。

在 TypeScript 2019 路线图中，TypeScript 核心团队解释说， ESLint 拥有比 TSLint 更高性能的架构， 并且他们在为 TypeScript 提供编辑器代码检查集成时，只会 专注于 ESLint 。因此，我建议使用 ESLint 来对 TypeScript 项目进行代码检查。

设置 ESLint 以与 TypeScript 配合使用

首先，安装所有必需的开发依赖项：

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

eslint：核心 ESLint linting 库
@typescript-eslint/parser：允许 ESLint 检查 TypeScript 代码的解析器
@typescript-eslint/eslint-plugin：包含一组特定于 TypeScript 的 ESLint 规则的插件

接下来，在项目根目录中添加一个 .eslintrc.js 配置文件。以下是 TypeScript 项目的示例配置：

module.exports =  {
  parser:  '@typescript-eslint/parser',  // Specifies the ESLint parser
  extends:  [
    'plugin:@typescript-eslint/recommended',  // Uses the recommended rules from the @typescript-eslint/eslint-plugin
  ],
 parserOptions:  {
    ecmaVersion:  2018,  // Allows for the parsing of modern ECMAScript features
    sourceType:  'module',  // Allows for the use of imports
  },
  rules:  {
    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
    // e.g. "@typescript-eslint/explicit-function-return-type": "off",
  },
};

注意： 我更喜欢使用 JavaScript 文件 .eslintrc （而不是 JSON 文件），因为它支持可以用来更好地描述规则的注释。

如果将 TypeScript 与 React 一起使用， eslint-plugin-react 则应安装 dev 依赖项，并使用以下配置：

module.exports =  {
  parser:  '@typescript-eslint/parser',  // Specifies the ESLint parser
  extends:  [
    'plugin:react/recommended',  // Uses the recommended rules from @eslint-plugin-react
    'plugin:@typescript-eslint/recommended',  // Uses the recommended rules from @typescript-eslint/eslint-plugin
  ],
  parserOptions:  {
  ecmaVersion:  2018,  // Allows for the parsing of modern ECMAScript features
  sourceType:  'module',  // Allows for the use of imports
  ecmaFeatures:  {
    jsx:  true,  // Allows for the parsing of JSX
  },
  },
  rules:  {
    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
    // e.g. "@typescript-eslint/explicit-function-return-type": "off",
  },
  settings:  {
    react:  {
      version:  'detect',  // Tells eslint-plugin-react to automatically detect the version of React to use
    },
  },
};

最终，由您决定要扩展哪些规则以及在文件rules 的对象中使用哪些规则.eslintrc.js 。

添加 Prettier

与 ESLint 配合使用的 prettier非常出色，它在处理代码格式化方面表现出色。安装所需的开发依赖项，即可让 prettier 与 ESLint 协同工作：

yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev

prettier：核心 Prettier 库
eslint-config-prettier：禁用可能与 Prettier 冲突的 ESLint 规则
eslint-plugin-prettier：以 ESLint 规则的形式运行

为了配置 Prettier， .prettierrc.js 需要在项目根目录下创建一个文件。以下是示例 .prettierrc.js 文件：

module.exports =  {
  semi:  true,
  trailingComma:  'all',
  singleQuote:  true,
  printWidth:  120,
  tabWidth:  4,
};

接下来， .eslintrc.js 需要更新文件：

module.exports =  {
  parser:  '@typescript-eslint/parser',  // Specifies the ESLint parser
  extends:  [
    'plugin:@typescript-eslint/recommended',  // Uses the recommended rules from the @typescript-eslint/eslint-plugin
    'prettier/@typescript-eslint',  // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
    'plugin:prettier/recommended',  // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
  ],
  parserOptions:  {
    ecmaVersion:  2018,  // Allows for the parsing of modern ECMAScript features
    sourceType:  'module',  // Allows for the use of imports
  },
};

使用更漂亮的设置作为 ESLint 规则的优点是可以使用 ESLint 的选项eslint-plugin-prettier 自动修复代码。--fix

自动修复代码（VS Code）

为了获得良好的开发者体验，建议将编辑器设置为 eslint --fix在保存文件时自动运行 ESLint 的自动修复命令（即）。由于我使用的是 VS Code，因此 settings.json 在 VS Code 文件中需要进行以下配置，以便在保存文件时自动修复：

"eslint.autoFixOnSave":  true,
"eslint.validate":  [
  "javascript",
  "javascriptreact",
  {"language":  "typescript",  "autoFix":  true  },
  {"language":  "typescriptreact",  "autoFix":  true  }
],

如果您还在中设置了该editor.formatOnSave 选项，则需要添加以下配置，以防止在保存 JavaScript 和 TypeScript 文件时运行 2 个格式化命令：truesettings.json

"editor.formatOnSave":  true,
"[javascript]":  {
  "editor.formatOnSave":  false,
},
"[javascriptreact]":  {
  "editor.formatOnSave":  false,
},
"[typescript]":  {
  "editor.formatOnSave":  false,
},
"[typescriptreact]":  {
  "editor.formatOnSave":  false,
},

就这样，你就可以开始使用 ESLint 来 lint TypeScript 项目了。如果你想确保所有提交到 git 的文件都通过了 ESLint 检查，可以看看 lint-staged，它可以对正在提交的文件运行 ESLint。

文章来源：https://dev.to/robertcoopercode/using-eslint-and-prettier-in-a-typescript-project-53jb

在 TypeScript 项目中使用 ESLint 和 Prettier cshooks 实现的目的

在 TypeScript 项目中使用 ESLint 和 Prettier

cshooks

目的

实施的

设置 ESLint 以与 TypeScript 配合使用

添加 Prettier

自动修复代码（VS Code）