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原创,转载请标明出处。

VSCode 插件通常不需要您手动“运行”,因为它们是由 VSCode 自动加载并管理的。当您安装了一个 VSCode 扩展(即插件),它会在后台与您的编辑器一起工作,提供额外的功能和增强。 以下是安装和使用 VSCode 插件的基本步骤: ### 安装 VSCode 插件 1. **打开 VSCode**:首先启动 Visual Studio Code 编辑器。 2. **访问市场页面**:点击左侧边栏顶部的“Marketplace”图标,或者直接按键盘快捷键 `Ctrl + Shift + X` (Windows/Linux) 或 `Cmd + Shift + X` (Mac)进入扩展市场页面。 3. **搜索插件**:在搜索框中输入您想寻找的插件名称。 4. **浏览结果**:查看搜索结果列表,选择一个插件点击进入详细信息页。 5. **安装插件**:在插件详情页面,找到“Install”按钮并点击开始下载和安装过程。 6. **重启 VSCode**:安装完成后,有些插件会提示重启 VSCode 来生效。如果需要,重启一次即可。 ### 使用 VSCode 插件 一旦安装完成,大多数插件会在右侧工具栏上显示其图标,通过单击该图标就可以激活或关闭该插件功能,或者配置其设置以满足您的特定需求。 ### 高级技巧 - **自定义设置**:每个插件都有一些设置选项可以帮助您调整其行为,比如更改语法高亮、修改快捷键等。您可以在插件设置菜单内进行定制。 - **插件冲突**:有时候不同的插件可能会有兼容性问题,导致功能冲突或者 VSCode 行为异常。如果遇到此类问题,尝试禁用一些插件看是否能解决问题。 - **开发插件**:如果您熟悉编程并且对扩展功能感兴趣,可以考虑学习如何为 VSCode 开发插件。这需要掌握一些 JavaScript 和相关技术栈的知识。 ### 相关问题: 1. **如何查找和安装特定类型的 VSCode 插件?** - 您可以按照上述步骤,在扩展市场上通过关键词搜索特定功能的插件,如“代码自动完成功能”、“版本控制集成”等。 2. **VSCode 插件之间存在兼容性问题怎么办?** - 如果发现插件之间的兼容性问题,您可以尝试卸载最近安装的插件、更新至最新版的 VSCode插件,或在官方社区寻求解决建议。 3. **如何安全地安装和管理 VSCode 插件?** - 优先从 VSCode 官方扩展市场安装插件,避免安装未知来源的插件。定期检查插件更新,并保持 VSCode 的最新状态有助于提高安全性。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

JavaDog程序狗

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

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

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

打赏作者

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

抵扣说明:

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

余额充值