前端工具与环境基础系列：工具篇（VScode 好用插件！！ 不定期更新）（一）

VScode好用的插件

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

插件导图

相关系列文章
1、 前端工具与环境基础系列：node环境搭建（node安装、npm/cnpm & yarn/tyarn 缓存设置 与 镜像配置 ）

---

2、前端工具与环境基础系列：代码管理工具（gitee）

全局功能性插件

以下这些功能性插件，主要是让我们使用VScode编写代码起来更方便，更舒服。并不针对某一个框架或技术。

• Beautify - VScode格式化代码

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

• 按下F1
• 输入bea

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

---

• Auto Close Tag - 自动关闭标签

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

---

• open in browser - 浏览器中打开
  写静态页面常常会用到。

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

---

• 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。个人目前还在使用，眼睛看着很舒服，也不会太伤眼睛。

---

• HTML Snippets

HTML代码片段，该插件可为你提供html标签的代码提示，不用键入尖括号了

---

• CSS Peek

css样式查看器，可快速查看我们的css样式，非常方便快捷

---

• vscode-icons - 文件标签

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

---

• koroFileHeader

在vscode中用于生成文件头部注释和函数注释的插件

---

• TODO Tree

我们经常会在代码中使用TODO来标记我们的代码，提高可读性

---

• Better Comments 多色彩注释

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

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


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

---

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

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

---

node相关插件

• EJS language support 好用的html模板引擎，提供ejs模板语法

React相关插件

• Simple React Snippets：react文本编辑器

如果你每次新建react文件的时候还需要手动的编写导入、导出相关组件那么推荐你使用这个插件，可以快速生成react基础模板代码。

ccc - Class Component With Constructor

与vscode中在html文件中使用“ ! ”一个原理

//在新建的js文件中输入  ccc 弹出提示按回车即可
class | extends Component {
  constructor(props) {
    super(props);
    this.state = { | };
  }
  render() {
    return ( | );
  }
}

export default |;

小结

目前我使用的就是以上的这些插件大多是公共功能性的插件，不需要特定的运行条件。毕竟我我一个前端入门小白，入职不到半个月，也就只有这些积累了。希望大家喜欢，后期如果有新的积累，会对这个博文内容进行更新。大家觉得可以就点个赞，给我点鼓励谢谢大家😊😊😊！！！