VS code 插件推薦

經歷：

最近sublime和webstorm的序列號頻頻失效，常常在關鍵時候掉鏈子，深有體會，恰好身邊有朋友也有使用VS code，對比atom,sublime,webstorm這些編輯器，我的以爲VS code是一款不錯編輯器，比sublime插件多，比Atom的界面好看，比webstorm更輕量級。可謂聚齊各家優勢於一身，關鍵還 免費 免費 免費，不再用爲編輯器付費而困擾，還有向右大大看齊

Settings Sync

同步配置，再不一樣主機上，一勞永逸

1. 在GitHub上建立gist
2. 在設置裏面配置gist命牌便可

好消息，一鍵下載怎麼多插件想不想學（搞得像推銷同樣，哈哈）

下載Settings Sync插件後重啓 ctrl + shift + p 而後輸入sync 而後選擇高級選項 → 從公共配置裏下載gist 而後在按ctrl + shift + p 輸入sync 選擇下載配置複製這串代碼進去 d3bc45d8096f6bc3d9d46c69ed7052cd OK，完事 （可能還有一些人看不懂，事後傳GIF操做圖，我先溜了）

HTML Snippets

超級實用且初級的 H5代碼片斷以及提示

Atom Keymap

Sublime Text Keymap and Settings Importer

IntelliJ IDEA Keybindings

快捷鍵習慣替換（選一，多個會衝突）

Color-Highlight

在編輯器中高亮顯示顏色。

Guides

代碼的標籤對齊線。

HTML CSS support

css 自動補齊

Npm Intellisense

在import語句中自動完成npm模塊引入的代碼插件

Debugger for Chrome

讓 vscode 映射 chrome 的 debug功能，靜態頁面均可以用 vscode 來打斷點調試

background

設置背景

beautify

在Visual Studio代碼中美化JavaScript，JSON，CSS，Sass和HTML。

Auto Close Tag

自動閉合HTML標籤

###Auto Rename Tag  修改HTML標籤時，自動修改匹配的標籤

Bracket Pair Colorizer

讓括號擁有獨立的顏色，易於區分

Open-In-Browser

因爲 VSCode 沒有提供直接在瀏覽器中打開文件的內置界面，因此此插件能夠打開命令面板選項。

Live Server

用於服務器端頁面的Live Server，如PHP

Indenticator

縮進高亮

IntelliSense for CSS class names

CSS類名智能命名提示

JavaScript (ES6) code snippets

ES6語法提示

Path Intellisense

編輯器中輸入路徑時,自動補全

Git History

查看和搜索git日誌以及圖表和細節。查看文件的前一個副本。查看和搜索歷史

CSS Peek

能在源代碼中的字符串中找到對應的css（類和ID）。顯示在那個css文件裏，還有在第幾行。

Easy WXLESS

微信小程序WXSS文件專用，保存可自動生成並同步編譯成同名css文件

px2rem

px值轉rem

Vue插件

vetur

語法高亮、智能感知、Emmet 注意vue文件代碼格式化，須要在首選項-設置-用戶設置添加這行代碼

"vetur.format.defaultFormatter.html": "js-beautify-html", //vue中HTML部分格式化
複製代碼

Vue 2 Snippets

基於最新的 Vue 官方語法高亮文件添加了語法高亮，而且依據 Vue 2 的 API 添加了代碼補全

vscode-element-helper

Element-UI 庫代碼提醒 主題推薦：淺色調

Brackets Light Pro

Quiet Light

vsc經常使用快捷鍵： 同時打開多個窗口（查看多個項目）

打開一個新窗口： Ctrl+Shift+N 關閉窗口： Ctrl+Shift+W 同時打開多個編輯器（查看多個文件）

新建文件 Ctrl+N 歷史打開文件之間切換 Ctrl+Tab，Alt+Left，Alt+Right 切出一個新的編輯器（最多3個）Ctrl+\，也能夠按住Ctrl鼠標點擊Explorer裏的文件名 左中右3個編輯器的快捷鍵Ctrl+1 Ctrl+2 Ctrl+3 3個編輯器之間循環切換 Ctrl+` 編輯器換位置，Ctrl+k而後按Left或Right 格式調整

代碼行縮進Ctrl+[， Ctrl+] 摺疊打開代碼塊 Ctrl+Shift+[， Ctrl+Shift+] Ctrl+C Ctrl+V若是不選中，默認複製或剪切一整行 代碼格式化：Shift+Alt+F，或Ctrl+Shift+P後輸入format code 修剪空格Ctrl+Shift+X 上下移動一行： Alt+Up 或 Alt+Down 向上向下複製一行： Shift+Alt+Up或Shift+Alt+Down 在當前行下邊插入一行Ctrl+Enter 在當前行上方插入一行Ctrl+Shift+Enter 光標相關

移動到行首：Home 移動到行尾：End 移動到文件結尾：Ctrl+End 移動到文件開頭：Ctrl+Home 移動到後半個括號 Ctrl+Shift+] 選中當前行Ctrl+i（雙擊） 選擇從光標到行尾Shift+End 選擇從行首到光標處Shift+Home 刪除光標右側的全部字Ctrl+Delete Shrink/expand selection： Shift+Alt+Left和Shift+Alt+Right Multi-Cursor：能夠連續選擇多處，而後一塊兒修改，Alt+Click添加cursor或者Ctrl+Alt+Down 或 Ctrl+Alt+Up 同時選中全部匹配的Ctrl+Shift+L Ctrl+D下一個匹配的也被選中(被我自定義成刪除當前行了，見下邊Ctrl+Shift+K) 回退上一個光標操做Ctrl+U 重構代碼

跳轉到定義處：F12 定義處縮略圖：只看一眼而不跳轉過去Alt+F12 列出全部的引用：Shift+F12 同時修改本文件中全部匹配的：Ctrl+F12 重命名：好比要修改一個方法名，能夠選中後按F2，輸入新的名字，回車，會發現全部的文件都修改過了。 跳轉到下一個Error或Warning：當有多個錯誤時能夠按F8逐個跳轉 查看diff 在explorer裏選擇文件右鍵 Set file to compare，而後須要對比的文件上右鍵選擇Compare with 'file_name_you_chose'. 查找替換

查找 Ctrl+F 查找替換 Ctrl+H 整個文件夾中查找 Ctrl+Shift+F

參考文檔： VS Code 使用小技巧