ESLint和Prettier基本使用

ESLint

介绍:

eslint可以检查的问题大体上分为两类：

语法错误：语法错误通常是需要手动修正的错误

格式错误：通常使用Prettier进行格式化，此时就有可能出现Prettier和ESLint冲突的情况,即经过Prettier格式化后的代码无法通过ESLint的检验

 

其次eslint的规则也可以分为以下三类：

推荐规则：通过以下配置指定的建议使用的规则 

"extends": "eslint:recommended"

可fix的规则：可以通过fix命令自动修正

其他规则：既不在推荐规则内又不可被自动修正的，可以通过配置rules数组或导入现成的配置使用

1、首先安装ESLint

npm install eslint --save-dev

2、初始化ESLint

./node_modules/.bin/eslint --init 或者npx eslint --init

3、使用ESLint进行检验

./node_modules/.bin/eslint yourfile.js

vs-code中的插件:

ESLint:可以实时对代码进行检查

 

Prettier

介绍：代码格式化工具

1、安装

npm install --save-dev --save-exact prettier

2、创建配置文件

echo {}> .prettierrc.json

3、创建名为 .prettierignore的配置文件，用来设置格式化的时候被忽略的文件

4、常用命令

npx prettier --write .                  //格式化当前目录下全部文件
npx prettier --write app/                  //格式化指定目录的文件
npx prettier --write 文件名                //格式化指定单个文件
npx prettier --write "app/**/*.test.js"   //格式化指定目录下的指定后缀名文件

prettier --check .     //只检查被格式化的文件，不执行格式化操作

5、关于Prettier中的配置文件

Prettier中的文件名有多种形式其中.prettierrc.json形式的配置文件不能通过vs-code中的prettier插件实现保存时自动格式化功能，但是可以使用命令格式化文件

vs-code中的插件:

Prettier-Code formatter:保存时自动格式化文件

 

相关插件：

 eslint-config-prettier：关闭非必须的规则以及可能和prettier冲突的规则。注意这里说的避免冲突是导入配置中的冲突，如果通过修改ESLint配置文件中的rules的规则出现的冲突则以ESLint为最高优先级