前言

Visual Studio Code 是一個輕量級功能強大的源代碼編輯器，支持語法高亮、代碼自動補全（又稱 IntelliSense）、代碼重構、查看定義功能，并且內置了命令行工具和 Git 版本控制系統。適用于 Windows、macOS 和 Linux。它內置了對 JavaScript、TypeScript 和 Node.js 的支持，并為其他語言和運行時（如 C++、C#、Java、Python、PHP、Go、.NET）提供了豐富的擴展生態(tài)系統。為了不影響讀者的沉浸式閱讀學習，如需使用目錄請在左側使用即可。

VSCode的下載

通過前言我們已經大致了解到了VSCode的強大之處，現在開始步入正題。

進入VSCode官方的下載頁，根據系統需求選擇相對應的下載地址。

官方下載頁面--->：VSCode官方下載頁面鏈接，選擇自己系統對應的下載鏈接。

 對于Windows下載標綠文本的解釋

文本文本解釋

User Installer

默認安裝在當前計算機帳戶目錄，如果使用另一個帳號登陸計算機將無法使用別人安裝的vscode。vscode默認提供的為User InstallerSystem Installer安裝在非用戶目錄,例如C盤根目錄,任何帳戶都可以使用。

關于具體下載哪個版本我進行了大量的調研，發(fā)現網絡上大部分的教程都是選擇的VSCode默認提供的User Installer版本。但是對于我們實際和真正的開發(fā)，以及我們對于系統文件的管理難易度上來講我更推薦System Installer版本，它可以自定義安裝路徑，使其我們后期對于它的管理十分方便。

VSCode的安裝

此處我選擇了System Installer版本，原因無它，因為它可以自定義安裝路徑，使其我們后期對于它的管理十分方便，我也十分建議你選擇此版本安裝。

同意協議

選擇同意協議，點擊下一步

選擇安裝位置

選擇安裝位置，單擊瀏覽按需選擇自己要設置的安裝路徑位置。然后點擊下一步即可

注意：為了后期的穩(wěn)定性，切勿使用中文路徑。

選擇開始菜單文件夾

如需修改，請點擊瀏覽進行設置，無需修改直接單擊下一步即可

選擇附加任務

按需選擇自己需要的附加任務，這里我推薦將其他中的所有選項都勾選上，對于創(chuàng)建桌面方式則按需選擇是否勾選，我這里因為不需要所以就不勾選了。

設置完畢最后單擊下一步

注意：添加到PATH一定要勾選，很重要。

準備安裝

確認自己前面設置的是否有誤，無誤則點擊安裝即可

安裝完成

如果你看到如下界面，那么恭喜你，你的VSCode安裝完成。

VSCode基礎配置

VSCode界面簡介

VS Code 采用通用的用戶界面和左側的資源管理器布局，顯示您可以訪問的所有文件和文件夾，右側的編輯器顯示您打開的文件的內容。

 關于對上圖界面的區(qū)域解釋：

VSCode設置中文界面

因為我們此時安裝的VSCode還是英文界面，對于英語不是那么好的小伙伴不是十分友好，所以我們此時需要安裝一個插件來對VSCode進行中文化處理。

經過如上對VSCode界面基本的了解，我們在活動欄區(qū)域找到插件安裝這個選項，單擊它，在搜索框中搜索Chinese 選擇第一個即可，選擇Install進行安裝。

 安裝完畢，右下角會彈出如下提示框，單擊Restart重啟VSCode即可完成。

 VSCode個性化設置

我們找到設置，選擇顏色主題

會彈出如下框選，此時我們根據自己的喜好選擇即可，如果你覺得沒有，還可以選擇瀏覽其他顏色主題進行預覽選擇。

其余文件圖標主題和產品圖標主題的個性化設置同理。

VSCode常用設置

打開活動欄的VSCode設置，我們在常用設置，設置字體大小，字體，是否自動保存等常用的設置項目，此處按需選擇設置即可。

 對于其他的設置也是同理，按需選擇設置。

對于常用設置這一項，我的個人建議是將Files：AutoSave選項的off更改為onFocusChange選項（當編輯器失去焦點時，會自動保存具有更改的編輯器）

VSCode常用快捷鍵

為了大家更為方便的使用快捷鍵，我再次列了一個表格進行規(guī)整化說明。

