vscode10大常用插件

Tools

工欲善其事必先利其器

1.工具

1.1 前端工具

  • VSCode ~强烈推荐,入门必备
  • JetBrains WebStorm ~除了有点吃内存,其余都牛逼
  • HBuilder ~和uniapp天生匹配
  • atom ~了解即可
  • sublime ~了解即可

2.VSCode必备插件

2.1 Open-In-Browser

在浏览器中打开文件的内置界面

1.gif

2.2 live-server 🔥

开启服务,并且页面热更新.

2.gif

安装后在vscode底部会出现Go Live按钮。

2.3 Beautify

Beautify 插件可以快速格式化你的代码格式,让你在编写代码时杂乱的代码结构瞬间变得非常规整

3.gif

按键盘F1调出快捷键,选择Beautify file

2.4 Code Runner

万能语言运行环境,直接通过此插件就可以直接运行对应语言的代码

4.gif

2.5 Image Preview

鼠标移到路径里显示图像预览

5.gif

2.6 Path Intellisense

路径自动补全插件

6.gif

2.7 Turbo Console Log

快捷添加 console.log,一键 注释 / 启用 / 删除 所有 console.log。

快捷鍵解释
ctrl + alt + l选中变量之后,使用这个快捷键生成 console.log
alt + shift + c注释所有 console.log
alt + shift + u启用所有 console.log
alt + shift + d删除所有 console.log

7.gif

2.8 css-auto-prefix

自动添加 CSS 私有前缀,解决兼容性的利器

8.gif

2.9 Bracket Pair Colorizer

给嵌套的各种括号加上不同的颜色,便于区分作用域

9.gif

2.10 Auto Rename Tag

自动修改匹配的 HTML 标签

10.gif

Tip:以上均是本人常用的插件,其实vscode还有很多好用的插件,大家通过此篇文章熟悉,自己去探索吧!

有同学想问我gif图如何录制的,如下

😂 本文均由JavaDog原创,转载请标明出处。

  • 10
    点赞
  • 33
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
常用VSCode插件有很多,以下是一些常用插件,特别适用于Vue2开发的插件: 1. Vetur: 提供了对Vue文件的语法高亮、智能感知、代码片段等功能,方便开发Vue应用。\[1\] 2. Vue 2 Snippets: 提供了一系列的代码片段,可以快速输入常用的Vue2代码,提高开发效率。\[2\] 3. ESLint: 用于代码规范检查,可以帮助你保持代码的一致性和可读性。\[3\] 4. Vue Peek: 可以通过快捷键跳转到Vue组件的定义,方便查看和编辑组件代码。\[1\] 5. Vue VSCode Snippets: 提供了一系列的代码片段,包括Vue组件、Vue Router、Vuex等,可以快速生成常用的Vue代码。\[2\] 6. Auto Close Tag: 自动闭合HTML标签,减少手动输入的工作量。\[3\] 这些插件可以提升Vue2开发的效率和代码质量,推荐安装和使用。 #### 引用[.reference_title] - *1* [VS Code开发Vue项目常用插件](https://blog.csdn.net/dreamingbaobei3/article/details/108291629)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Vscode 开发Vue必备插件](https://blog.csdn.net/weixin_64630810/article/details/126661315)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [VSCode常见的vue开发插件](https://blog.csdn.net/m0_57413860/article/details/116783211)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JavaDog程序狗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值