一、什么是vscode**

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

vscode 官網(wǎng)： https://code.visualstudio.com/

二、Vscode版本

當(dāng)前最新版本 1.27 2018年8月
版本列表：https://code.visualstudio.com/updates/v1_27

三、Vscode下載

下載地址：https://code.visualstudio.com/Download

可下載.zip解壓版，下載解壓后即可使用?！酒涫怯胑lectron打包的】

也可下載安裝版可執(zhí)行程序，安裝后很多東西都不需要你自己配置了。

四、漢化vscode

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

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

漢化成功：

五、幾個(gè)常用命令說(shuō)明

注意
1.Ctrl+shift+F 在文件中查找，可以同時(shí)替換。還可以指定在什么文件中，同時(shí)指定要排除什么文件等。
2. 通過(guò)快捷鍵Ctrl+`后可以將命令窗口打開(kāi)在vscode中，使用起來(lái)就比較方便了。
3.我們安裝vscode后，可以直接在任意一個(gè)項(xiàng)目目錄下，鼠標(biāo)右鍵然后將這個(gè)項(xiàng)目在服務(wù)器上打開(kāi)。（如果你已經(jīng)有打開(kāi)了一個(gè)窗口，那么他會(huì)打開(kāi)一個(gè)新窗口）

六、左邊圖標(biāo)說(shuō)明

七、基本使用

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

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

備注：對(duì)于左側(cè)的文件夾可以直接使用快捷鍵復(fù)制粘貼等。
2.在vscode里面創(chuàng)建項(xiàng)目文件夾

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

4.在瀏覽器中打開(kāi)網(wǎng)頁(yè)

1.以file文件協(xié)議形式打開(kāi)文件

安裝插件：Open HTML in Default Browser

特點(diǎn)

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

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

2.以服務(wù)器形式打開(kāi)文件
方式一：
    安裝live server 插件，點(diǎn)擊重新加載或者重啟vscode，然后鼠標(biāo)右鍵就可以在服務(wù)器上打開(kāi)，
這種模式打開(kāi)會(huì)自動(dòng)刷新頁(yè)面。
方式二：
    1.按下快捷鍵：Ctrl+` 打開(kāi)命令行終端，執(zhí)行cnpm install live-server -g

    2.安裝好后每次要運(yùn)行只需要打開(kāi)終端后執(zhí)行一下live-server即可

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

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

    5.如果要關(guān)閉live-server那么只需要在控制臺(tái)執(zhí)行以下ctrl+c，然后輸入y確認(rèn)下即可關(guān)閉。
    6.Live-server可以在任意項(xiàng)目根目錄下，打開(kāi)終端窗口，然后輸入live-server即可讓當(dāng)前項(xiàng)目在服務(wù)器上打開(kāi)執(zhí)行
    7.在以服務(wù)器打開(kāi)的模式下，我們更改了文件內(nèi)容后只要保存下，瀏覽器就會(huì)自動(dòng)的刷新，而不需要我們顯式的在瀏覽器里面刷新。
方式三：
    也可以安裝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,然后打開(kāi)它。

選擇一個(gè)后，會(huì)再讓你選擇在瀏覽器里面打開(kāi)還是vscode里面打開(kāi)。

其他
    你也可以全局安裝此模塊【cnpm install http-server -g 】
安裝到全局后：在終端里面輸入hs就可以使用。

八、插件安裝

安裝與卸載

1. 安裝： 在左邊最下面是哪個(gè)圖標(biāo)點(diǎn)擊搜索插件進(jìn)行安裝即可。
2. 卸載： 同樣的地方找到插件，然后進(jìn)行卸載即可。

    如果安裝了某個(gè)插件后無(wú)法看到效果，那么請(qǐng)重啟下vscode，或者重新加載
常用插件：

1.HTML Boilerplate

   通過(guò)使用 HTML 模版插件，你就擺脫了為 HTML 新文件重新編寫(xiě)頭部和正文標(biāo)簽的苦惱。你只需在空文件中輸入 html，選中html:5即可生成一個(gè)新的網(wǎng)頁(yè)文件，也可以輸入一個(gè)感嘆號(hào)

2.browser-plus

在編輯器內(nèi)預(yù)覽HTML

    通過(guò)開(kāi)啟端口(10086)監(jiān)聽(tīng)當(dāng)前打開(kāi)項(xiàng)目的根目錄，在編輯器內(nèi)預(yù)覽網(wǎng)站，省去了頻繁切換瀏覽器、編輯器看頁(yè)面效果，修改代碼后自動(dòng)刷新頁(yè)面。

使用方法

Window Ctrl+F1 ，默認(rèn)10086端口預(yù)覽網(wǎng)頁(yè)

3.CSS Peek

    使用此插件，你可以追蹤至樣式表中 CSS 類(lèi)和 ids 定義的地方。當(dāng)你在 HTML 文件中右鍵單擊選擇器時(shí)，選擇“ Go to Definition 和 Peek definition ”選項(xiàng)，它便會(huì)給你發(fā)送樣式設(shè)置的 CSS 代碼。

4.Color Info

    這個(gè)便捷的插件，將為你提供你在 CSS 中使用顏色的相關(guān)信息。你只需在顏色上懸停光標(biāo)，就可以預(yù)覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關(guān)信息了。

5.Auto Close Tag

    自動(dòng)閉合HTML/XML標(biāo)簽

6.Auto Rename Tag

    自動(dòng)完成另一側(cè)標(biāo)簽的同步修改

7.HTML Snippets

    智能提示HTML標(biāo)簽，以及標(biāo)簽含義JavaScript(ES6) code snippetsES6語(yǔ)法智能提示，以及快速輸入，不僅僅支持.js，還支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各種包含js代碼文件的時(shí)間

8.Path Intellisense

    自動(dòng)提示文件路徑，支持各種快速引入文

9.jQuery Code Snippets

　　jQuery代碼智能提示

10.Icon Fonts

    這是一個(gè)能夠在項(xiàng)目中添加圖標(biāo)字體的插件。該插件支持超過(guò) 20 個(gè)熱門(mén)的圖標(biāo)集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。

自動(dòng)編譯less文件為css文件：
    安裝插件 Easy LESS，保存自動(dòng)編譯，不需要配置（默認(rèn)編譯到當(dāng)前目錄下）
    如果需要編譯為不同文件名的css文件，那么在less文件的最上面加上一行注釋即可：// out: new-file.css

總結(jié)

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

最新評(píng)論