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

相关推荐
VidDown16 天前
VidDown 工具站:免费、本地优先的开发者工具箱
javascript·编辑器·音视频·视频编解码·视频
摇滚侠17 天前
IDEA 创建 Java 项目 手动整合 SSM 框架
java·ide·intellij-idea
霸道流氓气质17 天前
Trae IDE 新手入门指南
ide
VidDown17 天前
显卡处理视频技术详解:从硬解码到 NVENC,GPU 如何让视频处理起飞?
javascript·编辑器·音视频·视频编解码·视频
夜猫逐梦17 天前
【UE基础】03.蓝图与编辑器工作流
编辑器·ue·蓝图·ue编辑器
VidDown17 天前
视频帧率技术详解:从 24fps 到 120fps,帧率如何影响你的观看体验?
网络·网络协议·编辑器·音视频·视频编解码·视频
爱就是恒久忍耐17 天前
VSCode里如何比较2个branch
ide·vscode·编辑器
意法半导体STM3217 天前
【官方原创】如何为STM32CubeMX2配置Visual Studio Code配置方案
vscode·stm32·单片机·嵌入式硬件·策略模式·stm32cubemx·嵌入式开发
bloglin9999917 天前
vscode中可视化的合并分支,在“合并编辑器中解析”中“与基线进行比较”是什么意思
ide·vscode·编辑器
终将老去的穷苦程序员17 天前
IntelliJ IDEA 的安装教程
java·ide·intellij-idea