識別模版引擎
- Apache Velocity ：識別Velocity(vm)
- Art Template Helper：識別artTemplate
點擊路徑跳轉
- Laravel goto view
在瀏覽器中查看
- View In Browser
外觀配置
-
配色：Solarized Dark/Darcula Theme/Atom One Dark Theme
-
圖標：VSCode Great Icons/Material Icon Theme/vscode-icon，給不同類型的文件配置不同的圖標，非常直觀；
-
字體：Fira Code，自從發現並開始使用 Fira Code，我就再也沒多看自其它字體一眼，字體如果比較優雅，尤其是對數學運算符的處理，寫代碼時你真的會感覺在寫詩，哈哈，Fira Code 的安裝過程稍微復雜點，但是效果絕對是值當的；
配色、圖標、字體以及其他外觀配置項具體如下（注意，如果不安裝上述插件，部分配置項如果直接使用是無效的）：
{ "editor.cursorStyle": "block", "editor.fontFamily": "Fira Code", "editor.fontLigatures": true, "editor.fontSize": 16, "editor.lineHeight": 24, "editor.lineNumbers": "on", "editor.minimap.enabled": false, "editor.renderIndentGuides": false, "editor.rulers": [120], "workbench.colorTheme": "Solarized Dark", "workbench.iconTheme": "vscode-great-icons" }
外觀增強
- Guides 縮進參考
與內置的縮進參考線不同，Guides 能夠讓你通過配置項來修改參考線的顏色、樣式、縮進空白的背景色等，如果你願意折騰，甚至能夠配置出類似 Indent Rainbow 那樣風格的參考線。下圖是我使
用 Solarized Dark 主題時參考線的配置：
{ "guides.normal.color.dark": "rgba(91, 91, 91, 0.6)", "guides.normal.color.light": "rgba(220, 220, 220, 0.7)", "guides.active.color.dark": "rgba(210, 110, 210, 0.6)", "guides.active.color.light": "rgba(200, 100, 100, 0.7)", "guides.active.style": "dashed", "guides.normal.style": "dashed", "guides.stack.style": "dashed", }
- TODO Highlight，維護時間稍長的代碼倉庫免不了會有各種 TODO、FIXME、HACK 之類的標記，TODO Highlight 能夠幫我們把這些關鍵詞高亮出來，在你翻閱代碼時非常醒目，就像是在大聲提醒你盡快把他解決掉。支持自定義配置需要高亮的關鍵詞，實際使用比較坑的地方是，TODO、FIXME 之類的后面必須加上冒號，否則無法高亮。
- Bracket Pair Colorizer給嵌套的各種括號加上不同的顏色。
-
JavaScript Atom Grammar：它用Atom編輯器里的JavaScript語法高亮替換VS Code原來的。
-
Babel JavaScript：支持ES201X、React、FlowType以及GraphQL的語法高亮。
-
DotENV：支持
.env文件語法高亮，在你使用Node時會非常有用。
- Highlight Matching Tag，高亮對應的 HTML 標簽和標識出對應的各種括號的功能。
風格檢查
-
ESLint：插件式架構，有多種主流的編碼風格規則集可供選擇，典型的有 Airbnb、Google 等，你甚至可以攢個自己的，按下不表，它的規則在
.eslintrc.json里配置； -
StyleLint，同樣插件式架構的樣式檢查工具，不過我在配置其檢查 react-native 中 styled-components 組件樣式時確實費了不小的功夫，可以單獨寫篇文章了；
-
TSLint：TypeScript 目前不是我的主要編程語言，但也早早的准備好了；
-
MarkdownLint：Markdown 如果不合法，可能在某些場合導致解析器異常，因為 Markdown 有好幾套標准，在不同標准間部分語法支持可能是不兼容的；
除上面列的 Lint 工具之外，非常值得擁有的還有 EditorConfig 插件，幾乎所有主流 IDE 都有支持，我們可以通過簡單的配置文件在不同團隊成員、不同 IDE、不同平台下約定好文件的縮進方式、編碼格式，避免出現混亂，下面是我常用的配置：
[*] end_of_line = lf charset = utf-8 trim_trailing_whitespace = false insert_final_newline = true indent_style = space indent_size = 2 [{*.yml,*.json}] indent_style = space indent_size = 2復制代碼有了風格檢查，自然就會產生按配置好的風格規則做文件格式化的需求，格式化的工具試用了好多，現在還在用的如下：
代碼格式化插件
-
Beatufy：一個jsBeautifier的插件，支持JavaScript、JSON、CSS和HTML。可通過
.jsbeautifyrc文件自定義。它是最流行的格式化工具，目前有230萬的下載量。 -
Prettier Code Formatter：利用Prettier的支持JavaScript、TypeScript和CSS的插件，目前有超過150萬的下載量。
-
JS Refactor：提供許多重構JavaScript代碼的實用方法和操作，例如抽取變量和方法，把現有代碼轉為使用箭頭函數和模板字符串的等價形式，導出函數等。
-
JavaScript Booster：一款了不起的代碼重構工具。擁有需要代碼操作，比如把
var轉為const或者let，去除多余的else語句，合並聲明和初始化。其靈感大量源於WebStorm的啟發。源碼：vscode-javascript-booster。
代碼片段
英文叫做 Snippets，市面上主流的編輯器也都支持，其基本思想就是把常見的代碼模式抽出來，通過 2~3 個鍵就能展開 N 行代碼，代碼片段的積累一方面是根據個人習慣，另一方面是學習社區里
面積累出來的好的編碼模式，如果覺得不適合你，可以改（找個現有的插件依葫蘆畫瓢），我常用的代碼片段插件如下：
-
HTML Snippets，各種 HTML 標簽片段，如果你 Emmet 玩的熟，完全可以忽略這個；
-
Javascript (ES6) Code Snippets，常用的類聲明、ES 模塊聲明、CMD 模塊導入等，支持的縮寫不下 20 種；
-
Javascript Patterns Snippets，常見的編碼模式，比如 IIFE；
自動補全
-
Auto Close Tag，適用於 JSX、Vue、HTML，在打開標簽並且鍵入
</的時候，能自動補全要閉合的標簽； -
Auto Rename Tag，適用於 JSX、Vue、HTML，在修改標簽名時，能在你修改開始（結束）標簽的時候修改對應的結束（開始）標簽，幫你減少 50% 的擊鍵；
-
Path Intellisense，文件路徑補全，在你用任何方式引入文件系統中的路徑時提供智能提示和自動完成；
-
NPM Intellisense，NPM 依賴補全，在你引入任何 node_modules 里面的依賴包時提供智能提示和自動完成；
-
IntelliSense for CSS class names/IntelliSense for CSS, SCSS class names in HTML, Slim and SCSS，CSS 類名補全，會自動掃描整個項目里面的 CSS 類名並在你輸入類名時做智能提示；
-
Emmet，以前叫做 Zen Coding，我發現后，也是愛不釋手，可以把類 CSS 選擇符的字符串展開成 HTML 標簽，VSCode 已經內置，官方介紹文檔參見，你需要做的就是熟悉他的語法，並勤加練習；
Node插件
-
Node.js Modules IntelliSense：提供JavaScript和TypeScript導入聲明時的自動補全。源碼：vscode-node-module-intellisense。
-
View Node Package：利用此插件可快速查看Node包源碼，讓你直接在VS Code中打開Node包的代碼庫或文檔。
-
Search node_modules：通常
node_modules文件夾不在默認的搜索范圍內，這個插件允許你搜索它。源碼：vscode-search-node-modules。
-
Import Cost：顯示導入的包的大小。源碼：import-cost。
功能增強
在效率提升方面除了上面的代碼片段、自動補全之外，我還安裝了下面幾個插件，方便快速的瀏覽和理解代碼，並且在不同項目之間切換。
-
Color Highlight/colorize，識別代碼中的顏色，包括各種顏色格式；
-
Color Info，這個便捷的插件，將為你提供你在 CSS 中使用顏色的相關信息。你只需在顏色上懸停光標，就可以預覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關信息了
-
Bracket Pair Colorizer，識別代碼中的各種括號，並且標記上不同的顏色，方便你掃視到匹配的括號，在括號使用非常多的情況下能環節眼部壓力，編輯器快捷鍵固然好用，但是在臨近嵌套多的情況下卻有些力不從心；
-
fileheader，頂部注釋模板，可定義作者、時間等信息，並會自動更新最后修改時間
-
Project Manager，項目管理，讓我們方便的在命令面板中切換項目文件夾，當然，你也可以直接打開包含多個項目的父級文件夾，但這樣可能會讓 VSCode 變慢；
-
Git Lens， 把 VSCode 結合 Git 的使用體驗優化到了極致，能讓我們在不離開編輯器，不執行任何命令的情況下知曉光標所在位置代碼的修改時間、作者信息等。官方的介紹也是非常的牛叉；
- Local History ：個人感覺很有用 本地代碼的一個保存日志，在沒有git,svn，或者很長時間沒有提交過代碼的情況下，感覺挺實用，再也不怕代碼回滾。
- Git History
功能：
-
查看和搜索歷史
-
查看一個或所有分支的提交歷史
-
查看一個文件的提交歷史
-
查看一個文件一行代碼的提交歷史
-
查看一個作者的提交歷史
-
比較分支
-
比較提交
-
跨提交比較分支
使用：
比較一個分支的當前提交和前一個提交
比較一個分支的當前提交和master分支的最后一個提交
-
Code Outline， 能在單獨窗口中列出當前源代碼中大額各種符號，比如變量名、類名、方法名等，並支持快速跳轉，有點類似於Vim里面大額ctags，翻看你老代碼、開源項目代碼時非常有用；
-
Document This， 能夠一鍵給代碼中的類、函數加上注釋，支持函數聲明、函數表達式、箭頭函數等；
-
jQuery Code Snippets，jquery 重度患者必須品
-
TODO HightLight，這個插件能夠在你的代碼中標記出所有的 TODO 注釋，以便更容易追蹤任何未完成的業務。在默認的情況下，它會查找 TODO 和 FIXME 關鍵字。當然，你也可以添加自定義表達式。在vscode命令行中輸入to do使用
-
Minify，這是一款用於壓縮合並 JavaScript 和 CSS 文件的應用程序。它提供了大量自定義的設置，以及自動壓縮保存並導出為.min文件的選項。它能夠分別通過 uglify-js、clean-css 和html-minifier，與 JavaScript、CSS 和HTML 協同工作。
-
SCSS IntelliSense Preview， SCSS智能提醒，配置強大
-
Version Lens，可以及時看到
package.json內部版本的變動，很實用 -
Output Colorizer ，可以終端日志輸出着色，實用
-
Enki Theme (Material Design Inspired)，當前用的代碼高亮，個人感覺很贊
-
SVG Viewer，此插件在 Visual Studio 代碼中添加了許多實用的 SVG 程序，你無需離開編輯器，便可以打開 SVG 文件並查看它們。同時，它還包含了用於轉換為 PNG 格式和生成數據 URI模式的選項
-
Embrace ，快速的在選中代碼兩邊添加各種引號、括號，不用來回移動光標，不過還是沒有 Vim 中的 Surrounding 插件強大；
-
CSS Peek，使用此插件，你可以追蹤至樣式表中 CSS 類和 ids 定義的地方。當你在 HTML 文件中右鍵單擊選擇器時，選擇“ Go to Definition 和 Peek definition ”選項，它便會給你發送樣式設置的 CSS 代碼。
-
ECMAScript Quotes Transformer，方便在字符串和變量混搭模式（String Concat）的代碼和字符串模板（Template Literals）模式間來回轉換，省去手動的移動光標、修改引號等操作；
-
Code Spell Checker ，強烈推薦，對大部分非英語母語又不想寫出四不像變量名的程序員來說，正確識記拼寫各種單詞還是有不小的挑戰，比模棱兩可時需要去查在線詞典不同的是，這款插件能實時的識別單詞拼寫是否有誤，並給出提示，不少 bug 都是因為拼寫錯誤導致的。
- Live Server，以前使用 Live Server 都是 n p mNode 包管理器 下載的，而且使用的時候需要在控制台手動敲啟動代碼。還好 VSCode 有了相應的插件，現在只需要鼠標點幾下就行了。這個插件基本功能是預覽網頁，但它的特點是：會將網頁在本地服務器上預覽，最重要的是代碼保存之后，瀏覽器自動刷新，有多方便不用我說了吧？
使用方法：
1、在 HTML 文件上右鍵
2、打開 HTML 文件，點擊編輯器右下角 Go Live 按鈕
-
CSScomb，看名字應該可以聯想到它的功能了吧？沒錯，正如其名，一把梳理 CSS 屬性順序的 “梳子”。CSS 屬性書寫順序非常重要，一個合格的前端er 一定會有他遵循的 CSS 書寫順序規則。至於 CSS 屬性書寫順序，這里我
推薦騰訊 AollyTeam，團隊的規范：http://alloyteam.github.io/CodeGuide/#css-declaration-order
下面簡單說下這個插件怎么用。按照插件的文檔說明：
在項目的根目錄下創建一個名為：.csscomb.json / csscomb.json / .csscomb.js / csscomb.js 的文件，然后添加一些配置項。也可以將配置項寫入項目的 package.json 文件中的 csscombConfig
字段。至於添加的配置項，CSScomb提供了示例配置文件：https://github.com/csscomb/csscomb.js/blob/master/config/csscomb.json
其中的 sort-order 就是 CSS 屬性書寫順序，可以按照自己遵循的規范設置，所以我直接替換成了騰訊的。
這個配置文件里面各個字段的作用可以戳這里查看：https://github.com/csscomb/csscomb.js/blob/master/doc/options.md
放一個效果圖：
下面的 content 屬性放在第一個是我的個人習慣，其他的順序都和 AollyTeam 的規范保持一致。
- carbon-now-sh，將代碼分享為圖片（圖片的格式可以為 png 和 svg），最最最重要的是： 圖片逼格敲高 ↓↓↓
- CodeIf，
CodeIf是一個用來給變量命名的網站，你只要輸入你想起的中文名，它就會給你提供很多建議的命名，可能很多人知道有CodeIf這么個網站，其實 VS Code 上有插件哦，是不是
很神奇 :
- Turbo Console Log，快捷添加 console.log，一鍵 注釋 / 啟用 / 刪除 所有 console.log。
簡單說下這個插件要用到的快捷鍵:
ctrl + alt + l 選中變量之后，使用這個快捷鍵生成 console.log
alt + shift + c 注釋所有 console.log
alt + shift + u 啟用所有 console.log
alt + shift + d 刪除所有 console.log
- LeetCode，看到這個名字是不是很熟悉？？？沒錯，它就是有名的刷題網站 LeetCode 啦。今天我是才知道 VS Code 中有插件，果斷入手 (๑•̀ㅂ•́)و✧使用很簡單輸入用戶名和密碼就行了，看圖：
是不是想着自己刷完 LeetCode，拿到大廠 offer 的樣子已經激動地搓手手了呢 ？那就趕緊入手吧！
- Regex Previewer，實時預覽正則表達式的效果。
-
css-auto-prefix，自動添加 CSS 私有前綴。
- change-case，轉換命名風格。
-
vscode-json處理 JSON 文件，用法看圖：
-
HTML Boilerplate，雖然 VSCode 已經內置了一鍵生成 HTML 模板的快捷方式，但這個有另外的用處，看圖：
- Settings Sync，在不同電腦間同步你的插件。安裝了這么多插件，換了台電腦又得重新安裝，所以，這個插件不考慮入手嗎？
這里簡述下這個插件怎么用:首先要想在不同的設備間同步你的插件, 需要用到 Token 和Gist id
Token 就是你把插件上傳到 github 上時, 讓你保存的那段字符，Gist id 在你上傳插件的那台電腦上保存着。
ps: 如果你沒有保存Token，也不知道Gist id，不要慌, 可以這樣獲取:
在你上傳 Sync 設置的 VSCode 里，按 F1, 然后輸入 Sync，選擇 Sync: 高級選項:
然后選擇:
這樣就會進入一個壓縮的文件，然后鼠標右鍵整理一下文檔格式如下:
這樣就能看見你的 Token 了。
接下來就是獲取你的 Gist id:
在 VSCode 里，依次打開: 文件 -> 首選項 -> 設置，然后輸入 Sync 進行搜索:
這樣就獲取到你的 Gist id。
知道了 Token 和 Gist id，就能在不同設備間同步你的 VSCode 插件。
(當然，你也可以把 Token 和 Gist id 分享給別人，這樣別人就能一鍵下載你用的 VSCode 插件!)
彩蛋2：
我的 Token 和 Gist id 分別是：
Token:
4f5135c3c9e7275950f58133bc4b5f75461ceef3
Gist id:
ce3ff9d53df48d738f1e9e86fff55a8c
里面有我用的所有 VSCode 插件 : )
-
ES7 React/Redux/GraphQL/React-Native snippets，React/Redux/GraphQL/React-Native 代碼快捷生成。
- px to rem，像素轉 rem。
-
Minify，壓縮 HTML、CSS、JS 代碼。
