网站首页 > 知识剖析 正文
VS Code前端开发工具之必备插件,Visual Studio Code是由微软开发免费、开源、跨平台的一款IDE,支持多种编程语言开发,具有强大的插件扩展能力,这篇文章我们就来看看VS Code在前端开发中有哪些必备的扩展插件介绍
先看看软件的下载安装
VS Code官网地址:
https://code.visualstudio.com/
VS Code官网下载地址:
https://code.visualstudio.com/Download
下载安装好适合自己的版本后,开始安装插件
1、汉化Chinese
2、Open-In-Browser 设置默认浏览器查看文件选项 (安装流程如上就不再重复了)
使用Alt + B快捷方式在默认浏览器中打开当前html文件,或Shift + Alt + B选择浏览器。你也可以像图片一样右键点击
当您在其他浏览器中选择oepn时,将显示一个浏览器列表,您可以选择其中一个打开当前文件。
3、Quokka
实时反馈正在的编辑代码结果,预览计算值结果等,是一个很好的调试工具插件
4、CSS Peek
这个扩展支持所有正常的符号定义跟踪功能,但它针对的是css选择器(类、id和HTML标记)。这包括:
Peek:以内联方式加载css文件并在那里进行快速编辑。(Ctrl + Shift + F12)
转到:直接跳转到css文件或在一个新的编辑器(F12)中打开它
鼠标悬停:用鼠标悬停在符号上显示定义(Ctrl+ Hover)
5、Beautify 代码格式化
美化javascript, JSON, CSS, Sass,和HTML在Visual Studio中的代码。
6、color info 提供快速的css颜色信息。
7、vscode-icons 显示Visual Studio代码的图标
8、HTML Snippets html标签提示及含义提示
9、HTML CSS Support html中css类名及id提示
10、Auto Close Tag 自动添加HTML/XML关闭标签
11、Auto Rename Tag 当重命名一个HTML/XML标记时,将自动重命名成对的HTML/XML标记
12、Bracket Pair Colorizer 2 设置代码成对大括号的颜色
设置成对括号的颜色,便于快速区分代码块
13、Live Server实时同步预览页面
- 上一篇: CSS3新特性——盒子模型、模糊、函数和过渡
- 下一篇: 前端实用的CSS技巧(web前端开发css)
猜你喜欢
- 2025-03-14 Web自动化测试:模拟鼠标操作(ActionChains)
- 2025-03-14 2015年发布的11个最有用的CSS工具
- 2025-03-14 Web Essentials之HTML和CSS操作技巧
- 2025-03-14 前端实用的CSS技巧(web前端开发css)
- 2025-03-14 CSS3新特性——盒子模型、模糊、函数和过渡
- 2025-03-14 HTML+CSS基础训练之实现一个“真实”的网页
- 2025-03-14 css点击图片跳转页面,css点击图片旋转
- 2025-03-14 初识CSS——布局小技巧(css布局设计)
- 2025-03-14 如何在Windows11的任务栏中禁用和删除天气小部件图标?
- 2025-03-14 JS如何判断文字被ellipsis了?(js判断字符串是否有中文)
- 最近发表
-
- 测试进阶:实现跨请求地保持登录的神器session你get了么?
- Python 爬虫入门五之 Cookie 的使用
- 在Node应用中实施Web认证的四大方法
- PHP防火墙代码,防火墙,网站防火墙,WAF防火墙,PHP防火墙大全
- 程序员和IT人都应该懂的知识:HTTP入门图解
- 如何请求一个需要登陆才能访问的接口(基于cookie)——apipost
- 提高 PHP 代码质量的 36 计(如何提高php技术)
- 彻底搞懂Token、Session和Cookie(token和cookie sessions什么区别)
- 一文详解Python Flask模块设置Cookie和Session
- 超详细的网络抓包神器 tcpdump 使用指南
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)