原文：ESLint + Prettier + Typescript and React in 2022
记录在 React Typescript 项目中配置 ESLint 和 Prettier 的过程
yarn create react-app boilerplate-react-typescript --template typescript这里的 --template typescript 参数指定项目使用 Typescript 语言
yarn add -D eslint初始化 ESLint 配置
npx eslint --init配置选项：
- 选择
check syntax and find problems - 选择
JavaScript modules (import/export) - 选择
React - 选择
Typescript yes - 选择
Browser and Node - 选择任意喜欢的文件格式，这里选
Javascript - 如果是用 npm 直接选
yes，否则no - 手动安装：
yarn add -D eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest - 另外还需要安装一些 Typescript plugins:
yarn add -D eslint-plugin-import @typescript-eslint/parser eslint-import-resolver-typescript - 此时项目根目录下：
.eslintrc.js
module.exports = {
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended"
],
"overrides": [{
"env": {
"node": true
},
"files": [
".eslintrc.{js,cjs}"
],
"parserOptions": {
"sourceType": "script"
}
}],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"@typescript-eslint",
"react"
],
"rules": {
}
}Prettier 仅关注编码风格，不关注语法问题
安装 Prettier：
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react-hooks配置 Prettier: touch .prettierrc
如果是用 Jest，在 .eslintrc.js 中增加 jest 配置
...
"env": {
"browser": true,
"es2021": true,
"node": true,
"jest": true // Add this line!
},
...修改 extends 配置：
...
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended",
"prettier" // Add this line!
],
...增加 rules 配置：
...
"rules": {
"react/react-in-jsx-scope": "off",
"camelcase": "error",
"quotes": ["error", "single"],
"no-duplicate-imports": "error",
"prettier/prettier": "error"
}
...了解更多 ESLint rules
更新 plugins："plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"],
设置 eslint-import-resolver-typescript：
"settings": {
"import/resolver": {
"typescript": {}
},
'react': {
'version': 'detect', // 解决 React version not specified的 waring
},
}配置 .prettierrc 文件：
{
"semi": false,
"tabWidth": 2,
"printWidth": 100,
"singleQuote": true,
"trailingComma": "all",
"jsxSingleQuote": true,
"bracketSpacing": true
}修改 prettier 配置可能需要重启 vscode 才能生效
了解更多配置 options
package.json 中配置一些脚本命令
- lint: 查找问题，但不修复
- lint fix: 查找问题，并修复
- format: 查找 prettier 问题，并修复
{
...
"scripts": {
...
"lint": "eslint src/**/*.{js,jsx,ts,tsx,json}",
"lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx,json}'",
"format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
},
...
}