如何使用 Create React App 设置 ESLint、TypeScript、Prettier

注意：CRA 3.0 将包含开箱即用的 ESLint TS linting，https://github.com/facebook/create-react-app/issues/6475

我最近得知 TSLint 即将被弃用（听起来有点伤感），但这是有充分理由的，因为 JS/TS 社区正在围绕一套通用的核心技术进行整合。如果你有兴趣了解这些原因，Palantir（TSLint 的创建者）有一篇不错的文章推荐给你。

唉，是时候把我的个人小项目迁移到 TypeScript 了。过去一年我一直是 TypeScript 的全职开发者，我发现即使是在规模较小的 JavaScript 项目中，我也非常怀念它。我以前习惯使用普通的 JS 来降低复杂性，但现在我对 TypeScript 的了解让我在最简单的项目中也能轻松配置。更何况，最新版本的 Create React App 已经开箱即用地支持 TypeScript 集成了！

我之前设置过 TSLint 好几次，但考虑到 ESLint 代表着 TypeScript linting 的未来，我决定尝试一下。由于目前情况不稳定，设置过程并不像我想象的那么简单，而且由于缺乏文档，设置起来也有些困难，所以我决定在这里记录一下。

本文假设您正在使用最新版本的 CRA，它已附带 ESLint。

首先，让我们安装 devDependencies



npm i -D @types/react @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-config-react eslint-plugin-prettier prettier

package.json 中的 devDependecies 现在应该如下所示，



  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^1.6.0",
    "@typescript-eslint/parser": "^1.6.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-config-react": "^1.1.7",
    "eslint-plugin-prettier": "^3.0.1",
    "prettier": "^1.16.4"
  }

现在在项目根目录（与 src 文件夹同一级别）中创建两个文件。



.eslintignore
.eslintrc.json

您可能会看到一些教程使用.yml或.js配置，而有些教程可能会.eslintignore完全排除，并在其 Node.js 脚本中使用模式匹配来排除某些文件夹。所有这些方法都是有效的，您决定使用哪一种完全取决于您的个人喜好。

在你的 .eslintrc.json 中添加



{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "env": {
    "browser": true,
    "jasmine": true,
    "jest": true
  },
  "rules": {
    "prettier/prettier": ["error", { "singleQuote": true }]
  },
  "settings": {
    "react": {
      "pragma": "React",
      "version": "detect"
    }
  },
  "parser": "@typescript-eslint/parser"
}

并在 .eslintignore 文件中添加你不想被 lint 的路径。在我的例子中，我想排除我的测试文件夹和与 CRA 一起打包的 Service Worker。



src/registerServiceWorker.js
src/**/__tests__/**

在你的package.json文件中，我们将添加一个新的脚本文件，用于运行我们的 linter。在你的 react start、build和testscripts 旁边添加



"lint:fix": "eslint './src/**/*.{ts,tsx}'",

假设我们已经构建了一个全新的 Create React App 项目，下一步就是创建我们的第一个 TypeScript 文件。请继续，将其重命名App.js为tsconfig.json 文件，App.tsx并npm start在终端中运行。CRA 会检测到这是一个 TypeScript 项目，并自动为您添加一个 tsconfig.json 文件。运行后npm run lint，您的终端窗口中就会输出经过 linted 处理的代码。如果您使用的是 VSCode，请安装 ESLint 扩展以启用编辑器高亮显示。现在打开您的App.tsx文件，它应该如下所示：将鼠标悬停在该方法上，应该会显示两个特定于 TypeScript 的 ESLint 错误。

render



Missing accessibility modifier on method definition render.eslint(@typescript-eslint/explicit-member-accessibility)
Missing return type on function.eslint(@typescript-eslint/explicit-function-return-type)

在编辑器中高亮显示，无需显式运行脚本即可告知代码是否违反了已配置的 Linter 规则lint。如果我们想禁用这些规则，可以添加



   "@typescript-eslint/explicit-member-accessibility": 0,
   "@typescript-eslint/explicit-function-return-type": 0,

添加到中的规则配置中eslintrc.json。在这里，我们可以禁用规则、启用新规则，并自定义我们扩展的默认配置。在某些情况下，可以通过在后附加来自动更正某些 linting--fix问题npm run lint。

如果在 VSCode 中使用，请settings.json添加以下内容以启用保存时自动修复，



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

文章来源：https://dev.to/benweiser/how-to-set-up-eslint-typescript-prettier-with-create-react-app-3675