前端vscode必裝的效率插件，你知道嗎？
免費、開源、功能強大，vscode幾乎是前端工程師們必備的輕量級代碼編輯器。
它幾乎支持所有主流的程序語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配等特性，支持插件擴展，并針對網頁開發和云端應用開發做了優化。
其他的代碼編輯器在打開超大文件時可能會產生明顯的卡頓，但vscode幾乎就是秒開。因為打開速度特別快，vscode還經常被用作普通文本閱讀器。
但有時需要輸入的代碼量比較大，在編輯的時候容易出現各種各樣的小bug，檢查修改起來十分費力。這個時候，在vscode中安裝幾款插件，就可以實現輕松改查，一鍵格式對正，提高編程效率。
今天，小渡就為大家推薦8款入門級vscode插件，帶你完成從顏值到功能的全方位提升。話不多說，一起來看看吧！
1、顏值提升利器：Material Theme
MaterialTheme是一款vscode主題插件，通過選擇不同的主題樣式，不僅可以調整代碼編輯器主題顏色，也能同時對代碼顏色進行適配，讓編輯器界面更加清爽和美觀。
目前，MaterialTheme提供了十種主題顏色，在vscode中可實現一鍵安裝，輕松換色。
欲先攻其事，必先利其器。賞心悅目的代碼編輯器界面，也會讓寫代碼的過程變得趣味十足。
2、治好你的“代碼強迫癥”：Prettier
在多人開發同一個項目，合并代碼時，經常會遇到各人代碼風格迥異，換行空格亂七八糟，2格、4格縮進交替上演等等如此令人崩潰的狀況，而單人開發時，一些小錯誤也不可避免，簡直像張東升一樣分分鐘把強迫癥逼上懸崖。
這個時候，就需要Prettier閃亮登場了。Prettier是VSCode代碼格式增強工具，一個配置文件，配合vscode，保存即將代碼全部格式化。代碼格式統一的問題，交給Prettier再合適不過了，輕松治好你的“代碼強迫癥”。
不過Prettier只關心格式化文件（最大長度、混合標簽和空格、引用樣式等），這顯然是不夠的，項目運行中還是需要引入ESlint，二者配合才能讓項目代碼“茁壯成長”。
3、括號連連看：Bracket Pair Colorizer 2
除了各種字母和單詞，編程中最常見的就是各種各樣的括號了。隨著代碼量的增多，{[()]}天團開始瘋狂嵌套，這還讓我們怎么愉快的codereview 或者改代碼？
圖片源自網絡，僅做配文展示
還好有它——BracketPair Colorizer 2！這是一款在vscode上擁有五星好評的王者軟件，為代碼中的各種結對的括號兄弟們提供了顏色高亮等功能。
除此之外，BracketPair Colorizer 2還提供了各種的配置選項，包括顏色的唯一性的設置、顏色模式、設置選中括號時，相應匹配括號的CSS、是否在Gutter中顯示選中的括號、是否顯示ScopeLine等等，可以滿足你對顏色高亮的不同需求。
小伙伴們還猶豫什么！不要睡，安它！
4、html自動重命名插件：Auto Rename Tag
AutoRename Tag的特征是自動重命名配對的HTML/ XML 標簽，也可以在JSX中使用。在settings.json文件中的auto-rename-tag.activationOnLanguage中添加一項以設置擴展名將被激活的語言。默認情況下，它是**[“*”]**，將為所有語言激活。
修改html標簽，AutoRename Tag將自動幫你完成尾部閉合標簽的同步修改。
5、幫助你快速找到css代碼：Css peek
CSSPeek插件擴展了HTML和ejs代碼編輯功能，支持在源代碼中的字符串中找到css/scss/less(類和id)。這在很大程度上是受方括號中稱為CSS內聯編輯器的類似功能的啟發。
這個擴展支持所有正常的符號定義跟蹤功能，但它針對的是css選擇器(類、id和HTML標記)。這包括：
查找：以內聯方式加載css文件并在那里進行快速編輯(Alt+F12)
轉到定義：直接跳轉到css文件或在新編輯器中打開它(F12)
鼠標懸停：用鼠標懸停在符號上顯示定義(Ctrl+ Hover)
此外，如果已經知道類名或ID名，Csspeek還可以在你的html中鼠標指向某個class或者id名稱，按住Ctrl鍵+鼠標左鍵可以直接定位到該名稱的CSS的位置，并快速跳轉到正確的CSS/SCSS/LESS代碼，可以說是大大提高了開發效率。
6、換機不用愁：Settings Sync
Vscode上又一位五星好評大佬級插件——代碼同步工具SettingsSync。它是基于GitHubTokens 和GitHubGist 功能實現，可以一鍵輕松實現上傳下載跨多臺機器同步設置、代碼片段、主題、文件圖標、啟動、鍵綁定、工作區和擴展。
因為Vscode不像webstorm那樣幾乎集成了所有需要的插件，它需要一個個手動安裝。但在插件多了之后，如果更換了設備，來回安裝vscode插件及快捷鍵配置會很麻煩。
這時，用SettingsSync插件就可以輕松解決這個問題，通過配置文件的形式，就可以在多個設備之間同步vscode的配置了，非常好用。
7、圖像預覽工具：Image preview
Imagepreview是一款非常實用的圖像預覽工具。作為一款vscode五星好評的圖片工具，它會根據路徑在鼠標懸停時，在代碼欄顯示圖片及其尺寸，很大程度上節約了我們翻閱圖片的時間與精力。
8、點亮匹配標簽：Highlight Matching Tag
HighlightMatchingTag是一款突出顯示匹配的開始或結束標簽，它的原理其實和instant-rename-tag完全是一樣的，只是綁定了不同的事件hook。
1、 通過 post-command-hook 監聽光標移動事件，如果當前處于 web-mode 模式時繼續處理
2、 如果光標在Tag區域，找到匹配的光標，然后用 Overlay 高亮匹配的標簽
3、 如果光標不在Tag區域，隱藏標簽高亮
在安裝HighlightMatching Tag插件后，可以在用戶設置中自定義配對光標。
除了一些好用的插件之外，還有一些實用的vscode快捷鍵，也可以提高工作效率噢——
Ctrl+ P ：轉到文件，您可以在VisualStudio Code 中移動到打開的文件/文件夾的任何文件。
Ctrl+ ` ：在VSCode 中打開terminal
Alt+ Down：下移一行
Alt+ Up：上移一行
Ctrl+ D：將選定的字符移動到下一個匹配字符串上
Ctrl+ Space：觸發建議
Shift+ Alt + Down：向下復制行
Shift+ Alt + Up：向上復制行
Ctrl+ Shift + T：重新打開最新關閉的窗口
