【效率工具】磨刀不誤砍柴工之VsCode擴展插件（二）

這是我參與更文挑戰的第 2 天，活動詳情查看： 更文挑戰

上一篇文章記錄了【效率工具】VsCode 快捷鍵。 這裏記錄一些本身經常使用的 Vscode 插件，這裏列舉一些自用的，你們都知道必須就不列舉了(好比： Vue 標配 Vetur) 工欲善其事，必先利其器

menu	擴展（插件）
推薦	Settings Sync 多人協做同步配置
推薦	GitLens
效率	Todo Tree
摸魚	韭菜盒子、小霸王、知乎、掘金...
主題	Dracula Official or Snazzy Operator
字體	Fira Code
圖標	vscode-icons
高亮	Bracket Pair Colorizer
顏色	color highlight
註釋	Better Comments
自動化	Eslint
自動化	Tslint
自動化	Regex Previewer
美化	Prettier
git	GitLens
git	Git History

1、美化界面 主題 theme

首先仍是要打造一個好看的界面，保護咱們的眼睛，固然仍是在對着屏幕敲一段時間後，能休息一下，望望窗外看看綠植

1. 【主題】： Dracula Official or Snazzy Operator

推薦 當前在用，很好看的一款主題風格

2. 【字體】： Fira Code

特性： 連字體「!=」-->「≠」或者「>=」-->「≥ 」等等，以此來提升代碼的可讀性。一個專爲程序員寫程序設計的字體， 是 Mozilla 公司（火狐他家的）主推的字體系列。Fira Code 是其中的一員，專爲寫程序而生。

另外也能夠將 Chrome 的 等寬字體設爲 Fira Code：設置>外觀>自定義字體。

這裏能夠下載 v1.204-> github.com/tonsky/Fira…

3. 【圖標】 vscode-icons

使用方法, 配置以下(setting.json)

"workbench.iconTheme": "vscode-icons",
複製代碼

4. 【高亮】 Bracket Pair Colorizer / Indenticator

給括號加上不一樣的顏色，便於區分不一樣的區塊

5. 【顏色】 color highlight

十六進制顏色 [#0366d6]掘金藍 編輯區域顯示

6. 【註釋】 Better Comments

這個插件提供了一種花裏胡哨的註釋方式： 在註釋內的開頭輸入某些字符，可使該行的註釋的樣式發生變化（如上圖），最關鍵的是能夠自定義註釋的樣式：找到擴展 > 右鍵 > 擴展設置 在 setting.json 中自定義配置

{
  "tag": "todo",
  "color": "#FF8C00",
  "strikethrough": false,
  "underline": false,
  "backgroundColor": "transparent",
  "bold": false,
  "italic": false
},
複製代碼

2、代碼檢測 CodeLint

利用插件自動檢測代碼編寫中的錯誤，能幫咱們規範代碼，減小 bug 機率

7. Eslint

8. TSLint

9. TypeScript Hero

10. Regex Previewer

正則的預覽工具，實時匹配對應規則

3、自動補全 Automation

11. 路徑： Path Intellisense

12. 命名： Codelf

變量命名是個老大難，頭疼，試試這個插件（仍是去網站吧：codelf）

13. vscode-fileheader

14. Better Align 通常

格式對齊， 可使用 Shift+Ctrl+P 打開命令窗口，輸入 Align，就能將選中的代碼對齊。以 : 爲界對齊，全部的 : 都在中間。

4、Git 插件

15. Git History

16. GitLens

17. Git Blame

5、瀏覽器 靜態服務 Browser/Server

18. 【瀏覽器】 Open in Browser

瀏覽器打開本地 html 文件，快捷鍵 alt + b

19. 【瀏覽器】 Open in Default Browser

在默認瀏覽器打開 html 文件，啓動一個基於本地服務器: localhost:52230/index.html

20. 【本地服務】 Live Server

快速啓動一個本地服務，方便 html 文件預覽調試等

6、 代碼格式化、美化 formatCodeStyle

21. 【格式化】 Prettier

Prettier 是一個「有主見」的代碼格式化工具, 這個工具可以使輸出代碼保持風格一致。

其餘 or 摸魚

22. Vetur
23. Markdown Preview Enhanced
24. 【摸魚】韭菜盒子、小霸王、知乎、掘金...

預告

下一篇更新 提高開發效率的 Vscode 配置優化，代碼片斷 snippets

加油. 【Calm down & Carry on】