現(xiàn)在使用VS code進行前端開發(fā)的人越來越多，憑借著免費，開源，輕量，跨平臺的特點收獲了一大批忠實粉絲。相對于其它前端工具來說，VS Code顯得更加的流暢，更加的輕量級。下面，就將我的學(xué)習(xí)經(jīng)歷和大家分享一下，希望可以幫助到有需要的人。

一、VS Code的下載和安裝

官網(wǎng)下載:https://code.visualstudio.com/，下面是我們提供的軟件下載。

Visual Studio Code(代碼編輯器) v1.117.0 64位 中文免費綠色版

• 類型：編譯工具
• 大?。?/span>215MB
• 語言：簡體中文
• 時間：2026-04-23

查看詳情

下載好之后就直接默認(rèn)安裝就行了。這里應(yīng)該沒有什么難度。

二、先來漢化一下吧。英語好的人可以略過。

安裝好之后默認(rèn)是英文的，對于英語好的同學(xué)可以略過此步。先點擊最左邊下面的插件安裝按鈕，在輸入框中輸入chinese。

或者點擊右邊的安裝按鈕也可以:

安裝好之后，右下角會彈出一個對話框，提示重啟[Restart Now],重啟之后，就是中文界面了。

三.VS code界面介紹

活動欄從上到下依次為，打開側(cè)邊欄，搜索使用git，debug，使用插件

側(cè)邊欄，新建項目文件和文件夾

編輯欄，編寫代碼的區(qū)域

面板欄，從左到右依次為，問題，輸出，調(diào)試欄，終端(terminal)，最重要的是terminal，用來輸入相關(guān)命令

狀態(tài)欄，點擊 該區(qū)域可以調(diào)出面板欄

需要注意的為下圖紅框所示，分別表示鼠標(biāo)光標(biāo)所在位置和tab縮進字符，這里為縮進4個字符

四、新建文件和文件夾

新建文件:Ctr+N新建文件并修改后綴即可(后綴根據(jù)所需文件來，比如.html，.css，js等)新建文件夾

1:首先根據(jù)需要指定一個路徑(這里路徑以桌面為例)，然后新建一個文件夾(這里新建的文件夾為demo1)

2：鼠標(biāo)點擊側(cè)邊欄第二個選項，如下圖

3:此時會提示你沒有可以打開的文件夾，點擊Open Folder按鈕導(dǎo)入桌面新建的文件夾demo1

4：把文件夾導(dǎo)入后發(fā)現(xiàn)剛剛新建文件夾名字是小寫的，現(xiàn)在變大寫了，這個不影響，不用太在意

右邊圖標(biāo)從左到右為，新建文件/新建文件夾/刷新/折疊文件)

注:新建文件一定要修改后綴，否則默認(rèn)都是text文本文件

五.自動保存設(shè)置

File(文件)-Preferences(首選項)-Setting(設(shè)置)然后彈出下面界面，選擇User(一般會默認(rèn)選中該選項)接著如下圖選擇afterdelay選項即可，下面有個數(shù)字1000表示1秒，這個可自行設(shè)置，表示多少秒以后自動保存。

六、自動格式化代碼

File(文件)-Preferences(首選項)-Setting(設(shè)置)

User(用戶)-Text-Editor(文本編輯)-Formatng(格式化)

然后勾選下圖紅色框中的選項后重啟Vscode即可

七.VS Code更換主題

File(文件)-Preferences(首選項)-Color-The me(顏色主題）

然后會出現(xiàn)下圖紅色框的界面，此時按鍵盤上的上下鍵即可實時查看主題顏色，直接回車可選中對應(yīng)主題

注:可以點擊插件直接搜索 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(查找文件)點擊設(shè)置選擇 keyboard shortcuts，右邊會彈出所有快捷鍵目錄

如果漢化了的同學(xué)請參照圖片找到相應(yīng)的選項或菜單

最新評論