【轉載】vscode開發web配置

發表時間：2019-2-20

發布人：葵宇科技

浏覽次數：31

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

1.安裝

進入官網下(xià)載https://code.visualstudio.com/

一直下(xià)一步就好了，中(zhōng)間可(kě)以選擇把軟件安裝在哪個(gè)目錄。

2.常用插件安裝

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

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

a2.查看——>擴展；

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

在頂部搜索框輸入你(nǐ)需要的擴展插件，找到之後在擴展插件後面的選項中(zhōng)點擊【安裝】即可(kě)，需要卸載擴展隻需要點【卸載】即可(kě)。

擴展下(xià)載安裝完畢之後需要點擊【啟用】才生效，有些擴展需要重啟編輯器(qì)才生效。

b. 如(rú)何選擇擴展（插件）呢(ne)？

其實也不難，擴展的名稱一般都暴露了它的功能，基本如(rú)下(xià)：

1.帶snippets 一般是代碼提示類擴展；

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

3.帶support 一般是代碼語言支持；

4.帶document 一般是參考文(wén)檔類擴展；

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

當然有的snippets 也自帶support功能，并不是以上面的關(guān)鍵詞作為唯一标準。

3.需要安裝的插件

3.1 HTML Snippets

為HTML文(wén)檔提供代碼提示功能，包含HTML5。

3.2 HTML CSS support

css自動(dòng)補齊

3.3 VS color Picker

為css文(wén)檔和(hé)HTML文(wén)檔提供顔色選擇，當輸入“#”後會出現顔色選擇器(qì)浮窗，點擊相應顔色之後會插入文(wén)檔中(zhōng)，默認用16進制表示。若想用其他格式的顔色，

如(rú)RGB等則推薦擴展：Color Picker (Color Picker缺點是需要配置，安裝nodejs，并且添加node到全局環境變量中(zhōng)。而且在插入時需要使用命令調出提色闆，有點麻煩）

3.4 live HTML Previewer

為html文(wén)檔提供預覽功能，需要用命令或者快捷鍵調出，會在編輯器(qì)中(zhōng)新增一列，用于運行html文(wén)件。

a. 按F1在命令框中(zhōng)輸入：Show side preview 新增一列顯示html，能邊寫邊看到效果，實時預覽。

b. 可(kě)以在html文(wén)檔中(zhōng)右鍵選擇：Open in browser 在系統默認浏覽器(qì)中(zhōng)打開，該模式下(xià)不能提供實時預覽,保存時不自動(dòng)刷新浏覽器(qì)。

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

3.6 vscode-icons

側欄的圖标

3.7 JS-CSS-HTML Formatter

格式化

3.8 jQuery Code Snippets

jquery 自動(dòng)提示

3.9 Path Autocomplete

- 路(lù)徑自動(dòng)補齊

3.10 Npm Intellisense
- npm包代碼提示

3.11 ESLint
- 檢測JS必備

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

3.14 Bootstrap 3 Snippets
- bootstrap必備

3.15 Vue VSCode Snippets

- vue必備

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

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

為less文(wén)檔提供提示，錯誤警告，以及把less文(wén)檔編譯為css文(wén)件。可(kě)自定義設置。開發者給出的配置例子(zǐ)：

"less.compile": {

"compress": true,

"sourceMap": true,

"out":false

}

可(kě)以粘貼到用戶設置的【默認設置】裡，也可(kě)以粘貼到用戶設置settings.json裡。後面的懂json的同學自動(dòng)忽略：如(rú)果settings.json是空的，應該寫成：

{

"less.compile": {

"compress": true,

"sourceMap": true,

"out":false

}

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

****提示：****

在寫的時候，代碼内最好不要加注釋。"sourceMap": true, 這個(gè)地方最好設置成false ，因為當你(nǐ)實際使用的時候浏覽器(qì)找不到sourceMap 可(kě)能會報錯或者浏覽器(qì)一直去找，還沒遇到過（我碰到jQuery.js因為這個(gè)報錯的），入門的同學還是設置成false 比較好。

4.常用快捷鍵

文(wén)件 – 首選項 – 鍵盤快捷方式：就可(kě)以看到所有快捷鍵；

修改快捷鍵
文(wén)件 – 首選項 – 鍵盤快捷方式，找到你(nǐ)要修改的快捷鍵名字，右邊覆蓋就可(kě)以了，很方便！也可(kě)以高級自定義，選項在文(wén)件 – 首選項 – 鍵盤快捷方式打開之後的最上邊，和(hé)sublime 自定義快捷鍵的方式相同。

将保存，和(hé)打開浏覽器(qì)的快捷鍵改成了自己習慣的方式，如(rú)下(xià)圖；