1. 安装相关依赖
- yarn add eslint
- yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin
- yarn add eslint-plugin-react
- yarn add eslint-config-alloy
- yarn add eslint-loader
- 首先要安装 eslint，eslint 默认使用
Espree进行解析，无法识别 ts 的一些语法，所以需要安装一个 ts 的解析器@typescript-eslint/parser，用它来代替默认的解析器，然后由@typescript-eslint/eslint-plugin来提供有关 ts 的规则补充。 - 由于是 react 项目，所以还需要插件
eslint-plugin-react来支持.tsx。 - eslint 规则众多，且有些原生规则在 ts 中不兼容，推荐 alloy 的这套配置
eslint-config-alloy，它提供了 ts + react 的版本，并且不包含代码格式的部分，与 Prettier 完全兼容。 - 最后是提供给 webpack 的
eslint-loader，可以在使用webpack-dev-server开发中实时检查，越早发现错误越好解决。
2. 配置文件
接下来在项目根目录创建 `.eslintrc.json` 文件
{
"parser": "@typescript-eslint/parser",
"plugins": [
"@typescript-eslint/eslint-plugin"
],
"extends": [
"alloy",
"alloy/react",
"alloy/typescript"
],
"settings": {
"react": {
"version": "detect"
}
},
"env": {
// 您的环境变量（包含多个预定义的全局变量）
// Your environments (which contains several predefined global variables)
//
// browser: true,
// node: true,
// mocha: true,
// jest: true,
// jquery: true
},
"globals": {
// 您的全局变量（设置为 false 表示它不允许被重新赋值）
// Your global variables (setting to false means it's not allowed to be reassigned)
//
// myGlobal: false
},
"rules": {
// 自定义您的规则
// Customize your rules
// 下面解决这个问题 Line 1:1: Definition for rule 'react/no-unstable-nested-components' was not found react/no-unstable-nested-components
"react/no-unstable-nested-components": "off"
}
}
3. 添加到 package scripts命令
// package.json
{
"scripts": {
"lint": "eslint '{components,example}/**/*.{ts,tsx,js,jsx}'",
"lint_fix": "eslint '{components,example}/**/*.{ts,tsx,js,jsx}' --fix"
}
}
以上指令表示对 components 和 example 文件夹下的 .ts .tsx .js .jsx 文件进行检查。
上面是 glob 的形式，也可以像下面这样写成文件夹形式，就需要通过 --ext 来对扩展的文件类型进行指定。
// package.json
{
"scripts": {
"lint": "eslint {components,example} --ext .ts,.tsx,.js,jsx",
"lint_fix": "eslint {components,example} --ext .ts,.tsx,.js,jsx --fix"
}
}
- 注意：
glob 形式下文件路径要加引号。
--ext 只能搭配文件夹形式，对 glob 形式无效。
4. 给webpack添加eslint-loader
// craco.config.js 文件
webpack: {
alias: {
'@': path.resolve(__dirname, 'src'),
'@components': path.resolve('src/components'),
'@pages': path.resolve('src/pages'),
'@ts': path.resolve('src/types'),
},
rules: [
{
test: /\.(jsx|js|ts|tsx)$/,
include: [
path.resolve(__dirname, '../components'),
path.resolve(__dirname, '../example'),
],
exclude: [/node_modules/],
use: ['eslint-loader'],
enforce: 'pre',
},
],
注意：
要把它放在 rules 的第一项，或者添加 enforce: 'pre' 来保证首先应用 eslint-loader，因为是要对我们的源代码进行检查，检查要在 babel-loader 等其他编译之前。
5. vscode IDE 安装 eslint
左下set设置按钮 ---> 命令面板 ----> 输入 open settings.json
-
在settings.json 中设置
"editor.codeActionsOnSave": { "source.fixAll.eslint": true }就可以在编辑器拥有实时错误标红。
-
添加 .eslintignore 文件
编辑器中的检测没有指定路径，所以会检查
components和example之外的文件，如果有些不想让它检查，可以根目录添加.eslintignore文件。
build/
dist/
6. 安装配置 Prettier
-
安装 prettier
yarn add prettier -
根目录新增 prettier.config.js 文件配置规则
// prettier.config.js or .prettierrc.js module.exports = { // 一行最多 100 字符 printWidth: 100, // 使用 4 个空格缩进 tabWidth: 4, // 不使用缩进符，而使用空格 useTabs: false, // 行尾需要有分号 semi: true, // 使用单引号 singleQuote: true, // 对象的 key 仅在必要时用引号 quoteProps: 'as-needed', // jsx 不使用单引号，而使用双引号 jsxSingleQuote: false, // 末尾不需要逗号 trailingComma: 'none', // 大括号内的首尾需要空格 bracketSpacing: true, // jsx 标签的反尖括号需要换行 jsxBracketSameLine: false, // 箭头函数，只有一个参数的时候，也需要括号 arrowParens: 'always', // 每个文件格式化的范围是文件的全部内容 rangeStart: 0, rangeEnd: Infinity, // 不需要写文件开头的 @prettier requirePragma: false, // 不需要自动在文件开头插入 @prettier insertPragma: false, // 使用默认的折行标准 proseWrap: 'preserve', // 根据显示样式决定 html 要不要折行 htmlWhitespaceSensitivity: 'css', // 换行符使用 lf endOfLine: 'lf' }; -
执行检查
npx prettier --test . // 全部文件 npx prettier --test components/ // 特定文件 -
执行修复
npx prettier --write . // 全部文件 npx prettier --write components/ // 特定文件
7. 安装 vscode 的插件，自动格式化
实际上不用执行，直接安装编辑器插件，保存文件就直接自动格式化了。
一定要添加 "prettier.trailingComma": "none" 才能保证正常的去掉 行尾的 逗号
vscode 搜 `prettier` 直接安装，然后在 `settings.json` 中添加配置：
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2,
"prettier.singleQuote": true,
"prettier.trailingComma": "none"
}
