Visual Studio 無法使用 Yarn 安裝套件

最近新專案開發，不像以前有專責的前端工程師協助前端頁面處理，一切都要自己來，所以就出現需要在 Visual Studio 安裝前端套件的現象，今天遇到的問題是透過 Visual Studio 2015 使用 yarn 要安裝 vue.js 套件無法正確執行，就來看看該如何解決吧

操作步驟

1. 專案按右鍵 –> Quick Install Package…

   

2. 選擇 Yarn –> 輸入套件名稱

   

錯誤訊息

• 訊息內容

  Installing pure-vue-select package from Yarn...
  'yarn' is not recognized as an internal or external command,operable program or batch file.
  

• 錯誤截圖

  

問題確認

1. 開啟 Package Manager Console

   

2. 確認 Yarn 指令是否可以正確使用

   • 執行 yarn --version

   • 出現錯誤訊息

     • 訊息內容

       The term 'yarn' is not recognized as the name of a cmdlet, function, script file, or operable  program. Check the spelling of the name, or if a path was included, verify that the path is correct  and try again.At line:1 char:1
       yarn --version
               
       + yarn --version
       + ~~~~
       + CategoryInfo          : ObjectNotFound: (yarn:String) [], CommandNotFoundException
       + FullyQualifiedErrorId : CommandNotFoundException
       

     • 錯誤截圖

       

3. 開啟 command prompt 執行 yarn --version

   

解決方式

看到上述錯誤後可以確認問題是 Visual Studio 找不到 yarn.cmd 檔案位置造成的，但在 command prompt 中指令又可以正確執行，這是因為 command prompt 使用的環境變數包含 System Variables 與 User Variables 的 Path 的內容，而 Visual Studio 則是使用環境變數中 System Variables 的 Path 內容

1. 將 Yarn.cmd 所在資料夾加入環境變數中 System Variables 的 Path

   使用 PowerShell 執行加入指令

   • 格式 > {username} 請換成正確使用者名稱

     $AddedLocation =";C:\Users\{username}\AppData\Roaming\npm"
     $Reg = "Registry::HKLM\System\CurrentControlSet\Control\Session Manager\Environment"
     $OldPath = (Get-ItemProperty -Path "$Reg" -Name PATH).Path
     $NewPath= $OldPath + $AddedLocation
     Set-ItemProperty -Path "$Reg" -Name PATH –Value $NewPath
     

   • 實例

     $AddedLocation =";C:\Users\yowko.tsai\AppData\Roaming\npm"
     $Reg = "Registry::HKLM\System\CurrentControlSet\Control\Session Manager\Environment"
     $OldPath = (Get-ItemProperty -Path "$Reg" -Name PATH).Path
     $NewPath= $OldPath + $AddedLocation
     Set-ItemProperty -Path "$Reg" -Name PATH –Value $NewPath
     

2. 重啟 Visual Studio

   重啟 Visual Studio 才能吃到新的環境變數設定

3. 正常使用

   

   

心得

問題解決方式很普遍，發生原因也很容易猜想的到，主要是想紀錄一下一般 command prompt 使用環境變數與 Visual Studio 使用環境變數的不同，另外就是使用 PowerShell 修改環境變數的語法

參考資訊

1. PowerShell’s Path Environmental Variable