1. VScode配置
-
安装
eslint和vetur插件image -
command + ，打开配置项，点击编辑器右上角的{}符号image -
追加下列代码
image"eslint.autoFixOnSave": true, // 启用保存时自动修复,默认只支持.js文件 "eslint.validate": [ "javascript", // 用eslint的规则检测js文件 { "language": "vue", // 检测vue文件 "autoFix": true // 为vue文件开启保存自动修复的功能 } ], -
打开package.json文件，新增代码
devDependencies: { "babel-eslint": "^10.0.1", "eslint": "^5.8.0", "eslint-plugin-vue": "^5.0.0", "@vue/eslint-config-standard": "^4.0.0", } 删除node_modules,重新下载：
npm iok！
2. WebStorem配置
同上述4，5两步，加入依赖，并下载
-
command + ,打开配置项- Languages & Frameworks
- 选中Javascript
- 选中Code Quality Tools
- 选中 Eslint
- 右侧界面，勾选Enable，启动eslint检测
- 选择Eslint Packages包为本地包（此处可以设置为全局，但是担忧全局的包版本和本地包版本不同，带来一系列问题，这个可以后期迭代，确认设置全局是否没问题）
image
- 打开vue，js文件，右键点击
Fix ESlint Problems，则代码正常格式化
image
-
每次需要右键格式化，太麻烦，我们需要自定义一个 webstorm的宏任务，通过
ctrl + s自动格式化核心原理：录制一段操作，并设定快捷键，之后通过快捷键将此次所有操作执行一遍。
- 打开一个.js/.html/.vue文件
- 选中webstorm导航Edit选项
- 选中Macros选项
- 选中Start Macros Recording（关键步骤，主要是录制）
image
之后所有的操作，都是被WebStorm记录
image
接下里的操作很关键，请注意：
在内容区域点击右键，找到
Fix ESlint Problems，并点击在
ctrl + s保存代码最后点击上图的
停止按钮，并保存自定义名字（此处我设置名称为save & format）
image
-
command + ,打开webstorm配置项- 选中左侧栏目的
Keymap选项 - 在后侧内容区域，输入 save或者format关键字
- 选中刚才保存的名字，右击或者双击，选中
Add Keyboard Shortcut
- 选中左侧栏目的
image
4. 按下ctrl + s，提示冲突覆盖的词语（不展示图了），覆盖即可
image
5. OK，找一个vue/js文件测试即可
