1. 程式人生 > >vsCode常用外掛

vsCode常用外掛

一.vue專用。

vetur  目前比較好的Vue語法高亮,語法高亮、智慧感知、Emmet等。

  Vue2程式碼段(包括Vue2 api、vue-router2、vuex2)

第一步:新建模板並儲存

檔案 --> 首選項 --> 使用者程式碼片段 --> 輸入vue,選擇vue.json -->複製 第三步中的模板內容中內容儲存

第二步:新增配置,讓vscode允許自定義的程式碼片段提示出來

// Specifies the location of snippets in the suggestion widget
"editor.snippetSuggestions": "top",
// Controls whether format on paste is on or off
"editor.formatOnPaste": true

第三步: 複製以下程式碼,儲存重啟vscode

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<template>",
            " <div class=\"page\">\n",
            " </div>",
            "</template>\n",
            "<script>",
            "export default {",
            " data() {",
            " return {\n",
            " }",
            " },",
            " components: {\n",
            " }",
            "}",
            "</script>\n",
            "<style scoped type=\"text/css\">",
            "</style>",
            "$2"
        ],
        "description": "Log output to console"
    }
}

第四步:測試是否新增成功

測試方法: 新建vue字尾檔案,輸入vue,按下tab鍵,OK。缺點是:無法像sublime一樣新建一個vue檔案就可以自動帶上對應的模板。

二.react專用。

 react的程式碼提示,如componentWillMount方法可以通過cwm直接獲得。

React Native Tools 新增對 React Native專案的支援,快速書寫es6以及jsx。

 對使用了css modules的jsx標籤的類名補全和跳轉到定義位置。

react的jsx中補全html標籤,在首選項的設定中加入

 "emmet.includeLanguages": {
"javascript": "javascriptreact"
},

三.CSS。

cssrem — px值轉rem

CSS Peek  使用此外掛,你可以追蹤至樣式表中 CSS 類和 ids 定義的地方。當你在 HTML 檔案中右鍵單擊選擇器時,選擇“ Go to Definition 和 Peek definition ”選項,它便會給你傳送樣式設定的 CSS 程式碼。

Color Info 這個便捷的外掛,將為你提供你在 CSS 中使用顏色的相關資訊。你只需在顏色上懸停游標,就可以預覽色塊中色彩模型的(HEX、 RGB、HSL 和 CMYK)相關資訊了。

Sass 語法高亮,自動提示功能

— scss/sass檔案儲存可自動生成並同步編譯成同名css檔案

— 微信小程式WXSS檔案專用,儲存可自動生成並同步編譯成同名css檔案

四.Git。

Git Blame 在狀態列顯示當前行的Git資訊Git History(git log) 檢視git logGitLens 顯示檔案最近的commit和作者,顯示當前行commit資訊

五.其他。

Icon Fonts 這是一個能夠在專案中新增圖示字型的外掛。該外掛支援超過 20 個熱門的圖示集,包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。

Auto Rename Tag自動重新命名標籤,配合上面的外掛使用,基本上能趕上IDEA系的功能了。

Bracket Pair Colorizer 每一對括號用不同顏色區別 (括號強迫症必備),讓括號擁有獨立的顏色,易於區分。可以配合任意主題使用。

執行選中程式碼段(支援大量語言,包括Node)

— 滑鼠移到路徑名按住ctrl可開啟檔案

npm — 執行npm命令

Open-In-Browser  由於 VSCode 沒有提供直接在瀏覽器中開啟檔案的內建介面,所以此外掛在快捷選單中添加了在預設瀏覽器檢視檔案選項,以及在客戶端(Firefox,Chrome,IE)中開啟命令面板選項

HTML Boilerplate 通過使用 HTML 模版外掛,你就擺脫了為 HTML 新檔案重新編寫頭部和正文標籤的苦惱。你只需在空檔案中輸入 html,並按 Tab 鍵,即可生成乾淨的文件結構。Prettier Prettier 是目前 Web 開發中最受歡迎的程式碼格式化程式。安裝了這個外掛,它就能夠自動應用 Prettier,並將整個 JS 和 CSS 文件快速格式化為統一的程式碼樣式。如果你還想使用 ESLint,那麼還有個 Prettier – Eslint 外掛。

Minify 這是一款用於壓縮合並 JavaScript 和 CSS 檔案的應用程式。它提供了大量自定義的設定,以及自動壓縮儲存並匯出為.min檔案的選項。它能夠分別通過 uglify-js、clean-css 和 html-minifier,與 JavaScript、CSS 和 HTML 協同工作。

Path Intellisense 自動路勁補全,預設不帶這個功能的。

fileheader  頂部註釋模板,可定義作者、時間等資訊,並會自動更新最後修改時間。

ESLint 是一個開源的 JavaScript 程式碼檢查工具,使用 Node.js 編寫,由 Nicholas C. Zakas 於 2013 年 6 月建立。ESLint 的初衷是為了讓程式設計師可以建立自己的檢測規則,使其可以在編碼的過程中發現問題而不是在執行的過程中。ESLint 的所有規則都被設計成可插入的,為了方便使用,ESLint 內建了一些規則,在這基礎上也可以增加自定義規則。

第六.主題

One Dark Pro  源於Atom,老版本的Atom One Dark主題可以扔了。

One Monokai 

Tiny Light 類似HBuilder淺綠色風格主題。

Light 或 Light+ 白色主題