将博客搬至CSDN

162 阅读1分钟

背景

前段时间公司要统一前端技术栈,由于我们团队本来用Vue开发项目比较多,但是公司技术领导决定统一成React技术栈,相关的UI库,组件写法小程序和VSCode的配置和插件也要进行改变,下面是自己目前正在使用的几款感觉不错的VSCode 插件和大家分享下。

VS Code下载

点击Download进行下载,自己用的是Windows系统,所以对应的版本就是Win。 image.png

VSCode 插件集合

1,Chinese (Simplified) Language Pack for Visual Studio Code

  • VSCode默认的语言实英语,但是还是中文看着舒服点

image.png

2,Material Theme

  • 主题分类,很值得拥有!

image.png

  • 文件显示效果 image.png

3, Path Intellisense

  • 路径补全功能

image.png

4, highlight-matching-tag

  • 高亮匹配的标签

v2-e69417d55218fcf34bd5e9b2e7293f4b_b.gif

5,Git History

  • 用来查看git log或则一个文件的git历史,比较不同的分支,commits

image.png

6,npm Intellisense

  • 在导入语句自动补全npm模块名称

自动补全

7,CSS Peek

  • 在HTML中通过CSS id或则class来定位到其定义

8,React.js code snippets

  • 用ES6语法去开发React.js应用非常方便

9,React Redux ES7 Snippets

  • Redux ES7的语法支持 image.png

10,Typescript React code snippets

  • tsx的react组件片段

image.png

11, Prettier - Code formatter

  • 代码美化插件

image.png

12,Import Cost

  • 在代码中显示导入软件包的估计大小

5b7bddba5bdfa9143ca7f0c63a0ffeb9.png

13,代码片段

  • 生成快捷代码
  • 设置片段 image.png
  • 使用代码片段

image.png

总结

文中介绍了12款VSCode扩展插件用户代码片段的设置,希望能够帮助你提高生产力,解放搬运代码的苦力!自己使用的VSCode功能还是冰山一角,有更好的拓展插件,请各位道友热情推荐下!