VScode插件！！！插件！！！

VScode好用的插件

直到今天我已经在公司工作有两个星期了，回顾一下这两个星期遇到我一些问题。个人觉得最重要的是对公司配置的电脑进行配置。“磨刀不误砍柴功“，作为一名90后程序猿，电脑都是吃饭的家伙。于是我总结了好用的VScode插件在这里做一下分享。

• Beautify - VScode格式化代码

这个插件可以快速格式化代码
使用方法：

• 按下F1
• 输入bea

如果不喜欢默认配置，可以单独去配置代码格式化的风格

---

• Auto Close Tag - 自动关闭标签

会自动为你添加标签的闭合标签

• Auto RenameTag - 自动重命名标签

会自动个替换对应标签的名称

• css tree 快速生成样式树 ctrl + shift + p

1、选中你需要css进行修饰的Dom元素
2、按ctrl + shift + p
3、选择Generate css tree

• Bracket Pair Colorizer - 括号多颜色

给对应的代码块或小括号的开始与闭合括号添加对应的颜色。

• Dracula Official - 吸血鬼主题

用VScode有2年了，这个主题真的是特别nice。个人目前还在使用，眼睛看着很舒服，也不会太伤眼睛。

• EJS language support 好用的html模板引擎，提供ejs模板语法
• open in browser - 浏览器中打开

写静态页面常常会用到。
使用方式：
1、VScode中写好的页面上右键鼠标。
2、会多出Open in browser

• vscode-icons - 文件标签

这个也是我很喜欢的一个插件，它可以给你所有的文件添加对应的文件icon，这样就不会因为文件太大，导致选错文件。

• Path Intellisense 路径别名配置

用过webpack的同志都知道，alias别名配置。在vscode中就可以使用这个插件（初学者不建议使用）

• Better Comments 多色彩注释

多彩注释，根据不同的注释符号，显示不同的注释颜色

// ! 红色的高亮注释
// ? 蓝色的高亮注释
// * 绿色的高亮注释
// todo 橙色的高亮注释
// // 灰色带删除线的注释
// 普通的注释


/**
  // ! 红色的高亮注释
  // ? 蓝色的高亮注释
  // * 绿色的高亮注释
  // todo 橙色的高亮注释
  // // 灰色带删除线的注释
*/

• vscode-fileheader 文件头部说明注释

这个插件可以在文档顶部插入一段说明注释，非常便于你查看每个文件的具体内容

以下为网上推荐插件。

• Community Material Theme -社区主体
• npm Intellisense - npm感知
• Theme - Seti-Monokai - 字体主题
• cssrem - px与rem转换