vscode入門! 小白都能看懂的VS Code保姆級級使用教程
我要評論現(xiàn)在使用VS code進(jìn)行前端開發(fā)的人越來越多，憑借著免費(fèi)，開源，輕量，跨平臺的特點(diǎn)收獲了一大批忠實(shí)粉絲。相對于其它前端工具來說，VS Code顯得更加的流暢，更加的輕量級。下面，就將我的學(xué)習(xí)經(jīng)歷和大家分享一下，希望可以幫助到有需要的人。
一、VS Code的下載和安裝
官網(wǎng)下載:https://code.visualstudio.com/，下面是我們提供的軟件下載。
下載好之后就直接默認(rèn)安裝就行了。這里應(yīng)該沒有什么難度。
二、先來漢化一下吧。英語好的人可以略過。
安裝好之后默認(rèn)是英文的，對于英語好的同學(xué)可以略過此步。先點(diǎn)擊最左邊下面的插件安裝按鈕，在輸入框中輸入chinese。
或者點(diǎn)擊右邊的安裝按鈕也可以:
安裝好之后，右下角會(huì)彈出一個(gè)對話框，提示重啟[Restart Now],重啟之后，就是中文界面了。
三.VS code界面介紹
活動(dòng)欄從上到下依次為，打開側(cè)邊欄，搜索使用git，debug，使用插件
側(cè)邊欄，新建項(xiàng)目文件和文件夾
編輯欄，編寫代碼的區(qū)域
面板欄，從左到右依次為，問題，輸出，調(diào)試欄，終端(terminal)，最重要的是terminal，用來輸入相關(guān)命令
狀態(tài)欄，點(diǎn)擊 該區(qū)域可以調(diào)出面板欄
需要注意的為下圖紅框所示，分別表示鼠標(biāo)光標(biāo)所在位置和tab縮進(jìn)字符，這里為縮進(jìn)4個(gè)字符
四、新建文件和文件夾
新建文件:Ctr+N新建文件并修改后綴即可(后綴根據(jù)所需文件來，比如.html，.css，js等)新建文件夾
1:首先根據(jù)需要指定一個(gè)路徑(這里路徑以桌面為例)，然后新建一個(gè)文件夾(這里新建的文件夾為demo1)
2：鼠標(biāo)點(diǎn)擊側(cè)邊欄第二個(gè)選項(xiàng)，如下圖
3:此時(shí)會(huì)提示你沒有可以打開的文件夾，點(diǎn)擊Open Folder按鈕導(dǎo)入桌面新建的文件夾demo1
4：把文件夾導(dǎo)入后發(fā)現(xiàn)剛剛新建文件夾名字是小寫的，現(xiàn)在變大寫了，這個(gè)不影響，不用太在意
右邊圖標(biāo)從左到右為，新建文件/新建文件夾/刷新/折疊文件)
注:新建文件一定要修改后綴，否則默認(rèn)都是text文本文件
五.自動(dòng)保存設(shè)置
File(文件)-Preferences(首選項(xiàng))-Setting(設(shè)置)然后彈出下面界面，選擇User(一般會(huì)默認(rèn)選中該選項(xiàng))接著如下圖選擇afterdelay選項(xiàng)即可，下面有個(gè)數(shù)字1000表示1秒，這個(gè)可自行設(shè)置，表示多少秒以后自動(dòng)保存。
六、自動(dòng)格式化代碼
File(文件)-Preferences(首選項(xiàng))-Setting(設(shè)置)
User(用戶)-Text-Editor(文本編輯)-Formatng(格式化)
然后勾選下圖紅色框中的選項(xiàng)后重啟Vscode即可
七.VS Code更換主題
File(文件)-Preferences(首選項(xiàng))-Color-The me(顏色主題）
然后會(huì)出現(xiàn)下圖紅色框的界面，此時(shí)按鍵盤上的上下鍵即可實(shí)時(shí)查看主題顏色，直接回車可選中對應(yīng)主題
注:可以點(diǎn)擊插件直接搜索 theme 下載其它非內(nèi)置主題
八、常用快捷鍵
(只列出了很小一部分常用快捷鍵)
- Ctrl +/(單行注釋
- Shift + Alt +A(多行注釋)若要取消單行或多行注釋再按一次該快捷鍵即可
- Ctrl + Shift + Enter (上方插入一行，鼠標(biāo)光標(biāo)在當(dāng)前行的任意位置都可以直接換行到上一行)
- Ctrl + Enter (下方插入一行，鼠標(biāo)光標(biāo)在當(dāng)前行的任意位置都可以直接換行到下一行
- Alt + Shift +F(格式化代碼，不需要全選中代碼，直接格式化即可)
- Ctrl+ Shift +F(查找文件)點(diǎn)擊設(shè)置選擇 keyboard shortcuts，右邊會(huì)彈出所有快捷鍵目錄
如果漢化了的同學(xué)請參照圖片找到相應(yīng)的選項(xiàng)或菜單
相關(guān)文章
2026年真正值得裝、用得上、不雞肋的 VSCode 插件，其實(shí)沒那么多——挑10個(gè)“神級”不難，但得是每天打開就用、關(guān)掉就難受的那種2026-02-10VS Code 和 VSCodium怎么選? vscode 和 vscodium之間的區(qū)別
咱們今天就來聊聊 Visual Studio Code (VS Code) 和 VSCodium的相似與區(qū)別，詳細(xì)請看下文介紹2026-01-10VS Code中Java擴(kuò)展代碼重構(gòu)功能的使用詳解
在軟件開發(fā)過程中，重構(gòu)是一個(gè)非常重要的環(huán)節(jié),重構(gòu)可以提高代碼的可讀性、可維護(hù)性和可擴(kuò)展性，使代碼更加健壯和易于理解，本文將介紹如何使用 VSCode 進(jìn)行 Java 代碼重構(gòu)2025-09-20VSCode有哪些擴(kuò)展能顯著提升前端開發(fā)體驗(yàn)? VSCode擴(kuò)展推薦
微軟的VSCode是一款流行的免費(fèi)開源編輯器,由于其適應(yīng)性強(qiáng)、穩(wěn)健且擁有豐富的擴(kuò)展生態(tài)系統(tǒng)，它吸引了來自所有專業(yè)的開發(fā)者的極大關(guān)注，這些擴(kuò)展功能是實(shí)實(shí)在在的生產(chǎn)力提升2025-09-20VSCode如何靈活管理不同工作區(qū)? vscode配置文件工作區(qū)管理技巧
在vscode中高效管理多項(xiàng)目切換的核心方法是使用“工作區(qū)”功能，它允許整合多個(gè)項(xiàng)目并保存獨(dú)立配置，今天我們就來看看VSCode的配置文件（JSON）如何靈活管理不同工作區(qū)2025-09-19VSCode代碼重構(gòu)工具怎么用? Refactoring重命名和提取操作的技巧
利用VSCode的重構(gòu)功能提升代碼維護(hù)效率，VSCode 的代碼重構(gòu)（Refactoring）工具支持哪些智能的重命名和提取操作？詳細(xì)請看下文介紹2025-09-19vscode占內(nèi)存太大怎么辦? VSCode存儲(chǔ)文件占用C盤過大的問題解決方案
突然發(fā)現(xiàn)C盤滿了，但是并沒有發(fā)現(xiàn)是什么文件占用了大空間，經(jīng)過調(diào)查，發(fā)現(xiàn)是因?yàn)閂scode擴(kuò)展導(dǎo)致，只要把存儲(chǔ)內(nèi)容從C盤移動(dòng)到D盤即可緩解該問題2025-09-19VSCode符號搜索功能有多強(qiáng)大? VSCode中Go to Symbol功能用法
VSCode中的符號搜索功能的性能和準(zhǔn)確性直接影響開發(fā)效率，傳統(tǒng)的符號搜索實(shí)現(xiàn)雖然穩(wěn)定，但在某些場景下可能存在性能瓶頸或模糊匹配不夠精準(zhǔn)的問題，今天我們就來看看這個(gè)功2025-09-19
Cursor中code/cursor命令怎么用? Cursor基于VSCode的編輯器命令詳解
Cursor 是一款基于 Visual Studio Code (VS Code) 的現(xiàn)代化代碼編輯器，所以它繼承了 VS Code 的強(qiáng)大功能，如本文要介紹的 code 命令，詳細(xì)請看下文介紹2025-06-14如何把代碼提交到github? 一文學(xué)會(huì)vVsCode使用Git上傳代碼至GitHub
之前一直用vscode寫了一個(gè)網(wǎng)站，期間代碼一直與github同步，要使用VS Code將代碼上傳到GitHub，可以按照以下步驟操作2025-05-13
