一文詳解VSCode安裝配置使用(最新版超詳細(xì)保姆級含插件)
前言
Visual Studio Code 是一個輕量級功能強(qiáng)大的源代碼編輯器，支持語法高亮、代碼自動補(bǔ)全（又稱 IntelliSense）、代碼重構(gòu)、查看定義功能，并且內(nèi)置了命令行工具和 Git 版本控制系統(tǒng)。適用于 Windows、macOS 和 Linux。它內(nèi)置了對 JavaScript、TypeScript 和 Node.js 的支持，并為其他語言和運行時（如 C++、C#、Java、Python、PHP、Go、.NET）提供了豐富的擴(kuò)展生態(tài)系統(tǒng)。為了不影響讀者的沉浸式閱讀學(xué)習(xí)，如需使用目錄請在左側(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ī)將無法使用別人安裝的vscode。vscode默認(rèn)提供的為User InstallerSystem Installer安裝在非用戶目錄,例如C盤根目錄,任何帳戶都可以使用。
關(guān)于具體下載哪個版本我進(jìn)行了大量的調(diào)研，發(fā)現(xiàn)網(wǎng)絡(luò)上大部分的教程都是選擇的VSCode默認(rèn)提供的User Installer版本。但是對于我們實際和真正的開發(fā)，以及我們對于系統(tǒng)文件的管理難易度上來講我更推薦System Installer版本，它可以自定義安裝路徑，使其我們后期對于它的管理十分方便。
VSCode的安裝
此處我選擇了System Installer版本，原因無它，因為它可以自定義安裝路徑，使其我們后期對于它的管理十分方便，我也十分建議你選擇此版本安裝。
同意協(xié)議
選擇同意協(xié)議，點擊下一步
選擇安裝位置
選擇安裝位置，單擊瀏覽按需選擇自己要設(shè)置的安裝路徑位置。然后點擊下一步即可
注意：為了后期的穩(wěn)定性，切勿使用中文路徑。
選擇開始菜單文件夾
如需修改，請點擊瀏覽進(jìn)行設(shè)置，無需修改直接單擊下一步即可
選擇附加任務(wù)
按需選擇自己需要的附加任務(wù)，這里我推薦將其他中的所有選項都勾選上，對于創(chuàng)建桌面方式則按需選擇是否勾選，我這里因為不需要所以就不勾選了。
設(shè)置完畢最后單擊下一步
注意：添加到PATH一定要勾選，很重要。
準(zhǔn)備安裝
確認(rèn)自己前面設(shè)置的是否有誤，無誤則點擊安裝即可
安裝完成
如果你看到如下界面，那么恭喜你，你的VSCode安裝完成。
VSCode基礎(chǔ)配置
VSCode界面簡介
VS Code 采用通用的用戶界面和左側(cè)的資源管理器布局，顯示您可以訪問的所有文件和文件夾，右側(cè)的編輯器顯示您打開的文件的內(nèi)容。
關(guān)于對上圖界面的區(qū)域解釋：
| 區(qū)塊顏色 | 區(qū)塊名稱 | 區(qū)塊作用 |
|---|---|---|
| 紅色 | 活動欄 | 位于最左側(cè)，可讓您在視圖之間切換，并為您提供額外的特定于上下文的指標(biāo)，例如啟用 Git 時傳出更改的數(shù)量。 |
| 綠色 | 側(cè)欄 | 包含不同的視圖，例如資源管理器，可在您處理項目時為您提供幫助。 |
| 粉色 | 狀態(tài)欄 | 有關(guān)已打開項目和您編輯的文件的信息。 |
| 紫色 | 面板 | 您可以在編輯器區(qū)域下方顯示不同的面板，用于輸出或調(diào)試信息、錯誤和警告或集成終端。面板也可以向右移動以獲得更多垂直空間。 |
| 白色 | 編輯區(qū) | 編輯文件的主要區(qū)域。您可以垂直和水平并排打開任意數(shù)量的編輯器。 |
| 黃色 | 菜單欄 | 進(jìn)行VSCode的各項操作 |
VSCode設(shè)置中文界面
因為我們此時安裝的VSCode還是英文界面，對于英語不是那么好的小伙伴不是十分友好，所以我們此時需要安裝一個插件來對VSCode進(jìn)行中文化處理。
| 活動欄簡單介紹 | 作用 |
|---|---|
| 編輯器打開的文件 |
| 全局搜索 |
| Git管理 |
| Debug |
| 插件安裝 |
| 用戶登錄 |
| VSCode設(shè)置 |
經(jīng)過如上對VSCode界面基本的了解，我們在活動欄區(qū)域找到插件安裝這個選項，單擊它，在搜索框中搜索Chinese 選擇第一個即可，選擇Install進(jìn)行安裝。
安裝完畢，右下角會彈出如下提示框，單擊Restart重啟VSCode即可完成。
VSCode個性化設(shè)置
我們找到設(shè)置，選擇顏色主題
會彈出如下框選，此時我們根據(jù)自己的喜好選擇即可，如果你覺得沒有，還可以選擇瀏覽其他顏色主題進(jìn)行預(yù)覽選擇。
其余文件圖標(biāo)主題和產(chǎn)品圖標(biāo)主題的個性化設(shè)置同理。
VSCode常用設(shè)置
打開活動欄的VSCode設(shè)置，我們在常用設(shè)置，設(shè)置字體大小，字體，是否自動保存等常用的設(shè)置項目，此處按需選擇設(shè)置即可。
對于其他的設(shè)置也是同理，按需選擇設(shè)置。
對于常用設(shè)置這一項，我的個人建議是將Files：AutoSave選項的off更改為onFocusChange選項（當(dāng)編輯器失去焦點時，會自動保存具有更改的編輯器）
VSCode常用快捷鍵
為了大家更為方便的使用快捷鍵，我再次列了一個表格進(jìn)行規(guī)整化說明。
常規(guī)快捷鍵
| 快捷鍵 | 說明 |
|---|---|
| Ctrl+Shift+P, F1 | 顯示命令選項板 |
| Ctrl+P | 快速打開，轉(zhuǎn)到文件… |
| Ctrl+Shift+N | 新建窗口/實例 |
| Ctrl+Shift+W | 關(guān)閉窗口/實例 |
| Ctrl+ | 用戶設(shè)置 |
| Ctrl+K Ctrl+S | 鍵盤快捷鍵 |
基本編輯快捷鍵
| 快捷鍵 | 說明 |
|---|---|
| Ctrl+X | 剪切線(空選區(qū))。 |
| Ctrl+C | 復(fù)制行(空選擇)。 |
| Alt+↑/↓ | 向上/向下移動行。 |
| 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+↑/↓ | 向上/向下滾動行。 |
| Alt+PgUp/PgDn | 上/下滾動頁面。 |
| 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ǎo)航
| 快捷鍵 | 說明 |
|---|---|
| Ctrl+T | 顯示所有符號。 |
| Ctrl+G | 轉(zhuǎn)到行...。 |
| Ctrl+P | 轉(zhuǎn)到文件...。 |
| Ctrl+Shift+O | 轉(zhuǎn)到符號...。 |
| Ctrl+Shift+M | 顯示問題面板。 |
| F8 | 轉(zhuǎn)到下一個錯誤或警告。 |
| Shift+F8 | 轉(zhuǎn)到上一個錯誤或警告。 |
| Ctrl+Shift+Tab | 導(dǎo)航編輯器組歷史記錄。 |
Alt+←/→ | 后退/前進(jìn) |
| Ctrl+M | 切換選項卡移動焦點 |
插件推薦
主題/外觀美化區(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：
這個擴(kuò)展突出顯示匹配的開始和/或結(jié)束標(biāo)記。它還可以在狀態(tài)欄中顯示標(biāo)簽的路徑。即使VSCode有一些基本的標(biāo)簽匹配，它也只是——基本的。這個擴(kuò)展將嘗試匹配標(biāo)簽的任何地方:從標(biāo)簽屬性，字符串內(nèi)部，任何文件，同時也提供了廣泛的樣式選項，自定義標(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存儲庫，通過豐富的可視化和強(qiáng)大的比較命令獲得有價值的見解等
Git Graph：
查看存儲庫的Git Graph，并從該圖輕松執(zhí)行Git操作
Markdown語法插件
Markdown All in One ：
Markdown All in One 是 VSCode 熱門的 Markdown 插件，可以在左邊書寫，右邊即時預(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ù)列表項 |
Markdown Preview Enhanced：
Markdown預(yù)覽增強(qiá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 | 運行代碼塊 |
| ctrl-shift-enter | 運行所有代碼塊 |
| 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ī)展示一條句子 |
小霸王：
上班玩游戲必備！摸魚之王必備！
超越鼓勵師：
夢里的超越將在你枯燥乏味的編輯器中鼓勵你。
前端插件
Better Comments：
幫助在代碼中創(chuàng)建更人性化的注釋，有了這個擴(kuò)展，你就可以把你的注釋分類為:警報、查詢、待辦事項、突出。注釋掉的代碼也可以設(shè)置樣式，以明確代碼不應(yīng)該出現(xiàn)在那里，你想要的任何其他評論樣式都可以在設(shè)置中指定，不同注釋可以顯示不同的效果。
ESLint:
集成ESLint JavaScript到VS Code，一個適用于前端的規(guī)范提示插件。
vetur：
此插件可謂是前端必備，vetur 的特性: 語法高亮, 代碼片段 (emmet 給我的感覺是一個寫好了的 snippet), 質(zhì)量提示 & 錯誤、格式化 / 風(fēng)格、智能提示等。
Vue VScode Snippets：
構(gòu)建代碼片段的縮寫節(jié)約開發(fā)時間
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：
自動重命名成對的HTML/XML標(biāo)記，與Visual Studio IDE相同。
HTML CSS Support：
HTML的CSS智能感知，支持鏈接和嵌入式樣式表、支持模板繼承、支持其他樣式表、支持其他HTML之類的語言、根據(jù)需要驗證CSS選擇器。
使用方法：通過Ctrl + space查看id和class屬性建議列表。
如果您認(rèn)真閱讀至此，您現(xiàn)在已經(jīng)掌握了VSCode的安裝與配置，且隨著您認(rèn)真練習(xí)使用次數(shù)的增加，您對此軟件的掌握我相信不止于此，如果您對此軟件或其他有進(jìn)階的要求。
總結(jié)
到此這篇關(guān)于VSCode安裝配置使用的文章就介紹到這了,更多相關(guān)VSCode安裝配置使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了Hash算法示例應(yīng)用場景解延伸探究,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
本文給大家匯總介紹了vscode的下載,安裝,常用插件以及常用的快捷鍵,非常的詳細(xì),希望對大家使用vscode能夠有所幫助2020-02-02
這篇文章主要給大家介紹了關(guān)于Git如何刪除歷史記錄中大文件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
最近為vsocde配置Eslint出現(xiàn)了許多問題,我解決問題之后,覺得還是把這些坑都寫清楚,方便學(xué)習(xí)前端的初學(xué)者,下面這篇文章主要給大家介紹了關(guān)于VSCode中ESLint插件修復(fù)以及配置教程的相關(guān)資料,需要的朋友可以參考下2022-12-12
在IDEA（2020.2）中配置Git及使用Git的圖文詳解
這篇文章主要介紹了在IDEA（2020.2）中配置Git及使用Git的圖文詳解,本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
關(guān)于代碼閱讀問題的小技巧 腳本之家原創(chuàng)(適合所有網(wǎng)站)不定時更新
因為很多網(wǎng)站為了網(wǎng)站的安全，特將一些字符替換成中文字符，導(dǎo)致很多情況下，代碼無法運行，或復(fù)制內(nèi)容的適合都是一行顯示，這里將會為大家整理一些。2011-01-01
這篇文章主要介紹了Git 分支的新建與合并，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-08
解決IDEA中g(shù)it拉取代碼時出現(xiàn)Update canceled問題
這篇文章主要介紹了解決IDEA中g(shù)it拉取代碼時出現(xiàn)Update canceled問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
phpMyAdmin“無法載入 mysql 擴(kuò)展， 請檢查 PHP 配置”問題的解決方案
安裝XAMPP后，phpMyAdmin無法進(jìn)入，一直提示“無法載入 mysql 擴(kuò)展， 請檢查 PHP 配置”。網(wǎng)上查，需要修改php.ini，卻發(fā)現(xiàn)本來就是正確的；2009-02-02
這篇文章主要介紹了git ssh 配置多個賬戶的方法,需要的朋友可以參考下2017-10-10