VSCode 前端常用插件集合 | 七日打卡

3,167 阅读2分钟

Visual Studio Code 是由微软开发的一款免费、跨平台的文本编辑器。由于其卓越的性能和丰富的功能,它很快就受到了大家的喜爱。

但工欲善其事必先利其器,以下是本人为前端开发收集的常用的vscode插件,有需要的话赶紧mark起来吧~

VSCode 下载地址:VS Code官网链接

安装插件的方法

  1. 使用 ctrl + shift + x
  2. 使用 Ctrl+P , 输入 ext install xxxx ,搜索要安装的插件,点击安装按钮即可
  3. 点击扩展图标,如下图

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

软件汉化

2. Auto Close Tag

自动闭合HTML/XML标签

效果如下

3. Auto Rename Tag

自动完成另一侧标签的同步修改

效果如下

4. Bracket Pair Colorizer

给嵌套的各种括号加上不同的颜色

效果如下

5. Path Intellisense

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

效果如下

6. filesize

在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间

效果如下

7. GitLens

查看每一行代码的提交日志,方便查看git日志,git多人协作的时候需要查看日志,能在当前代码中查看

效果如下

8. Git History Diff

如果你的VSCode打开了一个Git管理的代码,则在VSCode编辑窗口中,可以看到所有的提交记录、改动文件,包括每一行代码的提交时间、提交人,非常方便

效果如下

9. Vetur

Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。vscode官方钦定Vue插件,Vue开发者必备。

效果如下

10. Markdown Preview Enhanced

实时预览markdown,markdown使用者必备

效果如下

11. minapp

微信小程序标签、属性的智能补全(同时支持原生小程序、mpvue 和 wepy 框架,并提供 snippets)

效果如下

12. vscode-fileheader

顶部注释模板,可定义作者、时间等信息,并会自动更新最后修改时间

快捷键: Ctrl+Alt+i

(默认信息可在 文件→首选项→设置 中修改)

效果如下