本篇文章給大家詳細介紹一下vscode中前端常用插件安裝及配置。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。
整理這篇文章的契機呢，是因為最近給小伙伴安利了幾款個人覺得好用的 vscode 插件，結果有些插件他安裝了不會配置。剛好趁最近有空，把自己常用的插件和配置整理出來分享一下。【推薦學習：《vscode》】
安裝 Visual Studio Code
vscode下載安裝，安裝完成后使用快捷鍵ctrl + shift + x搜索插件。
界面優化
1、漢化
安裝 vscode 插件，完成后重啟 VS Code 即可。
立即學習“前端免費學習筆記（深入）”；
2. 背景圖片
為你的編輯器添加一個背景圖片（支持 gif 格式）。
安裝 vscode 插件，完成后重啟編輯器，VS Code 會有如下提示，忽略即可。
這是默認的效果：
如果想修改為自定義的圖片，可在settings.json中添加如下修改：
{ ????"background.useDefault":?false,?//?是否使用默認圖片 ????"background.customImages":?[????//?自定義圖片地址，可使用網絡圖片 ????????"C:/Users/images/1.png", ????????"C:/Users/images/2.png", ????????"C:/Users/images/3.png" ????], ????"background.style":?{???????????//?css?樣式 ????????"opacity":?0.4 ????} }
保存后 restart vscode 即可生效。
3. 注釋美化
為不同類型的代碼注釋添加不同顏色加以區分。支持各種文件類型的注釋。
安裝 vscode 即可。
默認的效果和上圖會有所區別，我們可以在settings.json中自行配置關鍵字、顏色、樣式。
保存后 restart vscode 即可生效。
"better-comments.tags":?[ ????{ ????????"tag":?"fix",?????????????????????//?關鍵字（不區分大小寫），Better?Comments?檢測到關鍵字后才會將這行注釋轉換樣式 ????????"color":?"#FF2D00",???????????????//?文字顏色 ????????"strikethrough":?false,???????????//?是否顯示刪除線 ????????"underline":?false,???????????????//?是否顯示下劃線 ????????"backgroundColor":?"transparent",?//?背景顏色 ????????"bold":?false,????????????????????//?是否加粗 ????????"italic":?false???????????????????//?是否啟用斜體文字 ????}, ????...多個關鍵字配置 ]
4. 括號上色
為代碼中成對的括號設置不同的顏色高亮，便于閱讀。
安裝 vscode 插件（相較于 Bracket Pair Colorizer，Bracket Pair Colorizer 2 的性能更優）。
配置的話，可以在settings.json中加上這一行：”bracket-pair-colorizer-2.showBracketsInGutter”: true，意思是在行號前顯示配對的括號，方便定位。其它設置就沒啥必要了。修改了setting.json后記得要restart vscode哦！
5. 顯示文件大小
安裝 vscode 插件后，在狀態欄顯示當前文件的大小。
6. 縮進高亮
高亮顯示文本前面的縮進，交替使用四種不同的顏色。
安裝插件 vscode
配置：
{ ????//?高亮顏色 ????"indentRainbow.colors":?[ ????????"rgba(40,140,160,0.3)", ????????"rgba(40,160,140,0.3)", ????????"rgba(60,140,140,0.3)", ????????"rgba(60,160,160,0.3)" ????], ????//?tabSize?錯誤時的高亮顏色 ????"indentRainbow.errorColor":?"rgba(128,32,32,0.6)", ????//?混用空格和?tab?縮進時的高亮顏色 ????"indentRainbow.tabmixColor":?"rgba(128,32,96,0.6)", ????//?需要高亮顯示的文件類型 ????"indentRainbow.includedLanguages":?[ ????????"vue", ????????"html" ????], }
7. 文件圖標
vscode 插件，安裝即可。
語言支持
8. VUE 支持
vscode 插件提供 Vue 語法高亮，代碼片段，自動補全，格式化代碼等功能。
9. SVG
vscode 插件提供語法高亮，自動補全，文檔提示，顏色選擇，URL 跳轉，ID 快速修改，SVG 預覽與導出 PNG 等功能。
代碼片段
10. 30-seconds-of-code
基于 vscode 庫的插件，提供一些簡單實用的 JS 方法。你不僅可以在項目中使用，同時它也是一份不錯的學習資料。
安裝完成后，在編輯器中 輸入 30s 關鍵字，將會出現代碼提示，選中需要的 snippets 后，按下 Tab 鍵即可。官方文檔中建議使用”editor.snippetSuggestions”: “top”設置，意思是控制代碼片段與其他建議排列的位置。這個看個人需求，不設置也是可以的。我感覺默認的 “inline” 要好用些。
11. vscode-element-helper
一款基于 ElementUI 的自動補全插件。
12. HTML5 模板
提供了在所有web應用程序中使用的標準HTML樣板代碼。
安裝 vscode 插件，在.html文件中輸入html5，選擇提示的html5-boilerplate，將生成如下的模板：
nbsp;html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!-->??<!--<![endif]--> ?? ????<meta> ????<meta> ????<title></title> ????<meta> ????<meta> ????<link> ?? ?? ????<!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p> <![endif]--> ???? ????<script></script> ??
項目管理
13. 統一代碼風格
vscode 有助于維護跨多個編輯器和IDE從事同一項目的多個開發人員的一致編碼風格。
在項目根目錄下新建一個.editorconfig文件，該文件用來定義項目的編碼規范，并且其優先級比編輯器自身的設置要高。安裝 vscode 插件后，保存/格式化文件時.editorconfig中的配置將應用到編輯文件中。注意，格式化規則一定要和各種 lint 規則保持一致。
#?如果未指定?root?=?true，則?EditorConfig?將繼續在項目外部查找?.editorconfig?文件。 root?=?true #?設置文件字符集 charset?=?utf-8 #?以下配置適用文件類型，可對不同文件類型設置不同規則 [*.{js,jsx,ts,tsx,vue,scss,json}] #?保存時將換行符轉換為?LF end_of_line?=?lf #?縮進格式 indent_style?=?space indent_size?=?2 #?保存時自動刪除行尾的空白字符 trim_trailing_whitespace?=?true #?保存時在文件末尾插入空白行 insert_final_newline?=?true
14. ESLint
代碼格式檢查工具，安裝 vscode 插件之前，需要運行npm install -g eslint。
在項目根目錄添加規則文件.eslintrc.js，插件將根據其中的規則檢查代碼，具體配置請看vscode，以下是一個簡單示例：
module.exports?=?{ ??env:?{ ????browser:?true, ????commonjs:?true, ????es6:?true, ????node:?true ??}, ??extends:?[ ????'standard' ??], ??globals:?{ ????Atomics:?'readonly', ????SharedArrayBuffer:?'readonly' ??}, ??parserOptions:?{ ????ecmaVersion:?11 ??}, ??rules:?{?} }
如果不想讓工具檢查某個文件或某行代碼，可在代碼前寫入注釋/* eslint-disable */禁用。
如果需要忽略多個文件的 lint 檢查，可在項目根目錄創建一個.eslintignore文件，寫在該文件內的目錄/文件將被忽略。
build node_modules doc
在settings.json中加入下面的配置，保存時嘗試修復錯誤：
{ ????"editor.codeActionsOnSave":?{ ????????"source.fixAll.eslint":?true ????} }
有這些配置基本上就夠了，Prettier什么的沒啥必要。
15. Git 可視化
VS Code 中的 SourceTree。
安裝 vscode 插件，使用快捷鍵Shift + Alt + G打開 Git Graph 頁面。
16. Git 日志
一個強大的 Git 日志管理工具 vscode
安裝完成后，每一行代碼旁邊都會顯示日志，默認格式為：提交者 + 修改日期 + commit message
17. 項目切換
保存項目目錄，方便切換不同項目。
安裝 vscode 插件。完成后多出一個 Project Manager 活動欄，已保存的項目都在這里面進行管理。常用命令如下：
18. npm 管理
vscode 擴展支持運行 package.json 文件中定義的 npm 腳本，并支持根據 package.json 中定義的依賴項驗證已安裝的模塊。
當 package.json 中的 modules 出現以下情況時，插件會提示警告：
- 在 package.json 中定義了卻沒有安裝
- 已安裝模塊，但是卻沒有在 package.json 中定義
- 已安裝模塊的版本號與 package.json 中定義的版本號不一致
實用工具
19. 書簽管理
為你的項目添加書簽管理功能。
安裝 vscode 插件。安裝完成后，活動欄會多出一個“書簽”菜單，這里會列出當前項目下的所有書簽。
-
添加/刪除書簽：
- 快捷鍵Ctrl + Alt + K
- 使用鼠標右鍵菜單，選擇“書簽：開關”
-
書簽間跳轉：
- 上一個Ctrl + Alt + J。或者鼠標右鍵菜單，選擇“書簽：跳至上一個”
- 下一個Ctrl + Alt + L。或者鼠標右鍵菜單，選擇“書簽：跳至下一個”
-
列出所有書簽：
- 活動欄查看
- F1 調出搜索框，搜索Bookmarks: List
-
為書簽添加描述：在活動欄中找到書簽，點擊編輯按鈕添加描述信息。
20. 內置瀏覽器
在 VSCode 內部的 Chrome 瀏覽器。
安裝 vscode 插件，完成后左側活動欄會多出一個 “Browser Preview” 菜單，點擊菜單即可在編輯器中打開一個瀏覽器標簽頁。使用此插件的前提是：你必需先安裝 Google Chrome 瀏覽器。
settings.json中添加”browser-preview.startUrl”: “http://localhost:8080″可設置默認打開的頁面地址。
如果安裝了 vscode 插件，在.vscode/launch.json中寫入以下配置，即可在Browser Preview中啟用調試。
{ ??"version":?"0.2.0", ??"configurations":?[ ????{ ??????"type":?"browser-preview", ??????"request":?"attach", ??????"name":?"Browser?Preview:?Attach" ????}, ????{ ??????"type":?"browser-preview", ??????"request":?"launch", ??????"name":?"Browser?Preview:?Launch", ??????"url":?"http://localhost:8080" ????} ??] }
按下F5運行調試，可能會出現如下錯誤：
只需要先打開一個 Browser Preview 窗口，再運行調試即可。
21. 一鍵切換命名格式
快速更改當前選擇或當前單詞的大小寫。
安裝完成后，運行對應的命令即可：
- Change Case Commands: 列出所有更改案例命令，如果只有一個單詞被選中，將附帶預覽功能
- Change Case Camel: 改為駝峰格式，用下一個單詞的首字母大寫表示的分隔符轉換為字符串
- Change Case Constant: 轉換為大寫字母，下劃線分隔字符串
- Change Case Dot: 轉換為小寫，句點分隔的字符串
- Change Case Kebab: 轉換為小寫字母，用 “-” 分隔的字符串
- Change Case Lower: 轉換為小寫字符串
- Change Case LowerFirst: 轉換為首字母小寫的字符串
- Change Case No: 轉換不帶任何大小寫的字符串（小寫字母，空格分隔）
- Change Case Param: 轉換為小寫字母，用 “-” 分隔的字符串
- Change Case Pascal: 首字母大寫的駝峰格式
- Change Case.Path: 轉換為小寫、斜杠分隔的字符串
- Change Case Sentence: 轉換為小寫（第一個單詞首字母大寫）的空格分隔的字符串
- Change Case Snake: 轉換小寫，下劃線分隔的字符串
- Change Case Swap: 轉換為字符串，每個字符大小寫顛倒
- Change Case Title: 轉換為以空格分隔的字符串，每個單詞的首字符大寫
- Change Case Upper: 轉換為大寫字符串
- extension.changeCase.upperFirst: 轉換為首字母大寫的字符串
22. 代碼運行
在 VS Code 中快速運行代碼
安裝 vscode 后，可直接運行當前文件/當前選中的代碼。運行結果會展示在“輸出”面板中。
Crtl + Alt + N 運行代碼
Ctrl + Alt + M 停止運行
Ctrl + Alt + L 選擇運行代碼的語言
如果想運行 TS 代碼，需要安裝ts-node
npm?install?-g?ts-node
23. 拼寫檢查
如果你的項目中出現了類似userInfor,bulid,chorme這樣的詞匯，那么你需要這個插件。如果你不明白我為什么這樣說，那么你絕對離不開這個插件。
vscode 這個插件可以檢查代碼中的拼寫錯誤，在拼寫錯誤的單詞下會有下劃線提示。在“問題”面板中會列出項目中所有的拼寫錯誤。
但是有些詞匯我們并不希望它提示錯誤，比如readonly這種網絡詞匯。那么我們可以在settings.json中添加如下設置：
{ ????"cSpell.userWords":?["readonly",?...otherWords] }
當然，你也可以通過在文件中添加注釋來禁用檢查：
- /* cSpell:disable */
- /* spell-checker: disable */
- /* spellchecker: disable */
- /* cspell: disable-line */
- /* cspell: disable-next-line */
啟用檢查：
- /* cSpell:enable */
- /* spell-checker: enable */
- /* spellchecker: enable */
24. 快捷搜索
在 VS Code 中打開默認瀏覽器并搜索關鍵字，可編輯搜索引擎。
vscode 插件安裝完成后，使用快捷鍵Ctrl + Alt + F即可使用。但是，為了使用起來更方便，我們來修改一點點設置：
首先就是修改快捷鍵，先后按下Ctrl + K,Ctrl + S打開快捷鍵設置頁面，搜索codebing.search將鍵綁定改為 Alt + F（個人習慣）。
在說明文檔里可以看到，作者提供了如下默認配置，如果有需要可以自行修改，至于它有什么用，請往下看。
{ ????"codebing.searchProviders":?{ ????????"b":?"https://www.bing.com/search?q={query}", ????????"g":?"https://www.google.com/search?q={query}", ????????"yh":?"https://search.yahoo.com/search?p={query}", ????????"ddg":?"https://duckduckgo.com/?q={query}", ????????"wiki":?"https://en.wikipedia.org/wiki/{query}", ????????"yt":?"https://www.youtube.com/results?search_query={query}", ????????"twit":?"https://twitter.com/search?q={query}", ????????"gh":?"https://github.com/search?utf8=?&q={query}", ????????"so":?"https://stackoverflow.com/search?q={query}" ????} }
然后打開settings.json，添加配置項：”codebing.defaultProvider”: “so”，這里的值就是上面配置的搜索引擎的快捷方式。
可以考慮再添加這條配置：”codebing.noInputBoxIfTextSelected”: true，意思是當使用搜索命令時存在鼠標選中文本時，不再彈出搜索框，而是直接搜索鼠標選中內容。
現在就可以愉快的使用啦：
- 沒有選中文本時，按下快捷鍵Alt + F，在彈出的輸入框中輸入內容，回車。
- 在輸入框中可以使用快捷方式 + 空格指定搜索引擎。比如輸入“g vue”將使用谷歌搜索 vue。
- 鼠標選中文本，按下快捷鍵，直接搜索選中內容。
25. 命名神器
如果你有命名困難，可以嘗試一下 vscode。
在使用Codelf插件時，發現該插件只是在默認瀏覽器打開了這個網址（vscode）并搜索關鍵字。所以我們完全可以不安裝這個插件，通過配置CodeBing實現相同的效果。
在settings.json中添加如下設置：
{ "codebing.searchProviders": { "c": "https://unbug.github.io/codelf/#{query}" } }
然后使用快捷方式 + 空格指定搜索引擎的方式（例如：輸入“c 用戶”）發起Codelf搜索。
同樣的，添加以下設置使用百度翻譯功能：
{ "codebing.searchProviders": { "tec": "https://fanyi.baidu.com/#en/zh/{query}", "tce": "https://fanyi.baidu.com/#zh/en/{query}" } }
26. CSS 自動排序
為 CSS 屬性排序, 讓我們的代碼更加簡潔優雅。
安裝 vscode 插件。在settings.json中添加配置：
{ ????"csscomb.formatOnSave":?true,?//?保存時自動格式化 ????"csscomb.preset":?"csscomb"?//?格式化模板 }
一定要配置”csscomb.preset”，它的默認值為{},如果不做配置，插件使用無效。官方提供 3 種不同配置（vscode，vscode 和 vscode）,也可自定義一份配置文件。
使用官方配置時，發現排版有點問題，排序后如下圖所示：
因此需要對官方配置稍作修改。這里以csscomb為例。
- 首先刪除settings.json中”csscomb.preset”: “csscomb”這行配置，然后在項目根目錄新建一個csscomb.json文件（或者也可以直接設置”csscomb.preset”的值為你的自定義 JSON 對象）。
- 復制官方配置文件內容到csscomb.json。
- 修改如下：
//?修改縮進格式 +?"block-indent":?"??", -?"block-indent":?"????", //?花括號前不換行 +?"space-before-opening-brace":?"?", -?"space-before-opening-brace":?" ", //?CSS?聲明之間插入換行符 +?"space-between-declarations":?" ",
然后再次保存我們的 CSS 文件即可。
27. 文件預覽
在 VS Code 中，將鼠標移至文件路徑上并點擊，可以在新的標簽頁打開對應的文件。而安裝了 vscode 后，可以打開一個文件預覽窗口，預覽文件內容，并支持文件編輯。
將鼠標光標放到文件路徑上，使用快捷鍵F12打開預覽窗口，雙擊預覽窗口在新標簽頁打開。
28. vim
使用 vscode 插件，在 VS Code 中使用 vim。
常用配置（settings.json）：
1、vim.handleKeys 控制某個按鍵/按鍵組合是否由 VSCodeVim 擴展處理。比如，啟用 vim 擴展后ctrl + F快捷鍵被替換為向下翻頁，如果想要保留原有的搜索功能，可設置此項：
??"vim.handleKeys":?{ ????"<c-f>":?false }</c-f>
2、”vim.startInInsertMode”: true 以插入模式而不是普通模式啟動。
3、”vim.visualstar”: true 在visual模式下，按下 * 鍵或者 # 鍵搜索當前選中內容。
4、”vim.useSystemClipboard”: true 將 vim 插件復制的內容同步到系統剪切板，比如yy，dd命令。
5、”vim.hlsearch”: true 高亮顯示與當前搜索匹配的所有文本。
6、”vim.insertModeKeyBindings”/”vim.normalModeKeyBindings”/”vim.visualModeKeyBindings” insert 模式 / normal 模式 / visual 模式下的按鍵綁定。
"vim.insertModeKeyBindings":?[ ????//?insert?模式下，連按兩下?j?鍵進入?normal?模式。 ????{ ??????"before":?["j",?"j"], ??????"after":?["<esc>"] ????} ??], ??"vim.normalModeKeyBindingsNonRecursive":?[ ????//?normal?模式，先后按下?<leader>，d?鍵，等同于?dd?命令（剪切當前行）。 ????{ ??????"before":?["<leader>",?"d"], ??????"after":?["d",?"d"] ????} ??]</leader></leader></esc>
7、”vim.leader”: “
8、”vim.easymotion”: true 啟用 vim-easymotion 插件。
9、”editor.lineNumbers”: “relative” 將行號顯示為與光標相隔的行數。
29. 工作時間統計
vscode 這款插件可以自動追蹤分析你寫代碼的時長。安裝完成后，訪問 vscode 注冊一個賬號，在設置 – 賬戶中復制你的Secret API Key，回到 VS Code，按下F1搜索WakaTime: Api Key，輸入Secret API Key保存即可。訪問 vscode 查看統計圖表。
30. 查看 CSS 定義
vscode ，追蹤至樣式表中 CSS class 和 id 定義。
31. class 智能提示
vscode 讓 html 標簽上寫 class 時，智能提示當前項目所支持的樣式。
32. HTML 標簽名修改
vscode 自動完成另一側標簽的同步修改。支持在 .vue .js .md 等文件中修改。
33. 包裹標簽
在選中文本外包裹一層 HTML 標簽（默認為 p 標簽，可配置）。
安裝 vscode 插件，選中文本后使用快捷鍵Alt + W即可創建一個外層標簽。如果不想使用默認的 p 標簽，可自行更改配置：”htmltagwrap.tag”: “p”。
34. JS 代碼重構
當在 JavaScript（或 TypeScript / Flow）中編輯代碼時，vscode 提供了各種代碼操作（快速修復）。
文件 – 首選項 – 鍵盤快捷方式 – 搜索editor.action.quickFix，配置成你習慣的快捷鍵。
35. jsdoc 注釋
一鍵生成 jsdoc 風格的函數注釋。
安裝 vscode 插件后，選中一個函數的參數, ctrl + shift + p 后輸入gen jsdoc并選擇gen jsdoc命令, 即可生成 jsdoc 風格的函數注釋。
文件 – 首選項 – 鍵盤快捷方式 – 搜索extension.genJSDoc，配置成你習慣的快捷鍵。
添加配置”jsdoc.author”: “Author”，將@author設置成你的名稱。
36. jsdoc 預覽
在瀏覽器中預覽基于 jsdoc 生成的文檔。
安裝 vscode 插件，ctrl + shift + P 后輸入preview jsdoc并選擇Preview JSDoc: Open Browser命令。
37. open in browser
在瀏覽器中打開頁面文件。
安裝 vscode 插件，打開頁面文件，使用快捷鍵Alt + B在默認瀏覽器中打開當前頁面，Shift + Alt + B選擇瀏覽器打開。
38. 接口測試
vscode 允許您發送 HTTP 請求并直接在 VS Code 中查看響應。
安裝插件后，新建一個.http或.rest文件，然后編寫你的請求代碼，點擊 Send Request，或者右鍵選擇 Send Request，或者直接用快捷鍵Ctrl + Alt + R執行。
發送請求后，會在底部狀態欄顯示Waiting狀態，鼠標單擊Waiting終止請求。
同一個文件中的多個請求使用###分隔。
-
發送請求（注意不同 Content-Type 時的傳參方式）：
GET?http://dummy.restapiexample.com/api/v1/employees?HTTP/1.1 Content-Type:?application/json
POST?http://dummy.restapiexample.com/api/v1/create?HTTP/1.1 Content-Type:?application/json { ??"name":?"seyin", ??"age":?"26" }POST?http://api.apishop.net/common/disease/queryDiseaseListByKeyword Content-Type:?application/x-www-form-urlencoded apiKey=HSE5UZLe81xxxxxxxxxxxxxxxxxxx49bb4c46c5ae89963 &page=1 &pageSize=10 &keyword=感冒
POST?https://example.com/comments?HTTP/1.1 Content-Type:?application/xml Authorization:?token?xxx
-
變量
-
環境變量
在settings.json中設置環境變量：
{ ??"rest-client.environmentVariables":?{ ????"$shared":?{}, ????"local":?{ ??????"host":?"http://localhost:8080", ??????"token":?"test?token" ????}, ????"prod":?{ ??????"host":?"http://dummy.restapiexample.com", ??????"token":?"prod?token" ????} ??} }使用快捷鍵Ctrl + Alt + E切換不同環境。
使用環境變量：
GET?{{host}}/api/v1/employees?HTTP/1.1 Content-Type:?application/json -
文件變量
聲明方式為@key = value，使用方式為{{key}}。并且像 JS 一樣存在變量提升。
@baseUrl?=?{{host}}/api/v1 @contentType?=?application/json @name?=?seyin @age?=?26 ###?API?TEST #?創建用戶 POST?{{baseUrl}}/create?HTTP/1.1 content-type:?{{contentType}} { ??"name":?"{{name}}", ??"age":?"{{age}}" } -
請求變量
用于引用某一個 Request 的數據，聲明方式為# @name requestName，使用方式為{{requestName.(response|request).(body|headers).(*|JSONPath|XPath|Header Name)}}。
@baseUrl?=?{{host}}/api/v1 @contentType?=?application/json @name?=?seyin @age?=?26 ###?API?TEST #?創建用戶 #?@name?createUser POST?{{baseUrl}}/create?HTTP/1.1 content-type:?{{contentType}} { ??"name":?"{{name}}", ??"age":?"{{age}}" } ###?刪除創建的用戶 @id?=?{{createUser.response.body.data.id}} DELETE?{{baseUrl}}/delete/{{id}}?HTTP/1.1 -
系統變量
系統變量提供了一組預定義的變量，格式為{{$variableName}}。這里列舉部分常用的系統變量，更多內容參考vscode。
- {{$guid}} 唯一標識
- {{$dotenv [%]variableName}} 返回.http文件同一目錄中的.env文件中的環境變量值（聲明方式為variableName = value）
- {{$randomInt min max}} 返回介于 min（包括）和 max（不包括）之間的隨機整數
- {{timestamp [offset option]}} 添加 UTC 時間戳。您甚至可以根據當前時間指定任何日期時間，格式為{{timestamp number option}}，例如，表示3小時前，只需{{$timestamp -3 h}};要表示后天，只需{{$timestamp 2d}}。
- {{datetime rfc1123|iso8601|”custom format”|’custom format’ [offset option]}} 添加 ISO8601，RFC1123 或自定義顯示格式的日期時間字符串。 您甚至可以指定相對于當前日期的日期時間，類似于時間戳，例如：{{datetime iso8601 1 y}}，以 ISO8601 格式表示一年后的日期。 如果指定自定義格式，則將其用單引號或雙引號引起來，例如：{{$datetime “DD-MM-YYYY” 1 y}}。 日期是使用 Day.js 格式化的。
POST?{{baseUrl}}/create?HTTP/1.1 content-type:?application/json { ??"name":?"{{$dotenv?USERNAME}}", ??"guid":?"{{$guid}}", ??"age":?"{{$randomInt?10?30}}", ??"date":?"{{$datetime?iso8601?1?y}}" }
-
-
cURL Request
REST Client 支持發送 cURL 請求，也可以將 vscode Request 一鍵轉換為 cURL 格式（右鍵選擇 Copy Request As cURL）。
?curl?--request?POST?--url?http://api.apishop.net/common/disease/queryDiseaseListByKeyword?--header?'content-type:?application/x-www-form-urlencoded'?--header?'user-agent:?vscode-restclient'?--data?page=1?--data?pageSize=10?--data?'keyword=感冒'
- -X, –request
- -L, –location, –url
- -H, –header(no @ support)
- -I, –head
- -b, –cookie(no cookie jar file support)
- -u, –user(Basic auth support only)
- -d, –data, –data-ascii,–data-binary
-
生成代碼片段
光標位于某一請求上時，右鍵選擇 Generate Code Snippet 或使用快捷鍵Ctrl + Alt + C，即可生成當前請求的代碼片段。支持多種語言。
39. TODO 管理
在工作區中搜索并高亮顯示注釋標簽（例如 TODO 和 FIXME ），在活動欄 TODOs 窗口管理項目中的注釋標簽。
安裝 vscode 插件，初始設置下效果如下：
自定義設置：
{ ??"todo-tree.highlights.customHighlight":?{?//?為每個標簽設置樣式 ????"TODO":?{ ??????"icon":?"tasklist",?//?圖標 ??????"foreground":?"#ff8c00",?//?文字顏色 ??????"background":?"transparant",?//?背景顏色 ??????"iconColour":?"#ff8c00"?//?圖標顏色 ????}, ????"FIXME":?{ ??????"icon":?"alert", ??????"foreground":?"white", ??????"background":?"#FF2D00", ??????"iconColour":?"#FF2D00" ????}, ????"BUG":?{ ??????"icon":?"bug", ??????"foreground":?"white", ??????"background":?"#FF2D00", ??????"iconColour":?"#FF2D00" ????}, ????"NOTE":?{ ??????"icon":?"note", ??????"foreground":?"#98c379", ??????"background":?"transparant", ??????"iconColour":?"#98c379" ????}, ????"HACK":?{ ??????"icon":?"beaker", ??????"iconColour":?"#abb2bf" ????}, ????"XXX":?{ ??????"icon":?"question", ??????"foreground":?"#3498DB", ??????"background":?"transparant", ??????"iconColour":?"#3498DB" ????} ??}, ??"todo-tree.highlights.defaultHighlight":?{?//?全局樣式配置 ????"type":?"text"?//?高亮類型?tag?text?tag-and-comment?text-and-comment?line?whole-line? ??}, ??"todo-tree.general.statusBar":?"current?file",?//?在狀態欄中顯示的內容-沒有(none)，總計數(total)，每個標簽的計數(tags)，前三個標簽的計數(前三個)或僅當前文件的計數(當前文件)。 ??"todo-tree.general.tagGroups":?{?//?別名分組 ????"FIXME":?[?//?將多個標記設置為同一組，共享?todo-tree.highlights.customHighlight?的樣式 ??????"FIXME", ??????"FIX"?//?這里自定義的標記必需在?todo-tree.general.tags?中配置 ????] ??}, ??"todo-tree.general.tags":?[?//?插件匹配的標記名 ????"XXX",?//?標識處代碼雖然實現了功能，但是實現的方法有待商榷。 ????"TODO",?//?說明代碼還未完成。應當包含下一步要做的事情。 ????"NOTE",?//?說明代碼的工作方式。 ????"HACK",?//?表明代碼實現走了一個捷徑。應當包含為何使用hack的原因。這也可能表明該問題可能會有更好的解決辦法。 ????"FIXME",?//?說明代碼是有問題的并應盡快修復。 ????"FIX", ????"BUG"?//?BUG ??], ??"todo-tree.regex.regex":?"(s**s*|s*//s*|s*<!--s*)($TAGS).*" // 匹配正則，想要匹配多行注釋中的標記名需修改此正則 }
效果如下：
40. 繪制流程圖
vscode 插件將 vscode 集成到 VS Code 中。
安裝插件后，可在 VS Code 中編輯.drawio、.dio、.drawio.svg或.drawio.png文件。
使用Draw.io: Convert To…命令轉換文件格式。
41. 發送郵件
使用 vscode 插件在 VS Code 中編輯/發送電子郵件。
MJMJ 可以基于 vscode 或 vscode 發送郵件，這里以 Nodemailer 為示例配置，使用 QQ 郵箱作為發件箱。
{ "mjml.mailFromName": "seyin", // 發件人 "mjml.mailSender": "24xxxx68@qq.com", // 發件人郵箱，必需和登錄郵箱一致 "mjml.nodemailer": { // Nodemailer 配置 "host": "smtp.qq.com", "port": 465, "secure": true, "auth": { "user": "24xxxx068@qq.com", // 和發件人郵箱一致 "pass": "xxxxxxxx" } }, "mjml.mailRecipients": "zhangsan@163.com", // 默認收件人 "mjml.mailer": "nodemailer" // 使用 Nodemailer 還是 Mailjet 發送郵件 }
關于 QQ 郵箱第三方登錄問題（nodemailer 配置中的 host port 是什么？），登錄 QQ 郵箱網頁版，打開設置 -> 賬戶，找到
根據官方提供的文檔操作即可。其它郵箱類似。
在settings.json中添加以下配置，以便使用 Emmet 功能：
{ "emmet.includeLanguages": { "mjml": "html", ...otherLanguages } }
配置完成后，編寫你的.mjml文件，使用命令MJML: Send Email即可成功發送郵件。
關于mjml語法，點擊vscode。
這里提供一個簡單的周報模板：
<!-- header.mjml --> <mj-style> ??.done?{ ????color:?#98c379; ??} ??.doing?{ ????color:?#ff8c00; ??} ??.text-content?{ ????letter-spacing:?1px; ????line-height:?2; ??} ??.text-bold?{ ????font-weight:?bold; ??} ??.first-line?td?{ ????border-top:?1px?solid?#eee; ??} ??.line?td?{ ????border-bottom:?1px?solid?#eee; ????border-right:?1px?solid?#eee; ????padding:?12px; ????padding-right:?0; ??} ??.line?td:nth-child(1)?{ ????border-left:?1px?solid?#eee; ??} </mj-style>
<!-- mail.mjml --> <mjml> ??<mj-head> ????<mj-include></mj-include> ??</mj-head> ??<mj-body> ????<mj-section> ??????<mj-column> ????????<mj-image></mj-image> ??????</mj-column> ??????<mj-column> ????????<mj-text> ??????????TeamSecret ????????</mj-text> ????????<mj-text> ??????????前端開發工程師 ????????</mj-text> ??????</mj-column> ????</mj-section> ????<mj-divider></mj-divider> ????<mj-section> ??????<mj-column> ????????<mj-table> ??????????<tr> ????????????<td>項目名</td> ????????????<td>xxxx?管理系統</td> ????????????<td>項目進度</td> ????????????<td>系統設計階段</td> ??????????</tr> ??????????<tr> ????????????<td>負責人</td> ????????????<td>張三</td> ????????????<td>起止日期</td> ????????????<td>2020/02/20?-?2020/02/20</td> ??????????</tr> ????????</mj-table> ????????<mj-table> ??????????<tr> ????????????<td>本周工作內容</td> ??????????</tr> ??????????<tr> ????????????<td>項目/系統</td> ????????????<td>工作內容</td> ????????????<td>完成情況</td> ??????????</tr> ??????????<tr> ????????????<td>xxxx?系統</td> ????????????<td>xxxxxxxxxxxx</td> ????????????<td>已完成</td> ??????????</tr> ??????????<tr> ????????????<td>xxxxxxxxxxxxxx</td> ????????????<td>80%</td> ??????????</tr> ??????????<tr> ????????????<td>未完成事項及原因</td> ??????????</tr> ??????????<tr> ????????????<td>?</td> ??????????</tr> ??????????<tr> ????????????<td>影響工作進展的主要問題，建議措施</td> ??????????</tr> ??????????<tr> ????????????<td>?</td> ??????????</tr> ????????</mj-table> ????????<mj-table> ??????????<tr> ????????????<td>下周工作計劃</td> ??????????</tr> ??????????<tr> ????????????<td>項目/系統</td> ????????????<td>工作內容</td> ????????????<td>計劃開始日期</td> ????????????<td>計劃完成日期</td> ????????????<td>需要配合部門/人員</td> ??????????</tr> ??????????<tr> ????????????<td>xxxx?系統</td> ????????????<td>工作計劃工作計劃工作計劃工作計劃</td> ????????????<td>2020/02/20</td> ????????????<td>2020/02/20</td> ????????????<td>張三</td> ??????????</tr> ??????????<tr> ????????????<td>備注事宜</td> ??????????</tr> ??????????<tr> ????????????<td>?</td> ??????????</tr> ????????</mj-table> ??????</mj-column> ????</mj-section> ??</mj-body></mjml>
42. 設置同步
不同機器上的 VS Code 設置、插件、代碼片段同步功能。
通常，進行 VS Code的配置同步需要借助第三方的 vscode 插件和 vscode 賬戶。現在，在 VS Code Insiders（預覽版）里已經提供了自帶的配置同步功能，可以通過 Microsoft 賬戶或 GitHub 賬戶進行多機器同步。期待早日更新~
使用插件：
安裝插件后，使用快捷鍵Shift + Alt + U上傳設置，如果是首次使用，將彈出一個歡迎頁面，點擊頁面中的LOGIN WITH GITHUB按鈕，此時會打開瀏覽器，輸入 GitHub 賬號登錄完成授權。然后回到 VS Code ，此時插件已經讀取了您的 Gist，有沒有都沒關系，點擊 SKIP 按鈕會新建一個新的 GistId，再次按下快捷鍵Shift + Alt + U即可上傳配置到 GitHub 賬戶。使用快捷鍵Shift + Alt + D下載遠程配置到本地。
在最新的 VS Code Insiders（預覽版）中，提供了自帶的同步設置，只需要點擊活動欄下方的設置圖標，單擊Turn on Setting Sync…然后按照提示登錄你的 GitHub 或 Microsoft 賬號即可。
更多編程相關知識，請訪問：vscode！！
