ESLint
它的目标是提供一个插件化的javascript代码检测工具。
最近一个项目里，最开始使用cli3.0搭建的时候没有默认选用eslint，导致现在有的人使用其他编辑器，就会出现格式错乱的情况。所以引入eslint做代码检测
第一步 （安装）
npm install eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue --save-dev复制代码
引入关于eslint的一些依赖 当你的package.json里出现
"eslint": "^5.16.0","eslint-config-airbnb-base": "^13.1.0","eslint-plugin-import": "^2.17.3","eslint-plugin-vue": "^5.2.2",复制代码
说明安装成功
第二步（检测）
在package.json文件的命令行sctipts里面添加
"lint": "eslint --ext .js,.vue src"复制代码
批量检测代码
Example： 运行
npm run lint 面板会提示有xx个错误，而且会标明哪个文件。
而且会提示你是用--fix进行修复 第三部（修复）
上面的"lint": "eslint --ext .js,.vue src"修改为eslint --ext .js,.vue src --fix
运行
npm run lint errors和 warning了 至此eslint已经引入,并且可以自动修复。但是--fix并不能完全修复代码，比如
配合vscode使用
目的： 使用vscode到达保存就自动fix的效果。
1.安装
2.安装eslint
3.设置eslint
打开 文件-》首选项-》设置，找到并打开setting.json添加如下配置
{ "eslint.enable": true, // 是否开启检测 "editor.tabSize": 2, "eslint.autoFixOnSave": true, "files.associations": { "*.vue": "vue" }, "eslint.options": { "extensions": [ ".js", ".vue" ] }, "eslint.validate": [ "javascript",{ "language": "vue", "autoFix": true }, "html", "vue" ],}复制代码 4.安装Vetur插件
Vetur 能够在vs code编辑器里面识别.vue文件并且对文件可以：
- 语法高亮
- 语法提示,补全功能
- 语法检测
5.配置完成
这个时候就会有提示
按ctrl+s就自动修复了
tips： 有时按一次 ctrl+s修复不了，多按几次就好了，不过我一般写一段就ctrl+s一下，问题不大。