前端开发常用的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 也是快速生成常用代码块

相关推荐
源代码•宸6 分钟前
Visual Studio Code SSH 连接超时对策( keep SSH alive)
运维·服务器·ide·经验分享·vscode·ssh
wodongx1234 小时前
Android Studio安装配置
android·ide·android studio
爱趣五科技10 小时前
H5DS编辑器教程——企业级雪花特效开发指南
前端·安全·编辑器·音视频
张屿秋10 小时前
在Unity中,如果物体上的脚本丢失,可以通过编写一个自定义编辑器脚本来查找并删除这些丢失的组件
unity·编辑器·游戏引擎
青花瓷10 小时前
VSCode中结合DeepSeek使用Cline插件的感受
ide·人工智能·vscode·大模型·编辑器·deepseek
向日葵.11 小时前
vscode使用方式
ide·vscode·编辑器
还是鼠鼠14 小时前
Node.js自定义中间件
javascript·vscode·中间件·node.js·json·express
暗碳19 小时前
vscode c语言环境配置
c语言·ide·vscode
1alisa1 天前
Typora Markdown编辑器 for Mac
macos·编辑器
栈溢出了1 天前
pycharm 有智能提示,但是没法自动导包,也就是alt+enter无效果
ide·python·pycharm