代码规范 | 如何在react项目中配置eslint
「这是我参与2022首次更文挑战的第1天,活动详情查看:2022首次更文挑战」
什么是ESLint
ESLint
是在 ECMAScript
/JavaScript
代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误。在许多方面,它和 JSLint
、JSHint
相似,除了少数的例外:
ESLint
使用Espree
解析JavaScript
ESLint
使用AST
去分析代码中的模式ESLint
是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则
简单理解,它就是一个代码检查工具
为什么需要ESLint
在日常开发中,每个开发者的代码规范是不一样的,但一个项目是由多人进行开发,这就会导致整个项目的代码是各种各样的,为了解决这一问题我们将ESLint
引入到我们的实际项目上,来约束代码和降低维护成本。
准备项目
看了ESLint
的简介之后,我们如何在项目中使用它?这也是今天这篇文的主题。
首先准备一个react
项目,我们使用vite+react-ts
模板来创建,打开一个终端执行以下命令:
pnpm create vite eslint-react-app -- --template react-ts
注意:双横线是必须的,这里没有写错哦!
拉取完毕之后,你会看到以下内容:
Done. Now run:
cd eslint-react-app
npm install
npm run dev
执行cd eslint-react-app
,进去命令之后使用pnpm i
对项目依赖进行安装。
配置ESLint
pnpm install eslint -D
查看安装的ESLint
版本。
"devDependencies": {
// ...省略
"eslint": "^8.5.0","
}
执行eslint
初始化命令,生成.eslintrc.js
配置文件。
pnpm exec eslint --init
PS E:\project\viteProjects\eslint-react-app> pnpm exec eslint --init
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · airbnb
√ What format do you want your config file to be in? · JavaScript
√ Would you like to install them now with npm? · No
这里我们不使用npm
对依赖进行安装,我们手动使用pnpm
对依赖进行安装。(尽可能让项目包管理工具保持一致),执行以下命令进行安装,注意的是这里要加上-D
参数。
pnpm install eslint-plugin-react@^7.28.0 @typescript-eslint/eslint-plugin@latest eslint-config-airbnb@latest eslint-plugin-import@^2.25.3 eslint-plugin-jsx-a11y@^6.5.1 eslint-plugin-react-hooks@^4.3.0 @typescript-eslint/parser@latest eslint-import-resolver-typescript -D
运行eslint
在项目命令中,我们打开一个终端,在使用之前我们先看这两条命令,也算是在项目中比较常用的命令,但现在的编辑器都自带了纠正功能。这里知道一下就好了。
使用eslint
命令查看项目中src
目录下有哪些错误(这里指不符合规则的地方)。
pnpm exec eslint src/*
使用--fix
指令,修复项目中src
目录下的错误。
pnpm exec eslint src/* --fix
让我们来试试这些命令
在项目中,新开一个终端执行:
pnpm exec eslint src/*
PS E:\project\viteProjects\eslint-react-app> pnpm exec eslint src/*
E:\project\viteProjects\eslint-react-app\src\App.css
1:0 error Parsing error: Declaration or statement expected
E:\project\viteProjects\eslint-react-app\src\App.tsx
1:33 error Missing semicolon semi
2:30 error Missing semicolon semi
3:19 error Missing semicolon semi
6:40 error Missing semicolon semi
9:5 error 'React' must be in scope when using JSX react/react-in-jsx-scope
9:5 error JSX not allowed in files with extension '.tsx' react/jsx-filename-extension
10:7 error 'React' must be in scope when using JSX react/react-in-jsx-scope
11:9 error 'React' must be in scope when using JSX react/react-in-jsx-scope
12:9 error 'React' must be in scope when using JSX react/react-in-jsx-scope
13:9 error 'React' must be in scope when using JSX react/react-in-jsx-scope
14:11 error 'React' must be in scope when using JSX react/react-in-jsx-scope
14:58 error 'count' is already declared in the upper scope on line 6 column 10 no-shadow
15:23 error `{count}` must be placed on a new line react/jsx-one-expression-per-line
18:9 error 'React' must be in scope when using JSX react/react-in-jsx-scope
19:16 error `code` must be placed on a new line react/jsx-one-expression-per-line
19:16 error 'React' must be in scope when using JSX react/react-in-jsx-scope
19:36 error ` and save to test HMR updates. ` must be placed on a new line react/jsx-one-expression-per-line
21:9 error 'React' must be in scope when using JSX react/react-in-jsx-scope
22:11 error 'React' must be in scope when using JSX react/react-in-jsx-scope
31:11 error 'React' must be in scope when using JSX react/react-in-jsx-scope
42:4 error Missing semicolon semi
45:19 error Missing semicolon semi
E:\project\viteProjects\eslint-react-app\src\favicon.svg
1:1 error 'React' must be in scope when using JSX react/react-in-jsx-scope
1:1 error JSX not allowed in files with extension '.svg' react/jsx-filename-extension
2:1 error 'React' must be in scope when using JSX react/react-in-jsx-scope
2:1 error Expected indentation of 2 space characters but found 0 react/jsx-indent
2:311 error A space is required before closing bracket react/jsx-tag-spacing
3:1 error 'React' must be in scope when using JSX react/react-in-jsx-scope
3:1 error Expected indentation of 2 space characters but found 0 react/jsx-indent
3:635 error A space is required before closing bracket react/jsx-tag-spacing
4:1 error 'React' must be in scope when using JSX react/react-in-jsx-scope
4:1 error Expected indentation of 2 space characters but found 0 react/jsx-indent
5:1 error 'React' must be in scope when using JSX react/react-in-jsx-scope
5:1 error Expected indentation of 2 space characters but found 0 react/jsx-indent
6:1 error 'React' must be in scope when using JSX react/react-in-jsx-scope
6:1 error Expected indentation of 2 space characters but found 0 react/jsx-indent
6:7 error Unknown property 'stop-color' found, use 'stopColor' instead react/no-unknown-property
6:27 error A space is required before closing bracket react/jsx-tag-spacing
7:1 error 'React' must be in scope when using JSX react/react-in-jsx-scope
7:1 error Expected indentation of 2 space characters but found 0 react/jsx-indent
7:18 error Unknown property 'stop-color' found, use 'stopColor' instead react/no-unknown-property
7:38 error A space is required before closing bracket react/jsx-tag-spacing
9:1 error 'React' must be in scope when using JSX react/react-in-jsx-scope
9:1 error Expected indentation of 2 space characters but found 0 react/jsx-indent
10:1 error 'React' must be in scope when using JSX react/react-in-jsx-scope
10:1 error Expected indentation of 2 space characters but found 0 react/jsx-indent
10:7 error Unknown property 'stop-color' found, use 'stopColor' instead react/no-unknown-property
10:27 error A space is required before closing bracket react/jsx-tag-spacing
11:1 error 'React' must be in scope when using JSX react/react-in-jsx-scope
11:1 error Expected indentation of 2 space characters but found 0 react/jsx-indent
11:26 error Unknown property 'stop-color' found, use 'stopColor' instead react/no-unknown-property
11:46 error A space is required before closing bracket react/jsx-tag-spacing
12:1 error 'React' must be in scope when using JSX react/react-in-jsx-scope
12:1 error Expected indentation of 2 space characters but found 0 react/jsx-indent
12:18 error Unknown property 'stop-color' found, use 'stopColor' instead react/no-unknown-property
12:38 error A space is required before closing bracket react/jsx-tag-spacing
15:7 error Missing semicolon semi
E:\project\viteProjects\eslint-react-app\src\index.css
1:0 error Parsing error: Unexpected keyword or identifier
E:\project\viteProjects\eslint-react-app\src\logo.svg
1:1 error 'React' must be in scope when using JSX react/react-in-jsx-scope
1:1 error JSX not allowed in files with extension '.svg' react/jsx-filename-extension
2:5 error 'React' must be in scope when using JSX react/react-in-jsx-scope
2:5 error Expected indentation of 2 space characters but found 4 react/jsx-indent
3:9 error 'React' must be in scope when using JSX react/react-in-jsx-scope
3:9 error Expected indentation of 6 space characters but found 8 react/jsx-indent
3:2481 error A space is required before closing bracket react/jsx-tag-spacing
4:9 error 'React' must be in scope when using JSX react/react-in-jsx-scope
4:9 error Expected indentation of 6 space characters but found 8 react/jsx-indent
4:47 error A space is required before closing bracket react/jsx-tag-spacing
5:9 error 'React' must be in scope when using JSX react/react-in-jsx-scope
5:9 error Expected indentation of 6 space characters but found 8 react/jsx-indent
7:3 error JSX not allowed in files with extension '.tsx' react/jsx-filename-extension
10:34 error Missing trailing comma comma-dangle
11:2 error Missing semicolon semi
✖ 82 problems (82 errors, 0 warnings)
46 errors and 0 warnings potentially fixable with the `--fix` option.
可以发现当前这个项目高达82
个规范问题,大致看了下,是一些代码没有引号结尾,以及空格引起的,其中有46个错误可以通过--fix
参数进行修复,我们执行下pnpm exec eslint src/* --fix
,执行完之后我们的错误还没有被完成清除。
解决剩下的问题
解决 error Unable to resolve path to module './App' import/no-unresolved
解决 error Missing file extension for "./App" import/extensions
安装eslint-import-resolver-typescript
插件(在前面我们已经安装了),在eslintrc.js
配置文件中新增一个settings
节点,配置以下内容。
// eslintrc.js
settings:{
"import/resolver": {
typescript: {}
}
}
解决 error 'React' must be in scope when using JSX react/react-in-jsx-scope
在eslintrc.js
文件中rules
添加以下规则,忽略规则。
// eslintrc.js
rules: {
"react/react-in-jsx-scope": "off",
},
忽略一些不检测的文件例如svg
文件。
在项目根项目中新增一个.eslintignore
配置文件,该文件作用于在执行eslint
检测时,忽略的一些文件(根据自身的需求,来填写忽略检测的文件)。
// .eslintignore
*.svg
*.css
解决 Missing file extension "ts" for "./App"
// eslintrc.js
rules: {
"import/extensions": [
"error",
"ignorePackages",
{
"js": "never",
"jsx": "never",
"ts": "never",
"tsx": "never"
}
]
},
解决 error 'count' is already declared in the upper scope on line 6 column 10 no-shadow
// eslintrc.js
rules: {
"no-shadow": "off",
},
解决 error JSX not allowed in files with extension '.tsx' react/jsx-filename-extension
// eslintrc.js
rules: {
"react/jsx-filename-extension": [1, { extensions: [".tsx",".ts"] }],
},
添加react-hooks
插件(在前面我们已经安装了),在.eslintrc.js
文件中plugins
节点最后面添加react-hooks
。
// eslintrc.js
plugins: [
// ...
"react-hooks"
],
我们再执行下pnpm exec eslint src/*
命令,现在项目已经没有任何规范问题了。
在编辑器中使用ESLint
在VSCODE
插件中心中搜索ESLint
,安装ESLint
插件即可。
在Webstorm
中默认集成了ESLint
,打开菜单栏中File->Settings
配置ESLint
。
GitHub仓库
转载自:https://juejin.cn/post/7054206618275151908