【轉載】vscode開發web配置

發表時(shí)間：2019-2-20

發布人(rén)：融晨科技

浏覽次數：56

原文：sunmarvell vscode使用教程（web開發） https://www.cnblogs.com/sunmarvell/p/9087260.html

1.安裝

進入官網下載https://code.visualstudio.com/

一直下一步就(jiù)好了(le／liǎo)，中間可以(yǐ)選擇把軟件安裝在(zài)哪個(gè)目錄。

2.常用插件安裝

a. 進入擴展視圖界面安裝/卸載

a1.快捷鍵：Ctrl+shift+x；

a2.查看——>擴展；

a3.點左側邊框的(de)擴展圖标按鈕進入。（最下面的(de)正方形圖标）

在(zài)頂部搜索框輸入你需要(yào / yāo)的(de)擴展插件，找到(dào)之(zhī)後在(zài)擴展插件後面的(de)選項中點擊【安裝】即可，需要(yào / yāo)卸載擴展隻需要(yào / yāo)點【卸載】即可。

擴展下載安裝完畢之(zhī)後需要(yào / yāo)點擊【啓用】才生效，有些擴展需要(yào / yāo)重啓編輯器才生效。

b. 如何選擇擴展（插件）呢？

其實也(yě)不(bù)難，擴展的(de)名稱一般都暴露了(le／liǎo)它的(de)功能，基本如下：

1.帶snippets 一般是(shì)代碼提示類擴展；

2.帶viewer 一般是(shì)代碼運行預覽類擴展；

3.帶support 一般是(shì)代碼語言支持；

4.帶document 一般是(shì)參考文檔類擴展；

5.帶Formatt 一般是(shì)代碼格式化整理擴展；

當然有的(de)snippets 也(yě)自帶support功能，并不(bù)是(shì)以(yǐ)上(shàng)面的(de)關鍵詞作爲(wéi / wèi)唯一标準。

3.需要(yào / yāo)安裝的(de)插件

3.1 HTML Snippets

爲(wéi / wèi)HTML文檔提供代碼提示功能，包含HTML5。

3.2 HTML CSS support

css自動補齊

3.3 VS color Picker

爲(wéi / wèi)css文檔和(hé / huò)HTML文檔提供顔色選擇，當輸入“#”後會出(chū)現顔色選擇器浮窗，點擊相應顔色之(zhī)後會插入文檔中，默認用16進制表示。若想用其他(tā)格式的(de)顔色，

如RGB等則推薦擴展：Color Picker (Color Picker缺點是(shì)需要(yào / yāo)配置，安裝nodejs，并且添加node到(dào)全局環境變量中。而(ér)且在(zài)插入時(shí)需要(yào / yāo)使用命令調出(chū)提色闆，有點麻煩）

3.4 live HTML Previewer

爲(wéi / wèi)html文檔提供預覽功能，需要(yào / yāo)用命令或者快捷鍵調出(chū)，會在(zài)編輯器中新增一列，用于(yú)運行html文件。

a. 按F1在(zài)命令框中輸入：Show side preview 新增一列顯示html，能邊寫邊看到(dào)效果，實時(shí)預覽。

b. 可以(yǐ)在(zài)html文檔中右鍵選擇：Open in browser 在(zài)系統默認浏覽器中打開，該模式下不(bù)能提供實時(shí)預覽,保存時(shí)不(bù)自動刷新浏覽器。

3.5 View In Browser
- 預覽頁面（ctrl+F1）

3.6 vscode-icons

側欄的(de)圖标

3.7 JS-CSS-HTML Formatter

格式化

3.8 jQuery Code Snippets

jquery 自動提示

3.9 Path Autocomplete

- 路徑自動補齊

3.10 Npm Intellisense
- npm包代碼提示

3.11 ESLint
- 檢測JS必備

3.12 window for Chrome
- 方便調試
3.13 Auto Rename Tag
- 自動同步修改标簽

3.14 Bootstrap 3 Snippets
- bootstrap必備

3.15 Vue VSCode Snippets

- vue必備

3.16 background
- 一個(gè)萌萌的(de)插件，可以(yǐ)自己設置vsc的(de)背景圖

3.17 easyless （暫時(shí)還沒安裝這(zhè)個(gè)）

爲(wéi / wèi)less文檔提供提示，錯誤警告，以(yǐ)及把less文檔編譯爲(wéi / wèi)css文件。可自定義設置。開發者給出(chū)的(de)配置例子(zǐ)：

"less.compile": {

"compress": true,

"sourceMap": true,

"out":false

}

可以(yǐ)粘貼到(dào)用戶設置的(de)【默認設置】裏，也(yě)可以(yǐ)粘貼到(dào)用戶設置settings.json裏。後面的(de)懂json的(de)同學自動忽略：如果settings.json是(shì)空的(de)，應該寫成：

{

"less.compile": {

"compress": true,

"sourceMap": true,

"out":false

}

如果之(zhī)前已有寫入json代碼，你應該在(zài)前面的(de)名稱/值對塊後面加上(shàng)“,”（新手容易多加或者少加","符号，個(gè)人(rén)覺得是(shì)這(zhè)樣的(de)）

****提示：****

在(zài)寫的(de)時(shí)候，代碼内最好不(bù)要(yào / yāo)加注釋。"sourceMap": true, 這(zhè)個(gè)地(dì / de)方最好設置成false ，因爲(wéi / wèi)當你實際使用的(de)時(shí)候浏覽器找不(bù)到(dào)sourceMap 可能會報錯或者浏覽器一直去找，還沒遇到(dào)過（我碰到(dào)jQuery.js因爲(wéi / wèi)這(zhè)個(gè)報錯的(de)），入門的(de)同學還是(shì)設置成false 比較好。

4.常用快捷鍵

文件 – 首選項 – 鍵盤快捷方式：就(jiù)可以(yǐ)看到(dào)所有快捷鍵；

修改快捷鍵
文件 – 首選項 – 鍵盤快捷方式，找到(dào)你要(yào / yāo)修改的(de)快捷鍵名字，右邊覆蓋就(jiù)可以(yǐ)了(le／liǎo)，很方便！也(yě)可以(yǐ)高級自定義，選項在(zài)文件 – 首選項 – 鍵盤快捷方式打開之(zhī)後的(de)最上(shàng)邊，和(hé / huò)sublime 自定義快捷鍵的(de)方式相同。

将保存，和(hé / huò)打開浏覽器的(de)快捷鍵改成了(le／liǎo)自己習慣的(de)方式，如下圖；