前言

Visual Studio Code 是一個(gè)輕量級(jí)功能強(qiáng)大的源代碼編輯器，支持語(yǔ)法高亮、代碼自動(dòng)補(bǔ)全（又稱 IntelliSense）、代碼重構(gòu)、查看定義功能，并且內(nèi)置了命令行工具和 Git 版本控制系統(tǒng)。適用于 Windows、macOS 和 Linux。它內(nèi)置了對(duì) JavaScript、TypeScript 和 Node.js 的支持，并為其他語(yǔ)言和運(yùn)行時(shí)（如 C++、C#、Java、Python、PHP、Go、.NET）提供了豐富的擴(kuò)展生態(tài)系統(tǒng)。為了不影響讀者的沉浸式閱讀學(xué)習(xí)，如需使用目錄請(qǐng)?jiān)谧髠?cè)使用即可。

VSCode的下載

通過前言我們已經(jīng)大致了解到了VSCode的強(qiáng)大之處，現(xiàn)在開始步入正題。

進(jìn)入VSCode官方的下載頁(yè)，根據(jù)系統(tǒng)需求選擇相對(duì)應(yīng)的下載地址。

官方下載頁(yè)面--->：VSCode官方下載頁(yè)面鏈接，選擇自己系統(tǒng)對(duì)應(yīng)的下載鏈接。

 對(duì)于Windows下載標(biāo)綠文本的解釋

文本文本解釋

User Installer

默認(rèn)安裝在當(dāng)前計(jì)算機(jī)帳戶目錄，如果使用另一個(gè)帳號(hào)登陸計(jì)算機(jī)將無法使用別人安裝的vscode。vscode默認(rèn)提供的為User InstallerSystem Installer安裝在非用戶目錄,例如C盤根目錄,任何帳戶都可以使用。

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

VSCode的安裝

此處我選擇了System Installer版本，原因無它，因?yàn)樗梢宰远x安裝路徑，使其我們后期對(duì)于它的管理十分方便，我也十分建議你選擇此版本安裝。

同意協(xié)議

選擇同意協(xié)議，點(diǎn)擊下一步

選擇安裝位置

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

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

選擇開始菜單文件夾

如需修改，請(qǐng)點(diǎn)擊瀏覽進(jìn)行設(shè)置，無需修改直接單擊下一步即可

選擇附加任務(wù)

按需選擇自己需要的附加任務(wù)，這里我推薦將其他中的所有選項(xiàng)都勾選上，對(duì)于創(chuàng)建桌面方式則按需選擇是否勾選，我這里因?yàn)椴恍枰跃筒还催x了。

設(shè)置完畢最后單擊下一步

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

準(zhǔn)備安裝

確認(rèn)自己前面設(shè)置的是否有誤，無誤則點(diǎn)擊安裝即可

安裝完成

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

VSCode基礎(chǔ)配置

VSCode界面簡(jiǎn)介

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

 關(guān)于對(duì)上圖界面的區(qū)域解釋：

VSCode設(shè)置中文界面

因?yàn)槲覀兇藭r(shí)安裝的VSCode還是英文界面，對(duì)于英語(yǔ)不是那么好的小伙伴不是十分友好，所以我們此時(shí)需要安裝一個(gè)插件來對(duì)VSCode進(jìn)行中文化處理。

經(jīng)過如上對(duì)VSCode界面基本的了解，我們?cè)?strong>活動(dòng)欄區(qū)域找到插件安裝這個(gè)選項(xiàng)，單擊它，在搜索框中搜索Chinese 選擇第一個(gè)即可，選擇Install進(jìn)行安裝。

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

 VSCode個(gè)性化設(shè)置

我們找到設(shè)置，選擇顏色主題

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

其余文件圖標(biāo)主題和產(chǎn)品圖標(biāo)主題的個(gè)性化設(shè)置同理。

VSCode常用設(shè)置

打開活動(dòng)欄的VSCode設(shè)置，我們?cè)?strong>常用設(shè)置，設(shè)置字體大小，字體，是否自動(dòng)保存等常用的設(shè)置項(xiàng)目，此處按需選擇設(shè)置即可。

 對(duì)于其他的設(shè)置也是同理，按需選擇設(shè)置。

對(duì)于常用設(shè)置這一項(xiàng)，我的個(gè)人建議是將Files：AutoSave選項(xiàng)的off更改為onFocusChange選項(xiàng)（當(dāng)編輯器失去焦點(diǎn)時(shí)，會(huì)自動(dòng)保存具有更改的編輯器）

VSCode常用快捷鍵

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

常規(guī)快捷鍵

基本編輯快捷鍵

導(dǎo)航

插件推薦

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

Material Icon Theme:

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

Material Theme:

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

彩虹括號(hào)插件最新版VSCode已內(nèi)置，無需安裝，如需其他請(qǐng)使用Rainbow Brackets：

 vscode的彩虹括號(hào)擴(kuò)展。

Highlight Matching Tag：

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

Git相關(guān)插件

GitHub Pull Requests and Issues：

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

Git History：

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

GitLens — Git supercharged：

通過Git Under注解和CodeLens使你可以直截了當(dāng)?shù)娘@示代碼作者，無縫導(dǎo)航和探索Git存儲(chǔ)庫(kù)，通過豐富的可視化和強(qiáng)大的比較命令獲得有價(jià)值的見解等

Git Graph：

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

Markdown語(yǔ)法插件

 Markdown All in One ：

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

Markdown Preview Enhanced：

 Markdown預(yù)覽增強(qiáng)，自動(dòng)滾動(dòng)同步、數(shù)學(xué)排版、PlantUML、pandoc、PDF 導(dǎo)出、代碼塊、演示文稿編寫器等。

Markdown Preview Enhanced常用快捷鍵：

學(xué)習(xí)\摸魚

LeetCode:

解決 VS Code 中的 LeetCode 問題

daily anime:

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

小霸王：

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

超越鼓勵(lì)師：

 夢(mèng)里的超越將在你枯燥乏味的編輯器中鼓勵(lì)你。

前端插件

Better Comments：

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

 ESLint:

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

 vetur：

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

Vue VScode Snippets：

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

JavaScript (ES6) code snippets

ES6語(yǔ)法中的JavaScript代碼片段

ES7+ React/Redux/React-Native snippets：

 擴(kuò)展React, React- native和Redux在JS/TS與ES7+語(yǔ)法

Image preview：

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

Auto Rename Tag：

 自動(dòng)重命名成對(duì)的HTML/XML標(biāo)記，與Visual Studio IDE相同。

HTML CSS Support：

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

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

如果您認(rèn)真閱讀至此，您現(xiàn)在已經(jīng)掌握了VSCode的安裝與配置，且隨著您認(rèn)真練習(xí)使用次數(shù)的增加，您對(duì)此軟件的掌握我相信不止于此，如果您對(duì)此軟件或其他有進(jìn)階的要求。

總結(jié)

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

最新評(píng)論