VSCode、一般插件及Vue3插件

前言

VS Code 全称 Visual Studio Code 是由微软开发的一款免费、跨平台的轻量级代码编辑器。以功能强大、提示友好、不错的性能和颜值俘获了大量开发者的青睐，对 JavaScript 和 NodeJS 的支持非常好，自带很多功能，例如代码格式化，代码智能提示补全等。

一、****美化插件

Material Theme

Material Theme 插件是一款用于美化主题的图标的插件，该插件包含两个子插件， Community Material Theme 用于美化主题，还有一个 Material Theme Icons 用于美化图标

Material Icon Theme

采用了 Google Material Design 风格，文件图标以及文件夹图标覆盖全面

二、高效插件

Auto Close Tag

自动添加 HTML/XML 关闭标记

Auto Rename Tag

自动重命名成对的 HTML/XML 标签

Image Preview

代码中hover直接预览图片，支持css、svg格式预览

open in browser

在html文件中,右键点击,然后选择浏览器打开文件

Prettier - Code formatter

格式化js、css代码插件

ESLint

用于JavaScript代码的语法检查和风格检查。它可以帮助开发人员在编写代码时遵循一致的编码规范，从而提高代码的可读性和可维护性

三、Markdown 插件

Markdown 是一种易于读写的轻量级的标记语言，编写出的作品简洁美观，近年来受到了越来越多的追捧，被广泛地用于日常写作，乃至电子书发表

Markdown Preview Enhanced

Markdown Preview Enhanced 插件意在让你拥有飘逸的 Markdown 写作体验，直接预览编辑效果。同时可以选择不同风格的显示

Markdown All in One

集成了编辑 Markdown 文件时需要的大部分功能，包括 Markdown 样式快捷键、列表的自动化处理、自动格式化表格、数学公式支持、自动补全

四、JS插件

JavaScript (ES6) code snippets

包含ES6语法中的JavaScript代码段（支持JavaScript和TypeScript）

五、Bootstrap插件

Bootstrap IntelliSense

增强使用Bootstrap的开发体验，提供CSS类的自动补全功能。该工具简化了Bootstrap的工作，使开发过程更加高效

六、CSS插件

CSS Class Intellisense

适用于先在css写了样式,在html中写入样式时提示

HTML CSS Support

提供 HTML 和 CSS 的语法高亮、代码提示和自动补全等功能

HTML to CSS autocompletion

HTML中新定义的id和class，在编写CSS文件时，智能提示id和class

七、Vue3插件

vscode-element-helper

基于 ElementUI 的自动补全插件

Vue 3 Snippets

提供 Vue 3 相关的代码片段，支持 Vue 组件选项、指令、生命周期

Vue Language Features (Volar)

让vue文件的内容颜色区分，同时支持点击相对路径文件的跳转，class名的样式定位（前提是这个class名和样式必须在同一个文件里）

Vue Peek

快速跳转到组件、模块定义的文件

Vue VSCode Snippets

自定义Vue 片段, 快速生成Vue模板

总结

vscode编辑器是可高度自定义的，我们使用vscode插件几乎可以对vscode编辑器进行所有形式的自定义，只要你想做，基本上没有不能实现的。