eslint 与 vscode

安装：

产生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