vscode给 vue 项目 添加 eslint 验证提示遇到的细节问题

Posted 2020-12-10 blogs-xlf

这里记录一下 ，vscode给 vue 项目 添加 eslint 验证提示遇到的细节问题 。

如何在保存的时候自动格式化

在新版本中，开启保存格式化的配置改了。现在可以在setting.json文件中，添加下面的配置:

"editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
},

但是这无法格式化vue文件中的template和style，这个可以用vetur来格式化，只是要注意 去掉对js的格式化，否则会覆盖eslint的格式化。配置如下：

"vetur.format.defaultFormatter.js": "none",

.eslintrc.js 在目录的位置引发的问题

如果你跟笔者一样，.eslintrc.js是放在子目录 而不是 根目录的话，会出现无法运行eslint验证的问题，点击vscode右下角的ESLint打开OUTPUT窗口，会发现报Cannot find module ‘eslint-plugin-vue‘的错误，即使你在全局安装该插件也无法解决问题。经过google查找，找到了解决方法，在setting.json文件中添加下面配置即可：

"eslint.workingDirectories": [
      "./这里填写你的子目录名称"
],