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 |;

小结

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