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://bianchenghao.cn/hz/110370.html