vscode10大常用插件

简介: 本文介绍了前端开发中常用的工具及VSCode必备插件。推荐使用VSCode作为入门工具,并介绍了WebStorm和HBuilder等其他选项。VSCode插件包括:Open-In-Browser、live-server、Beautify、Code Runner、Image Preview、Path Intellisense、Turbo Console Log、css-auto-prefix、Bracket Pair Colorizer 和 Auto Rename Tag,这些插件能够显著提升开发效率和代码质量。此外,还提供了录制Gif图的工具GifCam。

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图如何录制的,如下

目录
相关文章
|
4月前
sublime和vscode 推荐安装的插件
sublime和vscode 推荐安装的插件
63 0
|
1月前
|
iOS开发 MacOS
【Mac系统】解决Vscode中LeetCode插件不能刷剑指offer题库
文章讨论了解决Mac系统中Vscode里LeetCode插件无法刷剑指Offer题库的问题,并提供了一些相关的使用技巧和资源链接。
96 1
|
5天前
|
人工智能 C++ 开发者
verilog vscode 与AI 插件
【9月更文挑战第11天】在Verilog开发中,使用Visual Studio Code(VS Code)结合AI插件能显著提升效率。VS Code提供强大的编辑功能,如语法高亮、自动补全和代码格式化;便捷的调试功能,支持多种调试器;以及丰富的插件生态。AI插件则可自动生成代码、优化现有代码、检测并修复错误,还能自动生成文档。常用插件包括Verilog AI Assistant和Verilog Language Server,可根据需求选择合适的工具组合,提高开发效率和代码质量。
|
23天前
|
前端开发 IDE 开发工具
OpenSumi问题之OpenSumi 对于 VS Code 插件生态要如何支持
OpenSumi问题之OpenSumi 对于 VS Code 插件生态要如何支持
|
28天前
|
JSON 前端开发 JavaScript
这 2 个插件,让你的 vscode更牛逼
这 2 个插件,让你的 vscode更牛逼
|
1月前
vscode——Prettier插件保存自动格式化
vscode——Prettier插件保存自动格式化
38 0
|
1月前
|
JavaScript Linux iOS开发
【Mac系统】Vscode使用LeetCode插件报错‘leetcode.toggleLeetCodeCn‘ not found
在Mac系统下使用VSCode的LeetCode插件时遇到“leetcode.toggleleetcodecn”命令找不到的错误解决方法,主要是通过从Nodejs官网下载并安装最新版本的Node.js来解决环境配置问题。
92 0
|
2月前
|
JavaScript IDE 开发工具
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
138 3
|
2月前
|
JavaScript 安全
下载安装 vscode(含汉化、插件的推荐和安装)
下载安装 vscode(含汉化、插件的推荐和安装)
44 0
下载安装 vscode(含汉化、插件的推荐和安装)
|
3月前
|
前端开发
VSCode中自带插件Emmet的用法
Emmet 是一个强大的工具,集成在 Visual Studio Code (VSCode) 中,可以大大提高编写 HTML 和 CSS 的效率。以下是如何使用 Emmet 插件的一些基本方法
77 4