常規(guī)快捷鍵

基本編輯快捷鍵

導航

插件推薦

主題/外觀美化區(qū)

Material Icon Theme:

它采用了 Google Material Design 風格，文件圖標以及文件夾圖標覆蓋非常的全面，而且在暗黑模式下使用效果更佳。

Material Theme:

可以說是與Material Icon Theme師從一脈了

彩虹括號插件最新版VSCode已內置，無需安裝，如需其他請使用Rainbow Brackets：

 vscode的彩虹括號擴展。

Highlight Matching Tag：

這個擴展突出顯示匹配的開始和/或結束標記。它還可以在狀態(tài)欄中顯示標簽的路徑。即使VSCode有一些基本的標簽匹配，它也只是——基本的。這個擴展將嘗試匹配標簽的任何地方:從標簽屬性，字符串內部，任何文件，同時也提供了廣泛的樣式選項，自定義標簽如何突出顯示。

Git相關插件

GitHub Pull Requests and Issues：

允許您在 Visual Studio Code 中檢查和管理 GitHub 拉取請求和問題。

Git History：

查看Git日志，提交文件歷史，比較分支或提交 

GitLens — Git supercharged：

通過Git Under注解和CodeLens使你可以直截了當的顯示代碼作者，無縫導航和探索Git存儲庫，通過豐富的可視化和強大的比較命令獲得有價值的見解等

Git Graph：

 查看存儲庫的Git Graph，并從該圖輕松執(zhí)行Git操作

Markdown語法插件

 Markdown All in One ：

 Markdown All in One 是 VSCode 熱門的 Markdown 插件，可以在左邊書寫，右邊即時預覽。下圖替大家展示了常用的快捷鍵，以供查閱。

Markdown Preview Enhanced：

 Markdown預覽增強，自動滾動同步、數學排版、PlantUML、pandoc、PDF 導出、代碼塊、演示文稿編寫器等。

Markdown Preview Enhanced常用快捷鍵：

學習\摸魚

LeetCode:

解決 VS Code 中的 LeetCode 問題

daily anime:

VSCode追番摸魚看劇必備，以下展示使用命令行使用此插件方法

小霸王：

上班玩游戲必備！摸魚之王必備！

超越鼓勵師：

 夢里的超越將在你枯燥乏味的編輯器中鼓勵你。

前端插件

Better Comments：

幫助在代碼中創(chuàng)建更人性化的注釋，有了這個擴展，你就可以把你的注釋分類為:警報、查詢、待辦事項、突出。注釋掉的代碼也可以設置樣式，以明確代碼不應該出現在那里，你想要的任何其他評論樣式都可以在設置中指定，不同注釋可以顯示不同的效果。

 ESLint:

 集成ESLint JavaScript到VS Code，一個適用于前端的規(guī)范提示插件。

 vetur：

 此插件可謂是前端必備，vetur 的特性: 語法高亮, 代碼片段 (emmet 給我的感覺是一個寫好了的 snippet), 質量提示 & 錯誤、格式化 / 風格、智能提示等。

Vue VScode Snippets：

構建代碼片段的縮寫節(jié)約開發(fā)時間

JavaScript (ES6) code snippets

ES6語法中的JavaScript代碼片段

ES7+ React/Redux/React-Native snippets：

 擴展React, React- native和Redux在JS/TS與ES7+語法

Image preview：

顯示圖像預覽在槽和懸停，圖片是否正確引入的顯示工具，在鏈接處按ctrl，鼠標懸浮即可使用，確定是否正確找到路徑下的圖片。

Auto Rename Tag：

 自動重命名成對的HTML/XML標記，與Visual Studio IDE相同。

HTML CSS Support：

HTML的CSS智能感知，支持鏈接和嵌入式樣式表、支持模板繼承、支持其他樣式表、支持其他HTML之類的語言、根據需要驗證CSS選擇器。

使用方法：通過Ctrl + space查看id和class屬性建議列表。

如果您認真閱讀至此，您現在已經掌握了VSCode的安裝與配置，且隨著您認真練習使用次數的增加，您對此軟件的掌握我相信不止于此，如果您對此軟件或其他有進階的要求。

總結

到此這篇關于VSCode安裝配置使用的文章就介紹到這了,更多相關VSCode安裝配置使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論