前端vscode常用插件、快捷键、以及常用技巧
哈喽,小可爱,欢迎你来到韩思颖的Blog,这是我自己总结的一些好用的插件、快捷键及技巧,希望能对你们有所帮助。
一、日常安利 VS code
VS code特点:
-
开源、免费;
-
自定义配置;
-
集成git;
-
智能提示强大;
-
支持各种文件格式(html/css/……);
-
调试功能强大;
-
各种好用的快捷键;
-
强大的插件扩展。
没毛病,前段如此的好,没理由不用它。快快使用起来
Visual Studio Code(VScode )官网: https://code.visualstudio.com/.
Visual Studio Code(VScode )github地址 :
https://github.com/Microsoft/vscode.
本篇文章先介绍常用的插件~~
二、VSCode常用插件
vscode之所以被称为天下第一神器,其实丰富的插件功不可没,安装起来也比较简单,给我们的开发带来了极大的便利。要注意哦,新手学习期间,不建议安装形形色色的插件,用得到什么安装什么。 因为有些插件会到vue学习的时候引起冲突,所以推荐一些比较常用的插件。
- Chinese(Simplified) 汉化
- Auto rename Tag
- One Dark Pro 主题颜色
- 格式化代码(vscode系统自带)或 Preittier
- open in browser 浏览器预览页面
- Live Server 实时预览
- vscode-icons 设置文件图标主题
- Easy LESS 编译less文件
1.Chinese (simplified)
vscode下载完显示的是英文版的,先安装这个插件,使vscode更改为中文版,所以这是我们首先要安装的第一个插件。
2.Auto rename Tag
修改开始标签,结束标签跟着自动变化,比较好用。
3.One Dark Pro
很不错的哦
页面效果:
4.格式化代码
(1)点击管理按钮–选择里面的设置命令
(2)选择用户–>文本编辑器–>正在格式化–>勾选如下图的2个按钮
5.Open in browser
编写完代码,需要浏览器预览,可以安装这个插件
6.Live Server
刚才的插件是可以预览我们的页面,但是改完代码,浏览器必须要重新刷新,比较麻烦,因此推荐各位小伙伴安装 live server 这个插件,修改完代码,自动更新浏览器,爽~~~
小技巧:
刚开始学习前端,基本页面很少,可以左边编辑器,右边浏览器,这样编写完毕代码,保存完毕后,浏览器自动更新了。
7.vscode-incons
可以很清楚看到文件对用的图标。
只是为了看文件更加直观哈
8.Easy LESS
我们写的less不能直接引入到html文件中, 通过这个插件可以自动帮我们生成 css文件
好的,这篇文章,先介绍到这里。下期见哦~
下一篇介绍下vsocde常见的快捷键。