前端开发常用的Vscode插件整理(持续更新)

本文记录用vscode进行前端开发时,常用到的有用的vscode插件,将不定时更新~

1、Chinese (Simplified) 将编辑器变成简体中文

2、vscode-icon 让 vscode 资源树目录加上图标,官方出品的图标库

3、Import Cost 引入包大小计算,对于项目打包后体积掌握很有帮助

4、gitLens 代码管理插件,多人协作开发必备神器,可以看到代码的作者,提供git相关便捷的操作。使用教程参考

5、Prettier 代码格式化

6、markdown all in one 为 Markdown 样式提供健康快捷键,列表的自动化处理,自动格式化表格,提供数学公式的支持,自动补全

7、HTML Boilerplate,html5自动补全

8、auto close tag 写标签时自动补全尾标签

9、Atuo Rename Tag 修改 html 标签,自动完成尾部闭合标签的同步修改

10、open in browser 在编辑器内鼠标右键,可以选择将html页面在浏览器中打开

11、css peek 快速跳转到样式的定义,按住ctrl键同时点击样式类的名称即可跳转到样式的定义。(注:仅仅对html中引用外部样式,即单独css文)件有用,对vue内部样式没有用)

12、css-auot-prefix 为了使页面能够在主流浏览器上显示,部分css属性就需要添加不同的兼容前缀,Css-auot-prefix可以自动补全css的前缀,适用于css、less、scss。

使用方法:在需要处理的css文件里按ctrl+shift+p,选择Autoprefixer:Run选项

13、Path Intellisense 在代码中引入文件或组件时自动补全路径

14、i18n Ally 轻量且功能强大的可视化编辑插件,提供了增删改查、视图审阅、在线翻译等功能,极大地提高了开发者翻译多语言的效率。更多使用指南

15、vue-helper vue代码进行代码提示

16、vetur vue语法高亮、智能感知、Emmet等(只适用于vue2语法),包含格式化功能: Alt+Shift+F 格式化全文

17、volar 同vetur,但是适用于vue3语法

18、Typescript Vue Plugin(Volar)适用于vue3+typescript可以用

19、Simple React Snippets 快速生成react代码片段, 官方说明

20、ES7+ React/Redux/React-Native/JS snippets 也是快速生成常用代码块

相关推荐
来块小鱼饼干(≧^.^≦)4 小时前
教你如何使用VSCode的EIDE插件开发STM32(包括任何ARM内核芯片)最详细教程
ide·vscode·stm32·arm·keil
请叫我欧皇i6 小时前
保姆级教程vscode创建uniapp vue3+ts+pinia项目并实现自动导入、打包功能
ide·vscode·uni-app
应用市场11 小时前
VSCode + AI Agent实现直接编译调试:告别Visual Studio的原理与实践
人工智能·vscode·visual studio
明道源码14 小时前
Android Studio 创建 Android 模拟器
android·ide·android studio
明道源码15 小时前
Android Studio 使用教程
android·ide·android studio
Caesar Zou1 天前
ssh远程连接服务器,vscode不显示claude
服务器·vscode·ssh
油炸自行车1 天前
【Qt】VS Code配置Qt UI插件,vscode打开Qt Designer ,vscode打开Qt*.ui文件
qt·ui·cursor·qt designer·vscode插件·trae·qt ui
JoannaJuanCV1 天前
vscode debug Transformer源码说明
ide·vscode·transformer·qwen3
炘东5921 天前
让Pycharm的Terminal(终端)进入创建好的虚拟环境
ide·python·pycharm
ZJU_统一阿萨姆1 天前
Windows系统VSCode配置Rust开发环境(超详细保姆级教程)
windows·vscode·rust