VSCode、一般插件及Vue3插件

目录

前言

一、美化插件

Material Theme

Material Icon Theme

二、高效插件

Auto Close Tag

Auto Rename Tag

Image Preview 

open in browser

Prettier - Code formatter

ESLint

三、Markdown 插件

Markdown Preview Enhanced 

Markdown All in One

四、JS插件

JavaScript (ES6) code snippets

五、Bootstrap插件

Bootstrap IntelliSense

六、CSS插件

CSS Class Intellisense

HTML CSS Support

HTML to CSS autocompletion

七、Vue3插件

vscode-element-helper

Vue 3 Snippets

Vue Language Features (Volar)

Vue Peek

Vue VSCode Snippets

总结


前言

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编辑器进行所有形式的自定义,只要你想做,基本上没有不能实现的。

  • 21
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值