安装:
产生package.json文件:npm init -y
安装eslint: npm install eslint --save-dev
初始化eslint配置文件: node_modules/.bin/eslint --init
代码校验:
方式一:使用命令行
在package.json文件中添加运行脚本命令:
script: {
"lint": "eslint src"
}
运行命令:npm run lint
方式二:使用vs code提供的插件,自动进行校验,在商店搜索eslint插件即可,有错误自动爆红
方式三:提交时进行校验
使用插件:pre-commit 或者 husky,可以配置规则,在代码提交前进行校验
初始化git:git init .
安装提交校验:npm install --save-dev pre-commit
在package.json中
script: {
"lint": "eslint src"
},
"pre-commit":["lint"] //代码提交时自动进行eslint的校验
代码格式化:在保存时代码修复,使用插件prettier
在项目中安装:npm install prettier --save-dev
在VScode商店中安装插件:prettier
新建prettier配置文件:.prettierrc json格式的代码规则
{
"singleQuote":true, //保存时变为单引号
"printWidth": 40 //超过40个字符进行换行
}
有冲突时:当eslint代码校验与prettier代码修复出现冲突时
(eg:prettier使用双引号,eslint推荐的校验格式使用单引号,会出现红线提示)
解决:使用eslint插件:npm install --save-dev eslint-plugin-prettier eslint-config-prettier
在.eslintrc.json文件中,expands选项添加插件:["plugin:prettier/recommended"]
在vue项目中使用eslint插件:
方式一:通过vue-cli构建
方式二:npm install -D eslint eslint-plugin-vue@next //有@next,会使用于v3.0,没有则是适用于vue2.0