vscode前端常用插件

大家好，又见面了，我是你们的朋友全栈君。

vscode前端常用插件

文章目录

• vscode前端常用插件
  • 1. Live Server
    • 1.1 Live Server的使用
  • 2. rest client
  • 3. GitLens
  • 4. CSS peak
  • 5. Quokka.js
  • 6. CodeSnap
  • 7. Auto Rename Tag
  • 8. Bracket Pair Colorizer(已内置到vscode内部)
  • 9. indent-rainbow
  • 10. vscode-icons
  • 11. prettier
  • 12. Color Highlight
  • 13. Code Runner

1. Live Server

作用：可以自动页面，用于调整布局的时候

1.1 Live Server的使用

点击编辑器下方的go live

这时候会打开一个5500的端口， 主要针对html+css页面，不适合具有框架的页面

ctrl+s 保存页面，可以实时更新，点击下面端口号，取消实时更新

2. rest client

作用：用于进行轻量级的http请求

使用方式，创建一个http或者rest后缀名的文件 比如，请求百度

输入GET或者POST + url 点击图中Send Request 就可以发送请求了 右侧就是请求的返回了

3. GitLens

作用：用于git管理

使用的时候， 每行代码会显示什么时候做了修改，点击提示框可以出现对比

4. CSS peak

作用：用于查看样式，切换html和css页面 使用：按住ctrl, 鼠标移动到样式名称，就可以看到样式了

5. Quokka.js

作用：实时提醒代码编写错误，完全不依赖 使用：ctrl+shift+P 输入quokka, 选择new file, 选择js

6. CodeSnap

作用：在编辑器里直接截图 使用：选中截图代码，右键选择 codesnap

使用效果

代码截图效果

7. Auto Rename Tag

作用：直接成对自动修改的html标签 使用：直接修改 clg == 输出为console.log 注意：可能会跟其他缩写代码导致冲突，需要禁用其他代码缩写插件

8. Bracket Pair Colorizer(已内置到vscode内部)

作用：区分代码块，js代码的代码块

需要在settings里面进行设置

9. indent-rainbow

作用：用于缩进管理 彩虹色缩进

10. vscode-icons

作用：用于多种文件后缀名的查找 使用：

11. prettier

作用：格式化代码

settings中输入format on save 打钩

按下保存，就可以自动整理格式了

12. Color Highlight

作用：显示 #FFFFFF #AA2A00 这种标示对应的颜色

这样就可以显示颜色了

修改提示方式，选择dot-before

会显示在前面

13. Code Runner

作用：用于运行程序

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/164341.html原文链接：https://javaforall.cn