vscode學習（一）之vscode開發中絕對讓你驚豔的插件！！！(我的在用) 持續更新。。。。

識別模版引擎

• 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複製代碼

有了風格檢查，天然就會產生按配置好的風格規則作文件格式化的需求，格式化的工具試用了好多，如今還在用的以下：

• Prettier，實際上已是代碼格式化的工具標準，支持格式化幾乎全部的前端代碼，而且相似於 EditorConfig 支持用文件來配置格式規則；

• Vetur，格式化 .vue 文件，包括裏面的 CSS、JS，至於模板即 HTML 部分，官方維護者說沒有比較好的工具支持，默認是不格式化的；

• JSHint：基於JSHint的代碼檢測插件。在項目跟目錄下使用.jshintrc文件做爲其配置。

• JavaScript Standard Style：零配置和嚴格規則的代碼檢測，強制使用StandardJS規則。

代碼格式化插件

• 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
  

　  

　　功能：

1. 查看和搜索歷史

2. 查看一個或全部分支的提交歷史

3. 查看一個文件的提交歷史

4. 查看一個文件一行代碼的提交歷史

5. 查看一個做者的提交歷史

6. 比較分支

7. 比較提交

8. 跨提交比較分支

　　使用：

　　比較一個分支的當前提交和前一個提交

　　比較一個分支的當前提交和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 有了相應的插件，如今只須要鼠標點幾下就好了。這個插件基本功能是預覽網頁，但它的特色是：會將網頁在本地服務器上預覽，最重要的是代碼保存以後，瀏覽器自動刷新，有多方便不用我說了吧？

　　  使用方法：

　　  一、在 HTML 文件上右鍵

       

        二、打開 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 代碼。