vscode 插件-前端

cowice
328 阅读2分钟

自己整理了下常用的插件，有好用的插件，欢迎补充~

Auto Close Tag

自动补全结束标签 image.png

Auto Rename Tag

自动关闭标签，在开始标记的结束括号中键入后，将自动插入结束标记 image.png

Easy LESS

编写less文件后生成css或者wxss文件 image.png

HTML CSS Support

html 标签上 class 智能提示当前项目所支持的样式 image.png

JavaScript ES6 Snippets

快捷生成代码片段，如clg可生成console.log() image.png

JavaScript (ES6) code snippets

image.png

ES7 React/Redux/GraphQL/React-Native snippets

快捷键生成react等代码片段, 如rfc可生成react函数组件并导出的代码 image.png

JSON to TS

快速生成json数据的typeScript类型，直接将接口中的数据转为ts接口类型，灰常方便 image.png

json2ts

同上 image.png

px to rem & rpx & vw

px转换 image.png

koroFileHeader

用于生成文件头部注释和函数注释的插件，支持所有主流语言,功能强大，灵活方便，文档齐全... image.png

Open in Browser

在浏览器中打开文件 image.png

Live Server

加载功能的本地开发服务器，以处理静态和动态页面 image.png

Markdown All in One

书写md image.png

Npm Intellisense

导入语句自动补全npm模块名称 image.png

Path Intellisense

路径自动补全 image.png

alias-skip

别名路径跳转，鼠标移动到路径上，按住ctrl并单击就会跳转 image.png

Vue Peek

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

Prettier

格式化代码 image.png

Vetur

vue2语法高亮, 代码片段, 质量提示 & 错误、格式化 / 风格、智能提示等 image.png

Vue Language Features (Volar)

vue3 语言高亮、语法检测，还支持 TypeScript 和基于 vue-tsc 的类型检查功能 需要注意的是：使用时需要禁用 Vetur 插件,Volar与它会有冲突 image.png

TypeScript Vue Plugin (Volar)

image.png

vue-helper

image.png

wechat-snippet

image.png

WXML - Language Service

微信小程序 .wxml 文件代码高亮，标签、属性的智能补全（同时支持原生小程序、mpvue 和 wepy 框架，并提供 code snippets image.png

小程序开发助手

微信小程序开发助手 for VSCode，代码提示 + 语法高亮 image.png

vscode-icons

不仅能够给文件夹、文件添加上舒适的图标，而且可以自动检测项目，根据项目不同功能配上不同图标，例如，git、Markdown、配置项、工具类等 image.png

Dracula Official

猛男粉主题~ image.png

background

代码区设置背景图 image.png

POWER MODE

打字特效 image.png

ESLint

image.png

Error Lens

image.png

Git Graph

显示Git图形化界面 image.png

Git History

查看Git提交历史记录，该插件还支持显示具有不同颜色的分支，显示提交信息和更改详细信息，以及搜索提交历史记录 image.png

GitLens

在代码行上显示Git提交信息、文件历史记录和比较视图 image.png

avatar
文章
阅读
粉丝