React项目配置prettier和eslint的方法.docx

第

React项目配置prettier和eslint的方法

目录配置prettier和eslint配置stylelint保存自动修复参考视频:/video/BV1rh411e7E5vd_source=eee62ea3954ac01bff9e87e2a7b40084

prettier代码格式化eslintjs语法检查stylellintcss样式检查

配置prettier和eslint

1.初始化React项目

npxcreate-react-appstudy_react

2.安装vscode插件prettier和eslint,配置vscode

3.安装相关依赖

yarnadd-Dprettiereslint

在代码格式化时采用Perttier规则，而我们代码校验使用的是ESLint，如果同一个规则配置不一致，往往就会出现冲突问题；

比如：字符串单、双引号的配置，eslint后把字符串变成单引号，更新文件代码过后，重新保存（Prettier）又自动格式化后变成双引号，导致代码校验异常。

解决方案1：两者配置文件部分配置修改成一致.

解决方案2：安装相关插件（Prettier和ESLint冲突解决方案eslint-config-prettiereslint-plugin-prettier）

eslint-config-prettier禁用eslint冲突配置

eslint-plugin-prettierPrettier先格式化（默认是先eslint格式化，再Prettier格式化）

yarnadd-Deslint-config-prettiereslint-plugin-prettier

4.优雅的提示错误

extends:[eslint:recommended,plugin:react/recommended],默认是eslint:recommended，（步骤6后面会看到这个配置）

/package/eslint-config-airbnb

npxinstall-peerdeps--deveslint-config-airbnb

5.初始化.eslintrc.json文件

npxeslint--init

如果全局安装了eslint(npminstall-geslint)了,可以直接使用eslint--init

根据提示勾选:

安装完成的eslintrc.json文件

{

env:{

browser:true,

es2025:true

extends:[eslint:recommended,plugin:react/recommended],

parserOptions:{

ecmaFeatures:{

jsx:true

ecmaVersion:latest,

sourceType:module

plugins:[react],

rules:{

indent:[error,tab],

linebreak-style:[error,windows],

quotes:[error,double],

semi:[error,always]

}

6.修改eslintrc.json优雅提示(也就是步骤4所提到)

extends:[airbnb,prettier,plugin:react/recommended],

plugins:[prettier,react],

7.新建.prettierrc文件

更多规则:/docs/options.html

{

singleQuote:false,

endOfLine:lf

}

8.可自行定义eslintrc.json规则

/docs/rules/

9.效果

10.让提示更细致

给eslintrc.json追加rules,prettier/prettier:error,

最终的两个文件的配置

//eslint

env:{

browser:true,

es2025:true

extends:[airbnb,prettier,plugin:react/recommended],

parserOptions:{

ecmaFeatures:{