VScode常用插件汇总

264 阅读2分钟

编码助手

Baidu Comate

image.png

本地开发服务

Live Server

image.png

查找和导航CSS样式表中的类、ID、选择器和样式定义

CSS Pee

image.png

ES6 语法进行 JavaScript 开发的代码片段集合

JavaScript (ES6) code snippets

image.png

代码格式化工具

Prettier - Code formatter

image.png

开始结束标签补全

Auto Close Tag

image.png

自动重命名 HTML 标签的开始和结束标签

Auto Rename Tag

image.png

可选择要捕捉的代码段,并将其转换为图像格式

CodeSnap

image.png

智能代码补全

Tabnine

image.png

给文件和文件夹添加图标

VsCode Icons

image.png

浏览 git 相关信息

GitLens

image.png

实时预览图片

Image preview

image.png

对 HTML 和 CSS 的代码补全、语法高亮、代码片段和其他辅助功能

HTML CSS Support

image.png

显示引入包的大小

Import Cost

image.png

深色主题

One Dark Pro

image.png

路径补全

Path Intellisense

image.png

代码注释

Better Comments

image.png

它的功能在于通过在注释中引入多种颜色来增强代码注释体验,有效地将它们从普通的默认灰色转变为颜色

  • !:用于突出显示重要的注释或需要特别关注的部分;
  • ?:用于表示疑问或需要进一步解释的注释;
  • TODO:用于标记需要完成的任务或待办事项;
  • *:用于强调或标记注释中的关键信息;
  • //:用于普通的注释。

image.png

实时测试正则

Regex Previewer

image.png

高亮ENV文件

DotENV

image.png

快速生成函数注释

jsdoc

image.png

在输入/**后就会触发语法提示

输出console.log

Turbo Console Log

image.png

输出console.log

Fast-ConsoleLog

image.png

按中组合键:alt+2

Vue2 组件跳转源码

vue-helper image.png

Json数据一键转Ts

json2ts

image.png

  • 在控制台把打印的需要定义类型数据,复制一下obj

image.png

  • 然后在ts文件里面直接使用快捷键(Ctrl+Shift+Alt+V),就会把对应类型定义好再粘贴出来

image.png

Vue插件

Vue - Official

image.png

基于最新 Vue2或Vue 3 API 添加了Code Snippets(代码片段)

Vue 3 Snippets

image.png

Vue插件

Vue VSCode Snippets

image.png

输入vbase会提示生成的模版内容

智能引入自己写的组件 + 跳转组件

vue-component

image.png

辅助编程的功能

AWS Toolkit

image.png

vscode 插件版的 postman

Postcode

image.png

转换引号的,可以在 "",'' 和 `` 之间相互转换,并且是成对转换的

Toggle Quotes

image.png

转换快捷键:ctrl + '

AI 代码提示插件

Codegeex

image.png

通义灵码

TONGYI Lingma

image.png

文件图标主题

file-icons

image.png

文件图标和产品图标主题

Monokai Pro

image.png