前端VSCode常用插件安装和使用
本篇文章先介绍下常见的插件~~~~
VSCode常用的插件
vscode之所以被称为宇宙第一神器,其中丰富的插件功不可没,安装起来超级简单,给我们开发带来了极大的便捷。 注意,新手学习期间,不建议安装形形色色的插件,用到啥就安装啥。因为有些插件会到vue学习的时候引起冲突,所以这里介绍几个常用的插件。
Chinese (Simplified) 汉化
Auto Rename Tag
One Dark Pro 颜色主题
格式化代码(vscode系统自带)
open in browser 浏览器预览页面
Live Server 实时预览(推荐)
vscode-icons 设置文件图标主题
Easy LESS 编译less文件
会了吧 学习单词插件 (可以使用)
1. Chinese (Simplified)
vscode下载完毕是英文版的,先安装这个插件,改为中文版,所以是我们第一个安装的插件。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-beJjilzn-1664096496987)(https://cdn.jsdelivr.net/gh/lefengpiaoling/piclefeng/img/vscode-chinese.png)]
2. Auto Rename Tag
修改开始标签,结束标签跟着自动变化,比较好用。
3. One Dark Pro 颜色主题
我比较喜欢的一个颜色主题
页面的效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jmM3IWOo-1664096496996)(https://cdn.jsdelivr.net/gh/lefengpiaoling/piclefeng/img/one-effect.png)]
4. 格式化代码(vscode系统自带)
现在格式化代码的插件非常多,比如Prettier等等。
刚开始学,不太建议安装插件,先自己手写规范的语法格式
但是html标签嵌套比较多,可能需要自动格式化比较好,所以我们可以利用vscode自动的功能格式化代码,暂且不用格式化插件,自动保存照样能格式化代码。>
(1) 点击管理按钮—选择里面的设置命令
vscode 管理–设置
(2)选择用户 —> 文本编辑器 —> 正在格式化 —> 勾选如下图的2个按钮
这样,我们不用安装插件,就可以自动保存自动格式化代码了。
5. open in browser 浏览器预览页面
编写完代码,需要浏览器预览,可以安装这个插件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Np0DiTzD-1664096497002)(https://cdn.jsdelivr.net/gh/lefengpiaoling/piclefeng/img/vscode-open2.png)]
vscode 浏览器打开页面
6. Live Server 实时预览(推荐)
刚才的插件是可以预览我们的页面,但是改完代码,浏览器必须要重新刷新,比较麻烦,因此推荐各位小伙伴安装 live server 这个插件,修改完代码,自动更新浏览器,爽歪歪~~~
live server 自动更新页面
小技巧:
刚开始学习前端,基本页面很少,可以左边编辑器,右边浏览器,这样编写完毕代码,保存完毕后,浏览器自动更新了。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t55U8wyG-1664096497003)(https://cdn.jsdelivr.net/gh/lefengpiaoling/piclefeng/img/live2.png)]
小技巧
注意点:
使用live server 各位小伙伴要注意, 先用vscode 打开 文件所在的目录文件夹哦。
7. vscode-icons 设置文件图标主题
可以很清楚看到文件对用的图标。
只是为了看文件更加直观哈
8. Easy LESS 编译less文件
我们写的less不能直接引入到html文件中, 通过这个插件可以自动帮我们生成 css文件
9. 会了吧
是的,你没看错,这个插件的名字就是 《会了吧》
你是不是还在为英文单词不认识而发愁,是不是认识不会读而烦心, 这个插件你值得拥有。
里面会有单词介绍,点击还会有发音,喜欢吧。
会了吧插件
好的,这篇文章,先介绍到这里, 学到vue的同学肯定就安装vetur、eslint 等插件了,下章节将讲解vscode快捷键的使用。
前端VSCode常用插件安装和使用相关推荐
- 千锋重庆web前端技术分享之前端VSCode常用插件
一.VSCode常用的插件vscode之所以被称为宇宙第一神器,其中丰富的插件功不可没,安装起来超级简单,给我们开发带来了极大的便捷. 注意,新手学习期间,不建议安装形形色色的插件,用到啥就安装啥.因 ...
- 前端VSCode常用插件及安装
VSCode的功能如此强大,这与它们的插件密密相关,插件的安装起来超级简单,种类繁多,这给我们开发人员提供了很好地的便利.但是新手学习期间不需要安装许多插件,这里我来给大家介绍一下新手学习前端常用的插 ...
- vscode 常用插件安装
设置中文语言使用快捷键[Ctrl+Shift+P],弹出的搜索框中输入[configure language],然后选择搜索出来的[Configure Display Language],locale ...
- 前端vscode常用插件
Auto Rename Tag 这是一个html标签的插件,可以让你修改一边标签,另外一边自动改变. Beautify 格式化代码插件 Braket Pair Colorizer 给js文件中的每一个 ...
- Sublime Text 3便携版下载安装和常用插件安装--顺便解决报错An error occured installing和no packages available for install
文章目录 Sublime Text 3便携版下载安装和常用插件安装 1.Sublime Text 3便携版下载: 2.sublime 插件控制器(Package Control)安装 2.1离线安装P ...
- VsCode常用插件和快捷键
VsCode常用插件和快捷键 vscode快捷键 alt+w:快速打印变量(需要插件Wrap Console Log) alt+q:加书签 alt+d:加`<div>`标签(htmltag ...
- VScode常用插件下载
VScode常用插件下载 记录自己第一次使用VScode,边学习边记录,以后继续努力! Visual Studio Code的插件系统很好用,虽然vscode自带的功能比较少,但很多插件可以帮我们实现 ...
- 【VSCode常用插件】Path Autocomplete(@路径提示的插件)
前言 ❤️ 在路上,见识世界:在途中,认清自己 ❤️ [VSCode常用插件]Path Autocomplete(@路径提示的插件) 一.安装教程 二.设置教程 (1)在vscode设置打开 sett ...
- vscode常用插件大全
vscode常用插件大全 参考文章 https://mp.weixin.qq.com/s/1PkWPApvn5uWJl_cdzcoTA 说明 该片文章基本介绍了 vscode 常用插件 , 已经很全面 ...
最新文章
- 北京大学纳家勇治研究组在《美国国家科学院院刊》发文阐明时序记忆的神经机制
- nodejs读取excel内容批量替换并生成新的html和新excel对照文件
- 数据结构 栈的应用
- leetcode算法题--最小的k个数
- linux内核配置失败,petalinux配置内核出现下面错误
- 编译项目的时候,不会编译依赖的类库项目
- C#图解教程 第六章 深入理解类
- Nacos client SDK 订阅式请求坑
- 洛谷1005 【NOIP2007】矩阵取数游戏
- 也谈虚拟化的服务器选型,以及性能考虑
- EasyUI加载树控件自动展开所有目录
- 父母有退休工资和没有退休工资的比较,家庭生活区别大吗?
- 计算机文化基础第二次答案,中国石油大学2020年秋计算机文化基础第二次在线作业答案...
- linux程序没有对日志文件写的权限_好程序员云计算培训分享Linux文件权限简单说明...
- 每天10个Linux命令五
- 表格操作系列——字段名与字段别名的获取
- 【问题解决】java.sql.SQLException: null, message from server: “Host ‘xxx.xx.xx.xxx‘ is blocked because of
- 银河麒麟设置静态IP
- 机器学习——Matplotlib入门教程
- 选一个适合自己的加密芯片,加密IC,如何才能真正的做到不被破解。