寫在前面，避免踩雷：
經(jīng)常看到一些視頻中開發(fā)的代碼會(huì)一鍵生成等，原來都是在用這些插件。彈幕上顯示個(gè)emmet,于是去搜索了一下。

大部分文章都是sublime text 3，于是就按照操作下載一頓安裝，最后才發(fā)現(xiàn)，原來sublime只是代碼編輯器的其中一個(gè)軟件，比如：Adobe公司的Brackets，微軟的Visual Studio Code，都是可以實(shí)現(xiàn)的。

每個(gè)編輯器的語法和插件大同小異，所以你用的是哪一個(gè)編輯器就直接搜這個(gè)編輯器對(duì)應(yīng)的文章。

VS code 自帶的：

• Emmet（原名 Zen Coding）：一種快速編寫html/css的方法，會(huì)自動(dòng)補(bǔ)全代碼，一鍵生成基礎(chǔ)代碼。(在左下角設(shè)置圖標(biāo)——setting——搜索框輸入emmet,勾選一下即可)
• Format Document : 文檔格式化，讓整個(gè)文件看起來更美觀，代碼更優(yōu)雅。
  
  

插件推薦：

• Code Runner: 代碼一鍵運(yùn)行，支持超過40種語言

• Guides : 在代碼前面顯示引導(dǎo)線

• Chinese(simplified) Language 簡(jiǎn)體中文：界面顯示中文，時(shí)間長(zhǎng)了可以再切換回英文，順便提升一下。

• CSS Peek : 允許查看 css ID 和類字符串作為從 html 文件到相應(yīng) CSS 的定義。允許查看和轉(zhuǎn)到定義。鼠標(biāo)點(diǎn)擊ID或者類名，右鍵——Go to definition，就直接定位到當(dāng)前樣式。

• Debugger for Chrome : 在 chrome 瀏覽器或任何其他支持 chrome 調(diào)試器協(xié)議的目標(biāo)中調(diào)試您的 javascript 代碼

• filesize ： show the current file size in the status bar.

• Element UI Snippets : element -ui 的代碼片段，它是用于 web snowffer Studio 的 vue.js 2.0 ui 工具包。

• ESLint : Integrates ESlint JavaScript into VS Code.

• ES6 JavaScript Snippets(片段)
  
  

Code Runner: 代碼一鍵運(yùn)行，支持超過40種語言

代碼運(yùn)行

鍵盤快捷鍵 Ctrl+Alt+N
快捷鍵 F1 調(diào)出 命令面板, 然后輸入 Run Code
在編輯區(qū)，右鍵選擇 Run Code
在左側(cè)的文件管理器，右鍵選擇 Run Code
右上角的運(yùn)行小三角按鈕
更多看這里 Code Runner: 代碼一鍵運(yùn)行

停止代碼運(yùn)行

如果要停止代碼運(yùn)行，也有如下幾種方式：

鍵盤快捷鍵 Ctrl+Alt+M
快捷鍵 F1 調(diào)出 命令面板, 然后輸入 Stop Code Run
在Output Channel，右鍵選擇 Stop Code Run

html:5，然后按住 Tab鍵，即可生成html骨架。

使用命令行啟動(dòng) VS Code

（1）輸入快捷鍵「Cmd + Shift + P 」，選擇install code command：
（2）使用命令行：
code命令：?jiǎn)?dòng) VS Code 軟件
code pathName/fileName命令：通過 VS Code 軟件打開指定目錄/指定文件。

一個(gè)制表符等于的空格數(shù),Tab

cmd+, 打開設(shè)置首選項(xiàng)——設(shè)置

右側(cè)是否顯示代碼的縮略圖

VS Code 會(huì)在代碼的右側(cè)，默認(rèn)顯示縮略圖。Cmd + ,打開首選項(xiàng)，你可以在設(shè)置項(xiàng)里搜索 editor.minimap進(jìn)行設(shè)置，配置項(xiàng)如下：

