昨天有提到，我第一天上班看到 Visual Studio 的時候，居然很自然地說了一句：
這個有紫色的喔！
因為我以前學 React 的時候，幾乎都在用 VS Code。
所以當下看到名字這麼像的 Visual Studio，我真的以為它只是換了一個顏色，功能應該也差不多吧？
結果用了幾天之後才發現：
不，它們真的不是同一個東西，買尬 ><！！！
在培訓班學前端的時候，我主要使用的是 VS Code。
平常大概就是：
畫面相對乾乾淨淨，需要什麼功能，再自己安裝擴充套件。
例如：
所以我以前對開發工具的理解大概是：
先打開資料夾，然後開始寫程式。
至於還需要什麼功能，就再慢慢裝。
第一次打開 Visual Studio，先不說程式碼，我光看畫面就開始慌。
左邊有方案總管，下面有輸出、錯誤清單，還有一堆我完全不知道要幹嘛的視窗。
當下只覺得：
我只是要改一個畫面，有需要搞得這麼隆重嗎？
而且以前在 VS Code 裡，我通常是打開一個資料夾。
到了 Visual Studio，前輩卻叫我打開 .sln。
蛤？
連「打開專案」的方式都跟我以前不一樣。
當時我當然又跑去問 AI：
Visual Studio 和 VS Code 差在哪裡？
但第一次得到的回答超正式。
什麼：
每個字分開看都看得懂，合在一起還是不知道到底差在哪裡。
所以我又繼續問：
可以用前端新手聽得懂的方式說嗎？
AI 才換成比較好理解的說法：
VS Code 比較像一個輕量、可以自由組裝的工具箱。
Visual Studio 比較像整間工具室都直接搬到你面前。
XD
不過我也沒有只停在這個比喻。
因為比喻雖然比較好懂，但我還是想知道：
在實際操作上，到底差在哪裡？
VS Code 比較像程式碼編輯器。
它本身相對輕量，需要什麼功能，可以透過擴充套件慢慢加上去。
Visual Studio 則比較像是把開發 C# 專案會需要的很多工具，都整合在同一個環境裡。
例如：
以前在 VS Code 裡，我常常需要自己開啟 Terminal，再輸入指令啟動 React 專案：
npm run dev
但在 Visual Studio 裡，目前最常看到的啟動方式，是直接按上方的綠色播放鍵。
雖然兩邊都是把專案跑起來，但背後使用的工具和流程不太一樣。
菜鳥版對照如下：
| VS Code | Visual Studio |
|---|---|
| 通常從專案資料夾開始 | 常從 .sln 或 Project 開始 |
| 需要的功能可以自己安裝擴充套件 | 許多 C# 開發工具已整合在裡面 |
| 常使用 Terminal 輸入指令 | 可以直接透過介面執行、建置和除錯 |
| 我以前主要拿來寫 React | 我目前主要拿來開 C# MVC 專案 |
不過這不代表：
React 只能用 VS Code，C# 只能用 Visual Studio。
而是以我目前的學習與工作環境來說：
以前的 React 專案主要使用 VS Code。
現在公司的 C# MVC 專案主要使用 Visual Studio。
我沒有只停在 AI 說的「它們定位不同」。
我實際打開兩種專案，比較它們啟動專案的方式。
以前在 VS Code 裡：
打開專案資料夾
↓
開啟 Terminal
↓
輸入 npm run dev
↓
瀏覽器顯示 React 畫面
現在在 Visual Studio 裡：
打開 .sln
↓
從方案總管查看 Project
↓
按綠色播放鍵
↓
Visual Studio 建置並啟動網站
實際操作後，我才比較有感覺：
它們不只是圖示顏色不同，連專案管理和執行方式都不太一樣。
也就是說，AI 先幫我把抽象名詞翻譯成比較好理解的比喻。
但真正讓我理解差異的，還是回到兩種環境裡實際操作。
老實說，我現在也還沒有把 Visual Studio 裡面的功能全部摸熟。
但目前至少知道：
其他按鈕先不要亂按！
真的需要的時候，再一個一個問、一個一個查。
下一篇就來多認識一點：
Visual Studio 的基本版面，到底哪些地方是我現在真的會用到的？
iThome鐵人賽
看影片追技術