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+ 白色主題