寫在前面，避免踩雷：
經(jīng)?？吹揭恍┮曨l中開發(fā)的代碼會一鍵生成等，原來都是在用這些插件。彈幕上顯示個emmet,于是去搜索了一下。

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

每個編輯器的語法和插件大同小異，所以你用的是哪一個編輯器就直接搜這個編輯器對應的文章。

VS code 自帶的：

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

插件推薦：

• Code Runner: 代碼一鍵運行，支持超過40種語言

• Guides : 在代碼前面顯示引導線

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

• CSS Peek : 允許查看 css ID 和類字符串作為從 html 文件到相應 CSS 的定義。允許查看和轉到定義。鼠標點擊ID或者類名，右鍵——Go to definition，就直接定位到當前樣式。

• Debugger for Chrome : 在 chrome 瀏覽器或任何其他支持 chrome 調(diào)試器協(xié)議的目標中調(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: 代碼一鍵運行，支持超過40種語言

代碼運行

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

停止代碼運行

如果要停止代碼運行，也有如下幾種方式：

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

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

使用命令行啟動 VS Code

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

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

cmd+, 打開設置首選項——設置

右側是否顯示代碼的縮略圖

VS Code 會在代碼的右側，默認顯示縮略圖。Cmd + ,打開首選項，你可以在設置項里搜索 editor.minimap進行設置，配置項如下：

新建文件后的默認文件類型

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

CSS Peek

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

Code Spell Checker：單詞拼寫錯誤檢查

這個拼寫檢查程序的目標是幫助捕獲常見的單詞拼寫錯誤，可以檢測駝峰命名。從此告別 Chinglish.

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

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

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

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

重構

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

.vscode 文件夾的作用

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

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

live-server

安裝方法 點擊查看

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

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

已安裝的插件

主題設置，關鍵詞Theme

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