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

猜你喜欢

转载自blog.csdn.net/amy1019/article/details/112504350