首先整理一些覺得不錯的插件，體驗一段時間后再進(jìn)行調(diào)整。

一、常用插件

1. vscode-icon：為vscode的文件夾目錄添加對應(yīng)的圖標(biāo)，提升用戶體驗。

注：如果安裝后不生效，請前往“文件 — 首選項 — 文件圖標(biāo)主題 — 選擇vscode icons”。

2. jquery Code Snippets：jQuery開發(fā)必備插件，提供代碼片段。

3. view in broswer：通過快捷鍵Ctrl + F1在默認(rèn)瀏覽器中運(yùn)行當(dāng)前的html文件，適合習(xí)慣使用HBuilder和webstorm的開發(fā)者。

4. Path Intellisense：自動補(bǔ)全文件路徑，提高開發(fā)效率。

5. vue插件-vetur：提供Vue的語法高亮、智能感知和Emmet等功能。

6. tortoiseSvn

7. markdown-helper

8. Bracket Pair Colorizer：為括號添加獨(dú)立顏色，方便識別。

9. Debugger for chrome：使vscode映射Chrome的調(diào)試功能，可用于靜態(tài)頁面的斷點(diǎn)調(diào)試。

10. VueHelper：提供Vue的snippet代碼片段。

11. setting sync：將插件保存到gitHub上，方便同步。

12. auto Rename Tag：自動同步修改標(biāo)簽，提高開發(fā)效率。

13. Markdown Preview Enhanced：增強(qiáng)的Markdown預(yù)覽器。

14. Ash Scss Snippets：在編寫Scss時，以css方式提示常用屬性。

二、vscode常用快捷鍵

• 列選擇：ALT + 左鍵
• 命令面板：F1
• 切出新編輯器：Ctrl + 左鍵文件
• 代碼行縮進(jìn)：Ctrl + [、Ctrl + ]
• 文件切換：Ctrl + Tab
• 轉(zhuǎn)到行首/行尾：Home / End
• 轉(zhuǎn)到文件頭/文件尾：Ctrl + Home / Ctrl + End
• 重命名：F2
• 轉(zhuǎn)定義：F12 或 Ctrl + click
• 轉(zhuǎn)定義（切出新編輯器）：Ctrl + Alt + click
• 查看定義：Alt + F12
• 查看引用：Shift + F12
• 上下移動一行：Alt + Up / Alt + Down
• 代碼格式化：Shift + Alt + F

三、將多個項目文件夾展示在一個工作區(qū)

展示成這樣的：

第一步：先打開一個文件夾，添加到工作區(qū)，保存工作區(qū)。

第二步：把另一個文件夾拖拽到工作區(qū)，保存工作區(qū)。

四、一般設(shè)置使用

1. 安裝卸載擴(kuò)展

   1.1 安裝擴(kuò)展

   Mac：cmd+shift+p

   Windows / Linux：ctrl+shift+p

   然后鍵入“ext install”。選擇合適的擴(kuò)展，再按回車鍵。

   1.2 擴(kuò)展推薦

   Mac: cmd+shift+p

   Windows / Linux: ctrl+shift+p

   鍵入“ext”→選擇“Show Extension Recommendations”

   1.3 卸載擴(kuò)展

   Mac: cmd+shift+p

   Windows / Linux: ctrl+shift+p

   鍵入“ext”→選擇“Show Installed Extensions”→點(diǎn)擊extension card右下角的“x”

   2. 編輯器切換

   Mac: cmd+1, cmd+2, cmd+3

   Windows / Linux: ctrl+1, ctrl+2, ctrl+3

   3. 歷史

   使用ctrl+tab來瀏覽歷史。

   3.1 向后瀏覽：

   Mac: ctrl+-

   Windows / Linux: alt+left

   3.2 向前瀏覽：

   Mac: ctrl+shift+up

   Windows / Linux: alt+right

五、常用編輯技巧

1. 括號匹配

   Mac: cmd+shift+

   Windows / Linux: ctrl+shift+

2. 多游標(biāo)選擇

   Mac: opt+cmd+up 或 opt+cmd+down

   Windows: ctrl+alt+up 或 ctrl+alt+down

   Linux: alt+shift+up 或 alt+shift+down

   為當(dāng)前選擇添加游標(biāo)。

3. 復(fù)制一行

   Mac: opt+shift+up 或 opt+shift+down

   Windows / Linux(issue #5363): shift+alt+down 或 shift+alt+up

   4. 縮小/擴(kuò)大選擇

   Mac: ctrl+shift+cmd+left 或 ctrl+shift+cmd+right

   Windows / Linux: shift+alt+left 或 shift+alt+right

   5. 定位特定的一行

   Mac: ctrl+g 或 cmd+p , :

   Windows / Linux: ctrl+g

   6. 撤銷游標(biāo)位置

   Mac: cmd+u

   Windows / Linux: ctrl+u

   7. 上下移動一行

   Mac: opt+up 或 opt+down

   Windows / Linux: alt+up 或 alt+down

   8. 代碼格式化

   Mac: opt+shift+f

   Windows / Linux: shift+alt+f

   9. 代碼折疊

   Mac: shift+cmd+[ 和 shift+cmd+]

   Windows / Linux: ctrl+shift+[ 和 ctrl+shift+]

   10. 選擇當(dāng)前一行

   Mac: cmd+i

   Windows / Linux: ctrl+i

   11. 打開README預(yù)覽

   在markdown文件中使用：

   Mac: shift+cmd+v

   Windows / Linux: ctrl+shift+v

   12. 分割（Side by Side）Markdown編輯和預(yù)覽

   在markdown文件中使用：

   Linux: ctrl+k v

4. 預(yù)覽選擇一個符號

   鍵入alt+f12，或者使用快捷菜單。

   14. 查找所有引用

   選擇一個符號，鍵入shift+f12，或者使用快捷菜單。

   其他配置問題：以下問題需在文件-首選項-設(shè)置中添加

5. scss的css提示問題

   // scss提示 "files.associations": {   "*.css": "scss" }

6. 編輯器縮進(jìn)問題

   // 縮進(jìn)問題 "editor.detectIndentation": false, "editor.tabSize": 2, "editor.insertSpaces": true, // 控制編輯器是否應(yīng)自動設(shè)置粘貼內(nèi)容的格式。格式化程序必須可用并且能設(shè)置文檔中某一范圍的格式。 "editor.formatOnPaste": true, // 保存時設(shè)置文件的格式。格式化程序必須可用，不能自動保存文件，并且不能關(guān)閉編輯器。 "editor.formatOnSave": false,

   針對當(dāng)前文件也可以在右下角狀態(tài)欄中點(diǎn)擊空格，設(shè)置相關(guān)參數(shù)。

參考文檔：

1. VsCode插件安裝及推薦：https://www.php.cn/link/0810699abe09927a03a8b5a0247c6797

2. vscode 插件推薦 – 獻(xiàn)給所有前端工程師（2017.8.18更新）：https://www.php.cn/link/17de40aac6ef19073756e1237c8c0cb0

3. vscode開發(fā)技巧集錦：https://www.php.cn/link/cfa57ce2b96aa179a800c08015a481b7