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