几个VSCode扩展

Auto Rename Tag

AutoRename Tag是一款面向Web开发人员的VSCode扩展。顾名思义,Auto Rename Tag可以在一个标签更改时自动更新另一个标签:

这款扩展不仅可以在HTML中使用,也可用于React,因为React使用了JSX:

Bracket Pair Colorizer

这款扩展可以将匹配的括号染成相同的颜色。同一个文件内嵌套的组件、函数、对象等带来的大量括号很容易让人摸不着头脑:

代码片段


 代码片段是节约时间提高生产力的最好办法。这并不是一个扩展,而是多种语言的各种扩展。下面是一些流行的代码片段扩展:

  • Angular Snippts (version 11)
  • Python
  • JavaScript (ES6) code snippets
  • HTML Snippets
  • ES7 React/Redux/GraphQL/React-Native snippets
  • Vue 3 Snippets

例如,在React中创建新组建时,输入函数式组件的语法非常繁琐。使用ES7React/Redux/GraphQL/React-Native snippets扩展,只需要输入rfc并按回车即可创建函数式组件。

Better Comments

BetterComments可以帮助你编写便于阅读的注释。清晰、方便理解的注释不仅对阅读代码的人有好处,对自己也非常有用。开发人员经常会遇到这种情况:过一段时间之后,阅读自己的代码都有困难。而编写描述性的注释对于自己和团队都有好处。使用Better Comments扩展,你可以将注释分为警告、询问、待办、重点等几大类。在双斜线后面使用下述字符做标记:

  • * 表示重点
  • ! 表示错误和警告
  • ? 表示询问和问题
  • // 表示删除
  • TODO 表示待办事项

Markdown All in One

MarkdownAll in One可以处理所有的markdown需求,例如自动预览、快捷键、自动完成等。从2004年发布以来,Markdown已成为最流行的标记语言之一。技术作者广泛使用Markdown转写文章、博客、文档等,因为它十分轻便、简单,而且可以在多个平台上使用。它的流行带动了许多Markdown变体的出现,如GitHub Flavored markdown、MDX等。微信搜索公众号 逆锋起笔,关注后回复 编程资源,领取各种经典学习资料。例如,要在Markdown中加粗字体,只需要选中文字按快捷键Ctrl+B即可,这样可以提高生产力。

流行的图标扩展


 描述性的图标可以帮你区分不同的文件和文件夹。

  • vscode-icons
  • Material Icon Theme
  • Material Theme Icons
  • Simple icons


Prettier 

Prettier是一款有倾向的代码格式化程序。它在GitHub上获得了38500多个标星,是最流行的代码格式化器之一。一致的代码格式和风格可以节省不少时间,特别是在与其他开发人员协作的时候。

IntelliSense for CSS class names in HTML

下载量:243万

基于你的项目以及通过link标签引用的外部文件,该智能插件提供HTML中CSS class名字的补全。

Minify

压缩 HTML、CSS、JS 代码。

TODO Highlight

高亮 TODO,FIXME、还可以自己配置要高亮的关键字。

stylelint

CSS / SCSS / Less 语法检查

Path Intellisense

智能路径提示,可以在你输入文件路径时智能提示。

Highlight Matching Tag

高亮对应的 HTML 标签 以及 标识出对应的各种括号。

View In Browser

在浏览器里预览网页必备。

Turbo Console Log

快捷添加 console.log,一键 注释 / 启用 / 删除 所有 console.log。

发表评论

邮箱地址不会被公开。 必填项已用*标注