【效率工具】磨刀不误砍柴工之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】