用Webstorm快捷执行命令行命令

现在的前端开发过程中，难免需要在命令行中敲一些简单的命令；最常见的如npm run dev、npm run build、npm run test等，这些命令还算简单，每天敲十来次也勉强可以接受；但是某些复杂一点的命令，或者命令的参数每次敲的时候都是不定的，这就非常麻烦了。下面以eslint自动修复.vue文件中的错误为例，通过配置Webstorm来自动执行修复操作。

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

• 配置了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文件的自动修复操作。

• 通过配置Webstorm的External Tools，几乎所有命令都不需要自己手动敲了，只要点击两下鼠标。
  我们知道，如果你的项目是用git管理的，Webstorm会将git的一些常见操作集成到备选项中，如下图所示；可以猜测，其原理也和External Tools类似，因此我们完全可以通过类似的方式配置自定义的git命令。