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

一、美化界面 主题 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 是一个“有主见”的代码格式化工具, 这个工具能够使输出代码保持风格一致。

如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “点赞” “评论” “收藏” 一键三连哦！