[开发工具]前端vscode常用插件、快捷键、以及常用技巧

哈喽，小可爱，欢迎你来到韩思颖的Blog,这是我自己总结的一些好用的插件、快捷键及技巧，希望能对你们有所帮助。

一、日常安利 VS code

VS code特点：

1. 开源、免费；

2. 自定义配置；

3. 集成git;

4. 智能提示强大；

5. 支持各种文件格式（html/css/……）；

6. 调试功能强大；

7. 各种好用的快捷键；

8. 强大的插件扩展。

   没毛病，前段如此的好，没理由不用它。快快使用起来

Visual Studio Code（VScode ）官网： https://code.visualstudio.com/.

Visual Studio Code（VScode ）github地址 ：
https://github.com/Microsoft/vscode.

本篇文章先介绍常用的插件~~

二、VSCode常用插件

vscode之所以被称为天下第一神器，其实丰富的插件功不可没，安装起来也比较简单，给我们的开发带来了极大的便利。要注意哦，新手学习期间，不建议安装形形色色的插件，用得到什么安装什么。 因为有些插件会到vue学习的时候引起冲突，所以推荐一些比较常用的插件。

1. Chinese(Simplified) 汉化
2. Auto rename Tag
3. One Dark Pro 主题颜色
4. 格式化代码（vscode系统自带）或 Preittier
5. open in browser 浏览器预览页面
6. Live Server 实时预览
7. vscode-icons 设置文件图标主题
8. 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常见的快捷键。