千锋重庆web前端技术分享之前端VSCode常用插件
一、VSCode常用的插件vscode之所以被称为宇宙第一神器,其中丰富的插件功不可没,安装起来超级简单,给我们开发带来了极大的便捷。 注意,新手学习期间,不建议安装形形色色的插件,用到啥就安装啥。因为有些插件会到vue学习的时候引起冲突,所以这里千锋重庆HTML5培训机构的老师介绍几个常用的插件。
Chinese (Simplified) 汉化
Auto Rename Tag
One Dark Pro 颜色主题
格式化代码(vscode系统自带)
open in browser 浏览器预览页面
Live Server 实时预览(推荐)
vscode-icons 设置文件图标主题
Easy LESS 编译less文件
会了吧 学习单词插件 (可以使用)
1.Chinese (Simplified) vscode
下载完毕是英文版的,先安装这个插件,改为中文版,所以是我们第一个安装的插件。
2.Auto Rename Tag
修改开始标签,结束标签跟着自动变化,比较好用。
3.One Dark Pro 颜色主题
页面的效果:
4.格式化代码(vscode系统自带)
现在格式化代码的插件非常多,比如Prettier等等。
刚开始学,不太建议安装插件,先自己手写规范的语法格式但是html标签嵌套比较多,可能需要自动格式化比较好,
所以我们可以利用vscode自动的功能格式化代码,暂且不用格式化插件,自动保存照样能格式化代码。
(1) 点击管理按钮—选择里面的设置命令
(2)选择用户 —> 文本编辑器 —> 正在格式化 —> 勾选如下图的2个按钮
这样,我们不用安装插件,就可以自动保存自动格式化代码了。
4.open in browser 浏览器预览页面
编写完代码,需要浏览器预览,可以安装这个插件
6. Live Server 实时预览(推荐)
刚才的插件是可以预览我们的页面,但是改完代码,浏览器必须要重新刷新,比较麻烦,因此推荐各位小伙伴安装 live server 这个插件,修改完代码,自动更新浏览器,爽歪歪~~~
小技巧:
刚开始学习前端,基本页面很少,可以左边编辑器,右边浏览器,这样编写完毕代码,保存完毕后,浏览器自动更新了。
注意点:
使用live server 各位小伙伴要注意, 先用vscode 打开 文件所在的目录文件夹哦。
7. vscode-icons 设置文件图标主题
可以很清楚看到文件对用的图标。
只是为了看文件更加直观哈
8. Easy LESS 编译less文件
我们写的less不能直接引入到html文件中, 通过这个插件可以自动帮我们生成 css文件
8. 会了吧
是的,你没看错,这个插件的名字就是 <会了吧>
你是不是还在为英文单词不认识而发愁,是不是认识不会读而烦心, 这个插件你值得拥有。
里面会有单词介绍,点击还会有发音,喜欢吧。
好的,这篇文章,千锋重庆web前端培训班的老师先介绍到这里, 学到vue的同学肯定就安装vetru、eslint 等插件了
千锋重庆web前端技术分享之前端VSCode常用插件相关推荐
- web前端技术分享:前端开发与后端开发的区别是什么?
相信很多人在技术岗都听到过前端和后端这两个职位,但是大部分人对前端开发与后端开发的区别是什么?并不是很清楚,下面小千就为大家详细的介绍一下两者的区别之处. web前端分享:前端开发与后端开发的区别是什 ...
- 千锋重庆web前端学习什么内容?
1.掌握基础知识. 对于已整理的知识结构,根据分析的两个维度中最重要.最浅的部分作为打基础阶段.一定要在这个过程中多一点投入练习,一般做得多,熟练得多,就会认为这部分知识和内容是掌握的.内部前端的基础 ...
- 好程序员web前端技术分享媒体查询
为什么80%的码农都做不了架构师?>>> 好程序员web前端技术分享媒体查询 什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向 ...
- 千锋教育Web前端——PC端企业类型整页制作
千锋教育Web前端--PC端企业类型整页制作 文章目录 千锋教育Web前端--PC端企业类型整页制作 一.PC端的布局 二.源码 1.CSS源码 2.HTML源码 三.运行结果 一.PC端的布局 通栏 ...
- 前端技术分享之HTMLHTML5
前端技术分享之HTML&&HTML5 HTML 发展历史 HTML文档模式 标准模式 HTML 4.01 严格型 XHTML 1.0 严格型 HTML 5 准标准模式 HTML 4.0 ...
- html5课程的收获,千锋重庆HTML5学员感悟 一分耕耘一分收获
不知不觉在千锋重庆第一阶段HTML5的学习已经结束,起初认为这个东西很简单,但是当学习了之后,发现也并没有想象的那么简单,上课不认真听,课后不温习,还是落下很多知识点.还好在千锋老师和同学课后的帮助下 ...
- 千锋重庆Java学习之五大Java自动化部署工具
在Java开发工具中,有一种是自动化部署工具,下面千锋重庆小编就给大家介绍五大Java自动化部署工具: 五大Java自动化部署工具 Jenkins Jenkins 是一种开源持续集成(CI) 工具,能 ...
- Web前端技术分享:学习HTML和CSS的5大理由
人们学习HTML和CSS最常见的原因是开始从事Web开发.但并不是只有Web开发人员才要学习HTML和CSS的核心技术.作为一个网络用户,你需要你掌握的相关技术很多,但下面小千总结了5个你无法拒绝学习 ...
- Web前端技术分享:全栈工程师常用的开发工具
全栈工程师,也叫全端工程师,是指掌握多种技能,并能利用多种技能独立完成产品的人.全栈工程师熟悉多种开发语言,同时具备前端和后台开发能力,从需求分析,原型设计到产品开发,测试,部署,发布全流程都十分熟悉 ...
最新文章
- Mac下使用crontab来实现定时任务
- 穹顶下业务流程管理失位
- MYSQL专题-绝对实用的MYSQL优化总结
- 学习笔记 Keras:常见问题
- 使用轮转算法求时间片_彩票调度算法,让进程们拼手气? --当操作系统遇上随机算法...
- spark_spark连接hive config
- VC控制台输出时设置字体及背景颜色
- 学习笔记之-Kubernetes(K8S)介绍,集群环境搭建,Pod详解,Pod控制器详解,Service详解,数据存储,安全认证,DashBoard
- 操作数据库(对战小游戏)
- 18 Loader 总结
- 学习python课程_想学习Python吗? 这是我们的免费4小时互动课程
- python sdweather_爬虫框架抓取练习-JMU SD weatherspider,scrapy,jmusdWeatherSpider
- pandas 时间序列分析(一)—— 基础
- 微服务架构下的统一身份认证和授权
- 什么是有氧运动?什么是无氧运动?哪个减肥效果更好?
- Linux安装Kibana详细教程
- 《Cocos Creator游戏实战》你画我猜中的画板功能
- 利用excel与Pandas完成实现数据透视表(文末赠书)
- PHP7的异常处理机制,set_error_handler和set_exception_handler方法介绍
- 设置 Linux 支持中文