VSCode 前端常用插件集合

82 阅读1分钟

1668754320246.jpg

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

软件汉化 image.png

2. Auto Close Tag

自动闭合HTML/XML标签

image.png

3. Auto Rename Tag

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

image.png

4. Bracket Pair Colorizer

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

image.png

5. Path Intellisense

智能路径提示

image.png

6. filesize

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

image.png

7. GitLens

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

image.png image.png

8. Vetur

Vue2必备,vue3需要安装Volar,禁用vetur;Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。vscode官方钦定Vue插件,Vue开发者必备。

image.png

9. Markdown Preview Enhanced

实时预览markdown

image.png

10. ESLint

代码规范校验

image.png

11. file-icons

文件夹显示icon图标

image.png

image.png

12. Code Spell Checker

可以检查代码中的拼写错误,在拼写错误的单词下会有下划线提示。

image.png

13. Volar

vue3必备,Volar插件来代替 Vetur 插件,不仅支持 Vue3 语言高亮、语法检测,还支持 TypeScript。

image.png

14. Vue VSCode Snippets

该插件支持:Volar、Vue2 和 Vue3,快速的生成 Vue 代码片段的方法;

image.png

  • 新建一个 .vue文件,输入 vbase会提示生成的模版内容:

image.png

  • 输入 vfor快速生成 v-for指令模版:

image.png

image.png

15. Prettier

代码格式化。

image.png

16. HTML Snippets

  • vue文件中智能补全HTML标签。 image.png
  • 安装完成后打开配置如下图

image.png