eslint规范在项目中的实现——vue项目举例

先附上参考链接：

https://juejin.cn/post/7068573328914513928

https://juejin.cn/post/7005922617739706405#comment

1、创建vue项目

vue create test，取消选中cli中自带的linter/formatter，等安装完成之后手动安装，然后下一步下一步完成项目创建。

 2、cd到项目目录，npm run serve，成功启动项目

 3、安装eslint相关包

npm install @babel/eslint-parser eslint  eslint-loader eslint-plugin-vue  --save-dev   4、在当前根目录下，也就是和src文件同级目录下，新建一个文件.eslintrc.js文件，此文件为eslint的配置文件，比如你们公司你们团队有什么开发规则，可以在这个文件中进行自定义配置。一些规则翻译请看https://cloud.tencent.com/developer/section/1135580。 配置文件可以参考上述两个链接的配置。 但是上边的教程中，.eslintrc.js中parserOptions的配置需要注意一下，parserOptions的parser属性值要改成 '@babel/eslint-parser'。原因是babel-eslint不能解析es6，会在运行的时候报错。感兴趣的朋友可以试一下。解决办法参考https://www.cjavapy.com/article/2382/。 此外，我的配置里边没有配置perttier，感兴趣的朋友可按照上边链接教程完成配置。 5、在根目录，也就是src同级目录新建.eslintignore文件

build/*.js
src/assets
public
dist

6、完成这些配置以后，在package.json中配置脚本，"lint": "eslint --ext .js,.vue src"，在终端输入命令, npm run lint，开始进行检查，结果会在控制台输出。"fix": "eslint --ext --fix .js,.vue src"能自动修复出现的问题。实测不能全部修复。