前言
Visual Studio Code 是一個(gè)輕量級功能強(qiáng)大的源代碼編輯器，支持語法高亮、代碼自動(dòng)補(bǔ)全（又稱 IntelliSense）、代碼重構(gòu)、查看定義功能，并且內(nèi)置了命令行工具和 Git 版本控制系統(tǒng)。適用于 Windows、macOS 和 Linux。它內(nèi)置了對 JavaScript、TypeScript 和 Node.js 的支持，并為其他語言和運(yùn)行時(shí)（如 C++、C#、Java、Python、PHP、Go、.NET）提供了豐富的擴(kuò)展生態(tài)系統(tǒng)。為了不影響讀者的沉浸式閱讀學(xué)習(xí)，如需使用目錄請?jiān)谧髠?cè)使用即可。
VSCode的下載
通過前言我們已經(jīng)大致了解到了VSCode的強(qiáng)大之處，現(xiàn)在開始步入正題。
進(jìn)入VSCode官方的下載頁，根據(jù)系統(tǒng)需求選擇相對應(yīng)的下載地址。
官方下載頁面--->：VSCode官方下載頁面鏈接，選擇自己系統(tǒng)對應(yīng)的下載鏈接。
?對于Windows下載標(biāo)綠文本的解釋
| 文本 | 文本解釋 |
|---|---|
| User Installer |
默認(rèn)安裝在當(dāng)前計(jì)算機(jī)帳戶目錄，如果使用另一個(gè)帳號登陸計(jì)算機(jī)將無法使用別人安裝的vscode。vscode默認(rèn)提供的為User Installer |
| System Installer | 安裝在非用戶目錄,例如C盤根目錄,任何帳戶都可以使用。 |
關(guān)于具體下載哪個(gè)版本我進(jìn)行了大量的調(diào)研，發(fā)現(xiàn)網(wǎng)絡(luò)上大部分的教程都是選擇的VSCode默認(rèn)提供的User Installer版本。但是對于我們實(shí)際和真正的開發(fā)，以及我們對于系統(tǒng)文件的管理難易度上來講我更推薦System Installer版本，它可以自定義安裝路徑，使其我們后期對于它的管理十分方便。
VSCode的安裝
此處我選擇了System Installer版本，原因無它，因?yàn)樗梢宰远x安裝路徑，使其我們后期對于它的管理十分方便，我也十分建議你選擇此版本安裝。
同意協(xié)議
選擇同意協(xié)議，點(diǎn)擊下一步
?選擇安裝位置
選擇安裝位置，單擊瀏覽按需選擇自己要設(shè)置的安裝路徑位置。然后點(diǎn)擊下一步即可
注意：為了后期的穩(wěn)定性，切勿使用中文路徑。
?選擇開始菜單文件夾
如需修改，請點(diǎn)擊瀏覽進(jìn)行設(shè)置，無需修改直接單擊下一步即可
?選擇附加任務(wù)
按需選擇自己需要的附加任務(wù)，這里我推薦將其他中的所有選項(xiàng)都勾選上，對于創(chuàng)建桌面方式則按需選擇是否勾選，我這里因?yàn)椴恍枰跃筒还催x了。
設(shè)置完畢最后單擊下一步
注意：添加到PATH一定要勾選，很重要。
?準(zhǔn)備安裝
確認(rèn)自己前面設(shè)置的是否有誤，無誤則點(diǎn)擊安裝即可
安裝完成
如果你看到如下界面，那么恭喜你，你的VSCode安裝完成。
VSCode基礎(chǔ)配置
VSCode界面簡介
VS Code 采用通用的用戶界面和左側(cè)的資源管理器布局，顯示您可以訪問的所有文件和文件夾，右側(cè)的編輯器顯示您打開的文件的內(nèi)容。
?關(guān)于對上圖界面的區(qū)域解釋：
| 區(qū)塊顏色 | 區(qū)塊名稱 | 區(qū)塊作用 |
|---|---|---|
| 紅色 | 活動(dòng)欄 | 位于最左側(cè)，可讓您在視圖之間切換，并為您提供額外的特定于上下文的指標(biāo)，例如啟用 Git 時(shí)傳出更改的數(shù)量。 |
| 綠色 | 側(cè)欄 | 包含不同的視圖，例如資源管理器，可在您處理項(xiàng)目時(shí)為您提供幫助。 |
| 粉色? ? ? | 狀態(tài)欄 | 有關(guān)已打開項(xiàng)目和您編輯的文件的信息。 |
| 紫色 | 面板 | 您可以在編輯器區(qū)域下方顯示不同的面板，用于輸出或調(diào)試信息、錯(cuò)誤和警告或集成終端。面板也可以向右移動(dòng)以獲得更多垂直空間。 |
| 白色? ? ? | 編輯區(qū) | 編輯文件的主要區(qū)域。您可以垂直和水平并排打開任意數(shù)量的編輯器。 |
| 黃色? ? ? | 菜單欄 | 進(jìn)行VSCode的各項(xiàng)操作 |
VSCode設(shè)置中文界面
因?yàn)槲覀兇藭r(shí)安裝的VSCode還是英文界面，對于英語不是那么好的小伙伴不是十分友好，所以我們此時(shí)需要安裝一個(gè)插件來對VSCode進(jìn)行中文化處理。
| 活動(dòng)欄簡單介紹 | 作用 |
|---|---|
|
|
編輯器打開的文件 |
|
|
全局搜索 |
|
|
Git管理 |
|
|
Debug |
|
|
插件安裝 |
|
|
用戶登錄 |
|
|
VSCode設(shè)置 |
經(jīng)過如上對VSCode界面基本的了解，我們在活動(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è)置，我們在常用設(shè)置，設(shè)置字體大小，字體，是否自動(dòng)保存等常用的設(shè)置項(xiàng)目，此處按需選擇設(shè)置即可。
?對于其他的設(shè)置也是同理，按需選擇設(shè)置。
對于常用設(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ī)快捷鍵
| 快捷鍵? | 說明 |
|---|---|
| Ctrl+Shift+P, F1 | 顯示命令選項(xiàng)板 |
| Ctrl+P | 快速打開，轉(zhuǎn)到文件… |
| Ctrl+Shift+N | 新建窗口/實(shí)例 |
| Ctrl+Shift+W | 關(guān)閉窗口/實(shí)例 |
| Ctrl+ | 用戶設(shè)置 |
| Ctrl+K Ctrl+S | 鍵盤快捷鍵 |
基本編輯快捷鍵
| 快捷鍵 | 說明 |
|---|---|
| Ctrl+X | 剪切線(空選區(qū))。 |
| Ctrl+C | 復(fù)制行(空選擇)。 |
| Alt+↑/↓ | 向上/向下移動(dòng)行。 |
| Shift+Alt+↓/↑ | 復(fù)制行向上/向下。 |
| Ctrl+Shift+K | 刪除行。 |
| Ctrl+Enter | 在下面插入行。 |
| Ctrl+Shift+Enter | 在上面插入行。 |
| Ctrl+Shift+\ | 跳轉(zhuǎn)到匹配的括號。 |
| Ctrl+]/[ | 縮進(jìn)/凸出行。 |
| Home/End | 轉(zhuǎn)到行的開始/結(jié)束。 |
| Ctrl+Home | 轉(zhuǎn)到文件開頭。 |
| Ctrl+End | 轉(zhuǎn)到文件末尾。 |
| Ctrl+↑/↓ | 向上/向下滾動(dòng)行。 |
| Alt+PgUp/PgDn | 上/下滾動(dòng)頁面。 |
| Ctrl+Shift+[ | 折疊(折疊)區(qū)域。 |
| Ctrl+Shift+] | 展開(展開)區(qū)域。 |
| Ctrl+K Ctrl+[ | 折疊(折疊)所有子區(qū)域。 |
| Ctrl+K Ctrl+] | 展開(展開)所有子區(qū)域。 |
| Ctrl+K Ctrl+0 | 折疊(折疊)所有區(qū)域。 |
| Ctrl+K Ctrl+J | 展開(展開)所有區(qū)域。 |
| Ctrl+K Ctrl+C | 添加行注釋。 |
| Ctrl+K Ctrl+U | 刪除行注釋。 |
| Ctrl+/ | 切換行注釋。 |
| Shift+Alt+ | 切換塊注釋。 |
| Alt+Z |
切換自動(dòng)換行 |
?導(dǎo)航
| 快捷鍵 | 說明 |
|---|---|
| Ctrl+T | 顯示所有符號。 |
| Ctrl+G | 轉(zhuǎn)到行...。 |
| Ctrl+P | 轉(zhuǎn)到文件...。 |
| Ctrl+Shift+O | 轉(zhuǎn)到符號...。 |
| Ctrl+Shift+M | 顯示問題面板。 |
| F8 | 轉(zhuǎn)到下一個(gè)錯(cuò)誤或警告。 |
| Shift+F8 | 轉(zhuǎn)到上一個(gè)錯(cuò)誤或警告。 |
| Ctrl+Shift+Tab | 導(dǎo)航編輯器組歷史記錄。 |
| Alt+←/→ |
后退/前進(jìn) |
| Ctrl+M | 切換選項(xiàng)卡移動(dòng)焦點(diǎn) |
插件推薦
主題/外觀美化區(qū)
Material Icon Theme:
它采用了 Google Material Design 風(fēng)格，文件圖標(biāo)以及文件夾圖標(biāo)覆蓋非常的全面，而且在暗黑模式下使用效果更佳。
Material Theme:
可以說是與Material Icon Theme師從一脈了
彩虹括號插件最新版VSCode已內(nèi)置，無需安裝，如需其他請使用Rainbow Brackets：
?vscode的彩虹括號擴(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 拉取請求和問題。
Git History：
查看Git日志，提交文件歷史，比較分支或提交?
GitLens — Git supercharged：
通過Git Under注解和CodeLens使你可以直截了當(dāng)?shù)娘@示代碼作者，無縫導(dǎo)航和探索Git存儲(chǔ)庫，通過豐富的可視化和強(qiáng)大的比較命令獲得有價(jià)值的見解等
Git Graph：
?查看存儲(chǔ)庫的Git Graph，并從該圖輕松執(zhí)行Git操作
Markdown語法插件
?Markdown All in One ：
?Markdown All in One?是 VSCode 熱門的 Markdown 插件，可以在左邊書寫，右邊即時(shí)預(yù)覽。下圖替大家展示了常用的快捷鍵，以供查閱。
| Key ? ? | Command |
| Ctrl + B ? ? | 粗體 |
| Ctrl + I ? ? | 斜體 |
| Alt + S ? | ?刪除線 |
| Ctrl + Shift + ]?? | 標(biāo)題(uplevel) |
| Ctrl + Shift + [? | 標(biāo)題(downlevel) |
| Ctrl + M? | 切換數(shù)學(xué)環(huán)境 |
| Alt + C? | 選中/取消選中任務(wù)列表項(xiàng) |
Markdown Preview Enhanced：
?Markdown預(yù)覽增強(qiáng)，自動(dòng)滾動(dòng)同步、數(shù)學(xué)排版、PlantUML、pandoc、PDF?導(dǎo)出、代碼塊、演示文稿編寫器等。
Markdown Preview Enhanced常用快捷鍵：
| 快捷鍵 | 說明 |
|---|---|
| cmd-k v 或 ctrl-k v | 打開預(yù)覽到側(cè)面 |
| cmd-shift-v 或 ctrl-shift-v | 打開預(yù)覽 |
| ctrl-shift-s | 同步預(yù)覽/同步源 |
| shift-enter | 運(yùn)行代碼塊 |
| ctrl-shift-enter | 運(yùn)行所有代碼塊 |
| cmd-= 或 cmd-shift-= | 預(yù)覽放大 |
| cmd-- 或 cmd-shift-_ | 預(yù)覽縮小 |
| cmd-0 | 預(yù)覽重置縮放 |
| Esc鍵 | 切換側(cè)邊欄目錄 |
學(xué)習(xí)\摸魚
LeetCode:
解決 VS Code 中的 LeetCode 問題
daily anime:
VSCode追番摸魚看劇必備，以下展示使用命令行使用此插件方法
ctrl+shift+p |
? 打開命令面板 |
命令行輸入anime
|
?打開番劇頁面 |
命令行輸入hitokoto
|
?可隨機(jī)展示一條句子 |
小霸王：
上班玩游戲必備！摸魚之王必備！
超越鼓勵(lì)師：
?夢里的超越將在你枯燥乏味的編輯器中鼓勵(lì)你。
前端插件
Better Comments：
幫助在代碼中創(chuàng)建更人性化的注釋，有了這個(gè)擴(kuò)展，你就可以把你的注釋分類為:警報(bào)、查詢、待辦事項(xiàng)、突出。注釋掉的代碼也可以設(shè)置樣式，以明確代碼不應(yīng)該出現(xiàn)在那里，你想要的任何其他評論樣式都可以在設(shè)置中指定，不同注釋可以顯示不同的效果。
?ESLint:
?集成ESLint JavaScript到VS Code，一個(gè)適用于前端的規(guī)范提示插件。
?vetur：
?此插件可謂是前端必備，vetur 的特性: 語法高亮, 代碼片段 (emmet 給我的感覺是一個(gè)寫好了的 snippet), 質(zhì)量提示 & 錯(cuò)誤、格式化 / 風(fēng)格、智能提示等。
Vue VScode Snippets：
構(gòu)建代碼片段的縮寫節(jié)約開發(fā)時(shí)間
JavaScript (ES6) code snippets
ES6語法中的JavaScript代碼片段
ES7+ React/Redux/React-Native snippets：
?擴(kuò)展React, React- native和Redux在JS/TS與ES7+語法
Image preview：
顯示圖像預(yù)覽在槽和懸停，圖片是否正確引入的顯示工具，在鏈接處按ctrl，鼠標(biāo)懸浮即可使用，確定是否正確找到路徑下的圖片。
Auto Rename Tag：
?自動(dòng)重命名成對的HTML/XML標(biāo)記，與Visual Studio IDE相同。
HTML CSS Support：
HTML的CSS智能感知，支持鏈接和嵌入式樣式表、支持模板繼承、支持其他樣式表、支持其他HTML之類的語言、根據(jù)需要驗(yàn)證CSS選擇器。
使用方法：通過Ctrl + space查看id和class屬性建議列表。
如果您認(rèn)真閱讀至此，您現(xiàn)在已經(jīng)掌握了VSCode的安裝與配置，且隨著您認(rèn)真練習(xí)使用次數(shù)的增加，您對此軟件的掌握我相信不止于此，如果您對此軟件或其他有進(jìn)階的要求，請移步至我的博客進(jìn)行其余的修煉計(jì)劃。文章來源：http://www.zghlxwxcb.cn/news/detail-777900.html
感謝您認(rèn)真觀看完畢此文章，如果此文章對您有幫助的話，還請您點(diǎn)贊、收藏、評論，這對我有很大的幫助。文章來源地址http://www.zghlxwxcb.cn/news/detail-777900.html
到了這里，關(guān)于VSCode安裝配置使用教程（最新版超詳細(xì)保姆級含插件）一文就夠了的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