新建文件后的默認(rèn)文件類型

當(dāng)我們按下快捷鍵「Cmd + N」新建文件時(shí)，VS Code 默認(rèn)無法識(shí)別這個(gè)文件到底是什么類型的，因此也就無法識(shí)別相應(yīng)的語法高亮。
如果你想修改默認(rèn)的文件類型，可以在設(shè)置項(xiàng)里搜索files.defaultLanguage，設(shè)置項(xiàng)如下：

CSS Peek

增強(qiáng) HTML 和 CSS 之間的關(guān)聯(lián)，快速查看該元素上的 CSS 樣式。

Code Spell Checker：?jiǎn)卧~拼寫錯(cuò)誤檢查

這個(gè)拼寫檢查程序的目標(biāo)是幫助捕獲常見的單詞拼寫錯(cuò)誤，可以檢測(cè)駝峰命名。從此告別 Chinglish.

Polacode-2020：生成代碼截圖 【薦】

可以把代碼片段保存成美觀的圖片，主題不同，代碼的配色方案也不同，也也可以自定義設(shè)置圖片的邊框顏色、大小、陰影。
尤其是在我們做 PPT 分享時(shí)需要用到代碼片段時(shí)，或者需要在網(wǎng)絡(luò)上優(yōu)雅地分享代碼片段時(shí)，這一招很有用。

查找某個(gè)函數(shù)在哪些地方被調(diào)用了

比如我已經(jīng)在a.js文件里調(diào)用了foo()函數(shù)。那么，如果我想知道foo()函數(shù)在其他文件中是否也被調(diào)用了，該怎么做呢？
做法如下：在 a.js 文件里，選中foo()函數(shù)（或者將光標(biāo)放置在foo()函數(shù)上），然后按住快捷鍵「Shift + F12」，就能看到 foo()函數(shù)在哪些地方被調(diào)用了，比較實(shí)用。

重構(gòu)

重構(gòu)分很多種，我們來舉幾個(gè)例子。
命名重構(gòu)：
當(dāng)我們嘗試去修改某個(gè)函數(shù)（或者變量名）時(shí)，我們可以把光標(biāo)放在上面，然后按下「F2」鍵，那么，這個(gè)函數(shù)（或者變量名）出現(xiàn)的地方都會(huì)被修改。
方法重構(gòu)：
選中某一段代碼，這個(gè)時(shí)候，代碼的左側(cè)會(huì)出現(xiàn)一個(gè)「燈泡圖標(biāo)」，點(diǎn)擊這個(gè)圖標(biāo)，就可以把這段代碼提取為一個(gè)單獨(dú)的函數(shù)。

.vscode 文件夾的作用

為了統(tǒng)一團(tuán)隊(duì)的 vscode 配置，我們可以在項(xiàng)目的根目錄下建立.vscode目錄，在里面放置一些配置內(nèi)容，比如：

• settings.json：工作空間設(shè)置、代碼格式化配置、插件配置。
  *sftp.json：ftp 文件傳輸?shù)呐渲谩?br> *.vscode目錄里的配置只針對(duì)當(dāng)前項(xiàng)目范圍內(nèi)生效。將.vscode提交到代碼倉庫，大家統(tǒng)一配置時(shí)，會(huì)非常方便。
  
  

live-server

安裝方法 點(diǎn)擊查看

在VS Code終端中輸入live-server,保存代碼，可以用IP的方式運(yùn)行查看當(dāng)前代碼，不需要手動(dòng)刷新頁面，配合分屏，可以說相當(dāng)完美。

清空搜索框，可以看到已安裝過的插件

已安裝的插件

主題設(shè)置，關(guān)鍵詞Theme

在擴(kuò)展選項(xiàng)卡（cmd+shift+x）上，搜索 Material Theme 并安裝它。我更喜歡使用 Palenight 顏色主題，但可以隨意設(shè)置您喜歡的任何主題。