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为最高优先级