vsCode是什么

Visual Studio Code (簡稱 VS Code / VSC) 是一款免費(fèi)開源的現(xiàn)代化輕量級(jí)代碼編輯器，支持幾乎所有主流的開發(fā)語言的語法高亮、智能代碼補(bǔ)全、自定義熱鍵、括號(hào)匹配、代碼片段、代碼對(duì)比 Diff、GIT 等特性，支持插件擴(kuò)展，并針對(duì)網(wǎng)頁開發(fā)和云端應(yīng)用開發(fā)做了優(yōu)化。軟件跨平臺(tái)支持 Win、Mac 以及 Linux。

vsCode安裝

voCode是免費(fèi)的軟件

下載地址鏈接: 官網(wǎng)下載.

vsCode漢化

按F1 搜索 Configure Display Language 設(shè)置 zh-cn 關(guān)閉軟件重啟。

如果重啟后還是英文的，那么在商店查看已安裝的插件，把中文插件Chinese(simplified) 重新安裝一遍，然后重啟軟件即可。

vsCode常用命令說明

注意

1. Ctrl+shift+F 在文件中查找，可以同時(shí)替換。還可以指定在什么文件中，同時(shí)指定要排除什么文件等。
2. 我們安裝vscode后，可以直接在任意一個(gè)項(xiàng)目目錄下，鼠標(biāo)右鍵然后將這個(gè)項(xiàng)目在服務(wù)器上打開。（如果你已經(jīng)有打開了一個(gè)窗口，那么他會(huì)打開一個(gè)新窗口）

vsCode左邊圖標(biāo)說明

vsCode基本使用

1.直接拖入項(xiàng)目文件夾進(jìn)入軟件

方式一： 拖入工作區(qū)（這樣的話，會(huì)保留當(dāng)前以及打開的項(xiàng)目文件夾）

方式二： 拖入工作區(qū)右邊的窗口，這樣的話會(huì)讓拖入的窗口覆蓋掉原本以及打開的窗口
（這時(shí)vscode會(huì)問你是否保存一個(gè)文件，用來保存原本工作區(qū)信息，以便下次打開此文件）

備注：對(duì)于左側(cè)的文件夾可以直接使用快捷鍵復(fù)制粘貼等。

方式三：

也可以安裝http server插件，安裝完成后按下f1,然后輸入http會(huì)看到下面兩個(gè)選項(xiàng)，選擇with current file那個(gè)能夠創(chuàng)建一個(gè)服務(wù)器運(yùn)行當(dāng)前文件。另外一個(gè)會(huì)找當(dāng)前目錄下的index.html,然后打開它。

2.在vscode里面創(chuàng)建項(xiàng)目文件夾

3.格式化代碼

在代碼里面右鍵菜單，會(huì)彈出相應(yīng)的格式化等功能選項(xiàng)，也有定義引用查找等菜單。

4.在瀏覽器中打開網(wǎng)頁

安裝插件：Open HTML in Default Browser

•用默認(rèn)瀏覽器打開 HTML 文件
•在資源管理器中，HTML 文件右鍵顯示 在瀏覽器中打開 菜單
•在編輯器中，HTML 文件右鍵顯示 在瀏覽器中打開 菜單
•可以同時(shí)打開多個(gè)頁面

我們?cè)诠ぷ鲄^(qū)項(xiàng)目上右鍵菜單就能看到在資源管理器中打開文件的選項(xiàng)

5.以服務(wù)器形式打開文件

方式一：

安裝live server 插件，點(diǎn)擊重新加載或者重啟vscode，然后鼠標(biāo)右鍵就可以在服務(wù)器上打開，
這種模式打開會(huì)自動(dòng)刷新頁面。

方式二：
按下快捷鍵：Ctrl+` 打開命令行終端，執(zhí)行cnpm install live-server -g
安裝好后每次要運(yùn)行只需要打開終端后執(zhí)行一下live-server即可

使用live-server是把整個(gè)網(wǎng)站打開到服務(wù)器上的。不管你當(dāng)前定位到哪一個(gè)目錄，他打開的都是默認(rèn)的首頁文件，

如：index.html

如果你根目錄下全是文件夾，或者沒有index.html等默認(rèn)首頁文件，那么服務(wù)器就會(huì)顯示一些文件夾讓你選擇。

如：

6.如果要關(guān)閉live-server那么只需要在控制臺(tái)執(zhí)行以下ctrl+c，然后輸入y確認(rèn)下即可關(guān)閉。

7.Live-server可以在任意項(xiàng)目根目錄下，打開終端窗口，然后輸入live-server即可讓當(dāng)前項(xiàng)目在服務(wù)器上打開執(zhí)行

8.在以服務(wù)器打開的模式下，我們更改了文件內(nèi)容后只要保存下，瀏覽器就會(huì)自動(dòng)的刷新**，而不需要我們顯式的在瀏覽器里面刷新。

8.前端常用插件

如果你是小白，沒有必要非要弄懂插件的作用，先安裝，后面用著用著你就熟悉了
安裝方法

在vosCode中顯示html界面

總結(jié)

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