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

news2025/1/16 12:35:06

本文记录用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 也是快速生成常用代码块