webstom的eslint中的fix eslint problems 如何对.vue文件生效

如果你的项目中做了eslint的配置，鼠标右键点击js文件时，会多一个Fix Eslint Problems的选项，如下图所示；该选项可以根据eslint规则自动修复js文件中出现的常见错误。该选项本质上就是执行了eslint --fix filename.js。

可能是我的webstorm的版本过低，配置了eslint后，右键.vue文件却不会出现Fix Eslint Problems选项，如果我们希望自动修复.vue文件中的js代码，只能在命令行里操作，并且需要为eslint命令指定文件所在目录以及文件名，或者cd到文件所在目录执行，如eslint --fix 'src/pages/home.vue'；每次要修复时，都要这样写，显然不能接受。 

配置Webstorm的Tools，打开settings -> Tools -> External Tools，点击添加按钮，做下图的配置

1. ProjectFileDir 指工程所在目录。
2. FilePathRelativeToProjectRoot 指文件相对于工程所在的路径。
3. 如果你全局安装了eslint，也可以将执行程序指定为全局安装目录下的eslint.cmd，需要注意的是，此时，eslint依赖的库也需要全局安装。

 

配置完成后，右键点击.vue文件就会出现 External Tools -> eslint fix的选项，点击该选项，就完成了.vue文件的自动修复操作。