VScode & WebStorm 配置自动保存并格式化Vue代码

1. VScode配置

1. 安装eslint和vetur插件

   

   image

2. command + ，打开配置项，点击编辑器右上角的{}符号

   

   image

3. 追加下列代码

   

   image

   "eslint.autoFixOnSave": true,  //  启用保存时自动修复,默认只支持.js文件
       "eslint.validate": [
       "javascript",  //  用eslint的规则检测js文件
       {
           "language": "vue",   // 检测vue文件
           "autoFix": true   //  为vue文件开启保存自动修复的功能
       }
   ],
   

4. 打开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",
   }
   

5. 删除node_modules,重新下载：npm i

6. ok！

2. WebStorem配置

1. 同上述4，5两步，加入依赖，并下载

2. command + ,打开配置项

   1. Languages & Frameworks
   2. 选中Javascript
   3. 选中Code Quality Tools
   4. 选中 Eslint
   5. 右侧界面，勾选Enable，启动eslint检测
   6. 选择Eslint Packages包为本地包（此处可以设置为全局，但是担忧全局的包版本和本地包版本不同，带来一系列问题，这个可以后期迭代，确认设置全局是否没问题）

image

3. 打开vue，js文件，右键点击Fix ESlint Problems，则代码正常格式化

image

4. 每次需要右键格式化，太麻烦，我们需要自定义一个 webstorm的宏任务，通过ctrl + s自动格式化

   核心原理：录制一段操作，并设定快捷键，之后通过快捷键将此次所有操作执行一遍。

   1. 打开一个.js/.html/.vue文件
   2. 选中webstorm导航Edit选项
   3. 选中Macros选项
   4. 选中Start Macros Recording（关键步骤，主要是录制）

image

之后所有的操作，都是被WebStorm记录

image

接下里的操作很关键，请注意：

1. 在内容区域点击右键，找到 Fix ESlint Problems，并点击

2. 在ctrl + s保存代码

3. 最后点击上图的停止按钮，并保存自定义名字（此处我设置名称为save & format）

image

5. command + ,打开webstorm配置项
   1. 选中左侧栏目的 Keymap选项
   2. 在后侧内容区域，输入 save或者format关键字
   3. 选中刚才保存的名字，右击或者双击，选中 Add Keyboard Shortcut

image

​ 4. 按下ctrl + s，提示冲突覆盖的词语（不展示图了），覆盖即可

image

​ 5. OK，找一个vue/js文件测试即可