文章目录
ESLint: Typescript + React 集成
最新的版本对 TS 的支持非常完善, 绝大多数的问题都是由于安装了旧版本或者版本不兼容.
当前版本: ESLint 6.8.0
2020.02.09 更新
-
首先更新 Eslint 到最新版本, 为了省去后续的一切不必要的麻烦
- VSC 会默认调用 global 的 EsLint, 所以建议将全局的 EsLint 更新到最新版本
- 为了防止后续版本冲突本地的 package.json 最好也保留一个相同版本
-
跑到项目根目录执行
eslint --init
- 如果你希望使用现成的规则, 那么对于第一个选项 How would you like to use ESLint?
- 必须选择 To check syntax, find problems, and enforce code style
-
然后选择使用了 Typescript
-
然后 eslint 会引导你使用 npm 下载对应的包。或者你也可以不让他下载而手动使用 yarn 安装
yarn add eslint-plugin-react@^7.14.3 @typescript-eslint/eslint-plugin@latest eslint-config-airbnb@latest eslint@^5.16.0 || ^6.1.0 eslint-plugin-import@^2.18.2 eslint-plugin-jsx-a11y@^6.2.3 eslint-plugin-react-hooks@^1.7.0 @typescript-eslint/parser@latest --dev
需要安装的 packages
本地安装这些包, ** 不要安装到 global**
eslint-plugin-react@^7.14.3
@typescript-eslint/eslint-plugin@latest
eslint-config-airbnb@latest
eslint
eslint-plugin-import@^2.18.2
eslint-plugin-jsx-a11y@^6.2.3
eslint-plugin-react-hooks@^1.7.0
以及一些可能需要的其他 Package
@typescript-eslint/parser
eslint-plugin-import
eslint-plugin-jsx-a11y
这些包安装完之后到 CLI 执行
eslint index.tsx
试一试
TroubleShooting
ESLint couldn’t find the plugin"xxx"
正常情况下到这一步配置应该已经完成了, 可能出现的问题:
-
ESLint couldn’t find the plugin"eslint-plugin-import".
- 这个是最基础的 package, 使用 yarn 或者 npm 重新安装一下即可。
- 同样的, 为了避免不必要的麻烦, 最好直接安装成全局的包。