vscode插件(个人正在用的)

萧寂173
832 阅读4分钟

这个是别人写的,我也有很多在使用,可以去看看有没有需要的

第一个博主笔记 第二个博主笔记

any-rule

正则表达式插件 在这里插入图片描述

Auto Close Tag

代码补全插件,例如输入<div 当输入完>就会补全另一半 在这里插入图片描述

Auto Rename Tag

重命名标签,当在开始标签输入单词时,结束标签也会实时更改,类似vue的双向绑定 在这里插入图片描述 在这里插入图片描述

background-cover

个人认为没啥大用,就是可以更改vscode背景使用,可以摸鱼用,例如背景透明度降低,打开软件偷偷看个小电影,老板也只会以为这个小电影就是你的背景图
在这里插入图片描述

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

vscode中文语言包,将里面的文字全部汉化了 在这里插入图片描述

Error Lens

实时检查代码语法正确与否,例如代码多了个括号,或者对象内的逗号写成了分号等等都会实时检查,并提示错误信息 在这里插入图片描述

Image preview

前端开发图片预览插件 Image preview（支持css预览 支持svg格式） 一款提高前端开发效率的插件 ，代码中hover直接预览图片 在这里插入图片描述

Live Server

将网页页面以服务器形式运行到浏览器上 在这里插入图片描述

Node Snippets

提供了nodejs语法支持 在这里插入图片描述

node-snippets

提供了nodejs语法支持 在这里插入图片描述

open in browser

使用默认浏览器打开html页面

在这里插入图片描述

Path Autocomplete

在vue上对@路径有很好的提示效果,需要在 点击插件--扩展设置---任意找到setting.json中编辑,进入后拉到最上面,添加如下代码: ` //导入文件时是否携带文件的扩展名 "path-autocomplete.extensionOnImport": true, // 配置@路径提示 "path-autocomplete.pathMappings": { "@": "${folder}/src" }, 然后保存即可看到@符号路径有提示效果在这里插入图片描述 在这里插入图片描述

Path Intellisense

代码中打出/即可提示出路径信息 在这里插入图片描述

Rainbow Brackets

代码的括号会是五颜六色的彩色括号 在这里插入图片描述

Vetur

一个vscode插件,用于为.vue单文件组件提供代码高亮以及语法支持。 在这里插入图片描述

Vue 3 Snippets

vue语法提示插件 在这里插入图片描述

Vue Language Features (Volar)

是一个专门为 Vue 3 构建的语言支持插件。它基于@vue/reactivity按需计算一切，实现原生 TypeScript 语言服务级别的性能。 在这里插入图片描述

vscode-icons

项目文件会有文件夹图标展示 在这里插入图片描述

TONGYI Lingma

通义千问人工智能插件 在这里插入图片描述

Code Runner

代码运行插件 在这里插入图片描述

NPM-Scripts

一般来说,打开npm脚本为: 在这里插入图片描述 但是效果如下:并不是我想要的(不会在终端运行,会开一个内置终端,每次关闭项目还要按任意键盘) 在这里插入图片描述 安装如下插件 在这里插入图片描述 打开插件 在这里插入图片描述 效果如下: 在这里插入图片描述 右下角点开设置-搜索npm-Npm: Package Manager-配置npm运行命令-一般选择npm即可

books(看主页介绍就知道是什么了)

小说阅读器,支持本地导入txt文本格式,vscode摸鱼看小说神神器在这里插入图片描述

Time Master

记录自己摸鱼的一天 在这里插入图片描述 在这里插入图片描述

别名路径跳转

就是例如vue项目的@别名，编辑器识别不到路径的，不支持跳转，使用了这个就可以自由配置了 在这里插入图片描述

AutoScssStruct4Vue

根据vue项目类名自动生成style的对应的文件 在这里插入图片描述 项目里面右键点击即可，已经声明过的选择器不会被覆盖不会重新生成 在这里插入图片描述

CSS Navigation

支持CSS补全、引用等很多功能，这里举例：鼠标在class类名上面点一下就会跳转到对应的style上面，，方便改样式 在这里插入图片描述

vue-helper

增强vue开发体验，支持 Element-UI、Element-Plus、Ant Design Vue。通过可视化、基础模板、丰富物料增强 vue 开发。 例如使用elementui开发,,鼠标放到标签上面就会显示该组件所有参数和事件，非常方便 支持查看组件属性，也可以一键跳转对应官网查看组件文档 在这里插入图片描述

CodeSnap

CodeSnap 是Visual Studio Code（VSCode）中的一个插件，其允许开发者选择要捕捉的代码段，并将其转换为图像格式。这样， 开发者可以将代码示例分享给其他人，而不必以纯文本或代码文件的形式分享。 使用方式：Ctrl+Shift+p 输入CodeSnap 然后在左侧选择自己要转换为图像的代码即可 在这里插入图片描述 在这里插入图片描述

project-tree

project-tree 是一个打印当前编辑器项目文档结构的插件 使用方式：Ctrl+Shift+p 输入Project Tree 然后点击选项即可 获取的目录树在Readme.md里面打印出来 image.png image.png 对应配置项 image.png

avatar
文章
阅读
粉丝