visual studio code是一款轻量编辑器，采取了和VS相同的UI界面，搭配合适的插件可以优化前端开发的体验，今天为大家介绍一下visual studio code的使用技巧，大家可以学习下。

工具/材料

visual studio code

Windows系统

基础教程

因为软件下载安装之后，是英文版，可以先将其汉化，变成中文版，更方便开发。点击插件按钮搜索 “Chinese”, 在弹出的选项中选择第一个“中文简体”。



右边会弹出如下图安装界面，接着点击【 Install 】安装。安装完毕后会有如下提示（主要提醒你安装完中文简体汉化包后一定要重启方可生效）。





Vscode界面介绍：主要分为5个区域，依次是活动栏、侧边栏、编辑栏、面板栏、状态栏。



1.活动栏从上到下依次为，打开侧边栏、搜索、使用git、debug、使用插件；
2.侧边栏，新建项目文件和文件夹；
3.编辑栏，编写代码的区域；
4.面板栏，从左到右依次为：问题、输出、调试栏、终端（terminal）、最重要的是terminal，下图一所示，用来输入相关命令；
5.状态栏，点击可以调出面板栏；
6.需要注意的为下图二红框所示，分别表示鼠标光标所在位置和tab缩进字符，这里为缩进4个字符。





新建文件和文件夹
新建文件：Ctrl+N新建文件并修改后缀即可（后缀根据所需文件来，比如.html，.css，.js等）；
新建文件夹
1.首先根据需要指定一个路径（这里路径以桌面为例），然后新建一个文件夹（这里新建的文件夹为demo1）；
2.鼠标点击侧边栏第二个选项，如下图一；
3.此时会提示你没有可以打开的文件夹，点击【Open Folder】按钮导入桌面新建的文件夹demo1，如下图二；
4.把文件夹导入后发现刚刚新建文件夹名字是小写的，现在变大写了，如下图三，这个不影响（右边图标从左到右为，新建文件 / 新建文件夹 / 刷新 / 折叠文件）。
注：新建文件一定要修改后缀，否则默认都是text文本文件







自动保存设置。选择File（文件）、Preferences（首选项）、 Setting （设置）然后弹出下面界面，选择“User”（一般会默认选中该选项），接着如下图选择“afterdelay”选项即可，下面有个数字1000表示1秒，这个可自行设置，表示多少秒以后自动保存。



自动格式化代码。选择File（文件）、 Preferences（首选项）、 Setting （设置）。User（用户）、Text-Editor（文本编辑）、 Formatng（格式化），然后勾选下图红色框中的选项后，重启Vscode即可。



Vscode更换主题。选择File（文件）、 Preferences（首选项）、Color-Theme （颜色主题），如下图一所示。然后会出现下图二红色框的界面，此时按键盘上的上下键即可实时查看主题颜色，直接回车可选中对应主题。