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

这是我参与更文挑战的第 2 天，活动详情查看： 更文挑战

上一篇文章记录了【效率工具】VsCode 快捷键。 这里记录一些自己常用的 Vscode 插件，这里列举一些自用的，大家都知道必须就不列举了(比如： Vue 标配 Vetur)
工欲善其事，必先利其器

一、美化界面 主题 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
},
复制代码

二、代码检测 CodeLint

利用插件自动检测代码编写中的错误，能帮我们规范代码，减少 bug 概率

7. Eslint

8. TSLint

9. TypeScript Hero

10. Regex Previewer

正则的预览工具，实时匹配对应规则

三、自动补全 Automation

11. 路径： Path Intellisense

12. 命名： Codelf

变量命名是个老大难，头疼，试试这个插件（还是去网站吧：codelf）

13. vscode-fileheader

14. Better Align 一般

格式对齐， 可以使用 Shift+Ctrl+P 打开命令窗口，输入 Align，就能将选中的代码对齐。以 : 为界对齐，所有的 : 都在中间。

四、Git 插件

15. Git History

16. GitLens

17. Git Blame

五、浏览器 静态服务 Browser/Server

18. 【浏览器】 Open in Browser

浏览器打开本地 html 文件，快捷键 alt + b

19. 【浏览器】 Open in Default Browser

在默认浏览器打开 html 文件，启动一个基于本地服务器: localhost:52230/index.html

20. 【本地服务】 Live Server

快速启动一个本地服务，方便 html 文件预览调试等

六、 代码格式化、美化 formatCodeStyle

21. 【格式化】 Prettier

Prettier 是一个“有主见”的代码格式化工具, 这个工具能够使输出代码保持风格一致。

其他 or 摸鱼

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

预告

下一篇更新 提升开发效率的 Vscode 配置优化，代码片段 snippets

加油. 【Calm down & Carry on】