用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命令。