最简易版,在React中使用Eslint+Prettier
在多人合作的项目中,同意代码风格是特别重要的一件事,如果一个人的缩进是2空格,另一个人的缩进是4空格,那即使代码没有做修改,也会被git识别成文件有改动。这情况是很没有必要且可以避免的。下面我就分享如何使用eslint和prettier来很轻松地达到我们的目的--代码格式化做到基本统一。文章将会分成三个部分
- eslint的使用和说明
- prettier在eslint的使用和说明
- 让IDE保存按照eslint配置自动格式化
文章的插件讲解将会基于最原始的react官方脚手架搭建的项目
eslint的使用和说明
什么eslint
在react中使用eslint
安装
npm i eslint -D
编写eslint配置文件
在项目根目录中新建一个文件名为:.eslintrc.js
也可以创建后缀json,yml等的文件,但不能没有后缀(如: .eslintrc),没有后缀的写法已经被弃用了
其内容如下:
module.exports = {
parserOptions: {
ecmaVersion: 'latest', // 使用最新的 ECMAScript 版本
sourceType: 'module', // 使用模块化的文件结构
},
env: {
browser: true, // 启用浏览器环境
es2021: true, // 使用 ES2021 版本的特性
commonjs: true, // 启用 CommonJS 模块规范
},
parser: '@typescript-eslint/parser', // 使用 '@typescript-eslint/parser' 作为解析器,用于解析 TypeScript 代码
extends: [
'eslint:recommended', // 使用 ESLint 推荐的基本规则
'plugin:react/recommended', // 使用 react 插件推荐的规则
'plugin:@typescript-eslint/recommended', // 使用 @typescript-eslint 插件推荐的规则
],
plugins: ['react'], // 启用 react 插件
rules: {
quotes: ["error", "single"], // 强制使用单引号
},
};
上面的配置内容已经写了些注释,让大家可以大致知道每个配置项代表什么意思。这已经是最基本的配置内容了。支持了typescript,react的格式校验,支持最新的es语法,esm模块,浏览器全局变量,es2021的全局变量,commonjs的全局变量。我们可以修改quotes: ["error", "single"]
内容,来验证eslint是否生效。
为什么其中写了
sourceType: 'module'
, 还要写commonjs: true
,这可能会让一些人迷糊。前者表示校验整个项目是以esm模块的语法来进行校验的。而后者表示支持commonjs模块下的环境变量。 其实可以试试将后者删掉,会发现eslint校验规则依旧存在并不受影响,那么,哪里变了? 这里变了:这里会有个红线,虽然不影响校验效果,但是影响心情😄。
加上了
commonjs: true
后,这个报错就消失了~ (暂不知道,这样做有没哟其他的影响,知道的jym评论区告诉我👍) 还有中做法,是添加node:true
eslint的配置项讲解(供想深入了解的同学。可跳过)
prettier在eslint的使用和说明
什么是prettier
prettier是一个有自己风格的代码格式化工具。它可以支持多种语言,例如JavaScript, TypeScript, CSS, HTML, Markdown等。它可以和大多数的编辑器集成,例如VS Code, WebStorm, Atom等。它的作用是通过解析你的代码,然后按照一定的规则重新打印出来,保证你的代码风格统一和美观。它可以帮助你节省时间和精力,避免在代码审查中讨论风格问题,提高代码质量和可读性。
prettier与eslint不同的是,
- eslint既有代码风格的校验,也有语法的校验,prettier只负责代码的格式化。
- eslint可以校验多种类型的文件(ts,tsx,js,jsx,html,md,vue),只要安装相应的插件,prettier也可以校验多种类型的文件(包括但不仅限于css,sass),但是它支持的范围更广泛。
也就是说你想在代码中对css文件格式化,就必须使用prettier
在eslint中使用prettier
我们知道eslint和prettier都有对代码风格的校验,所以如果同时生效,就必然会有冲突。相比于手动解决冲突,还可以使用eslint-config-prettier这个扩展来自动关闭这些规则。需要该功能需要一个依赖eslint-config-prettier
npm i eslint-config-prettier -D
该依赖是一个eslint插件,功能是关闭了eslint中与prettier有冲突的rules使用方法:
{
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
'prettier' //全部关闭eslint中有关prettier,不管冲没冲突
],
}
如果只想关闭一部分,可以这么写
extends: [ ...,"plugins:prettier/recommended"]
除此之外,我还想在运行eslint时同时运行prettier,并且把prettier的错误作为eslint的错误来显示。这时候可以安装另外一个依赖
npm i eslint-plugin-prettier -D
使用方法:
{
plugins: ['react', 'prettier'],
rules: {
'react/react-in-jsx-scope': 'off',
'prettier/prettier': ['error'], // 打开所有的prettier的rule
},
}
到这里差不多就结束配置了,不过还差一样东西,就是prettier的配置,如果没有这个配置,那eslint就只能按照默认的rule来格式化代码了。
新建一个文件.prettierrc.js
module.exports = {
// 是否在语句末尾添加分号
semi: true,
// 是否使用单引号而不是双引号
singleQuote: true,
// 缩进的空格数
tabWidth: 4,
// 每行的最大字符数
printWidth: 120,
// 是否在多行元素的最后一行放一个括号
bracketSameLine: true,
// 箭头函数的参数是否总是用括号包裹
arrowParens: 'always',
// 在JSX中是否使用单引号而不是双引号
jsxSingleQuote: true,
// 在对象字面量中是否添加空格,例如 { foo: bar }
bracketSpacing: true,
};
好了,下面我们开始验证我们的配置是否生效刚开始的App.tsx文件中,缩进的空格数是4修改
tabWidth
->tabWidth: 8
module.exports = {
// 缩进的空格数
tabWidth: 8,
};
在命令行中执行:
npx prettier --write src/App.tsx
然后再看App.tsx,文件,发现缩进变成8个空格了说明prettier生效了,那eslint有没有生效呢,我们将
tabWidth
改回去->tabWidth: 4
,执行eslint命令
npx eslint --fix src/App.tsx
再看看APP.tsx,发现缩进又变成4个空格了哇这种感觉很棒,eslint和prettier真正融合在一起,对代码格式共用同一套配置文件。要是觉得敲命令麻烦,可以将格式化的命令放在package脚本中:
{
"scripts": {
"lint": "eslint --fix src/**/*.{ts,tsx}",
"format": "prettier --write 'src/**/*.{css,ts,tsx,json}'"
},
}
让IDE按照eslint配置的自动格式代码
安装两个插件,eslint,prettier
修改vscode/setting.json
全局用eslint格式化代码
{
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "html"],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"[javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[typescriptreact]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[typescript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[css]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
}
}
也可以使用prettier作为格式化插件,效果都是一样的
{
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
}
注意的点
注意的点:
- 虽然可以通过 ESLint 配置将prettier的rules配置传递给 Prettier,但不建议这样做。因为编辑器扩展不会从ESLint 读取设置。
就像这样:
{
rules: {
'react/react-in-jsx-scope': 'off',
'prettier/prettier': [
'error',
{
tabWidth: 4,
},
],
},
}
也就是说如果你是用了IDE保存自动格式化的功能,与prettier有关的插件,只能读取.prettierrc配置文件,不能读取eslint配置中的prettier,这会导致不一样的体验。 类似于用prettier保存文件之后,却收到了eslint(prettier/prettier)的报错信息
注意的点: 2. 上面说过,可以利用eslint-plugin-prettier 插件,把prettier的错误作为eslint的错误来显示。但这样做有个小问题,就是当我们修改了.prettierrc中的rule的时候,eslint插件在编辑器中的风格校验规则还是旧的。这个时候必须通过reload vscode来解决。( ctrl + shift + p, 输入 reload window即可)
总结:
转载自:https://juejin.cn/post/7226345144995758135