前言

目前，越来越多的人使用VS code进行前端开发，以免费、开源、轻量、跨平台的特点吸引了众多忠实粉丝。 与其他前端工具相比，vs代码看起来更流畅、更轻便。

那么，我希望能和大家分享我的学习经验，帮助到有需要的人。

一VS Code的下载和安装

官网下载： https://代码. visual studio.com /

下载后直接默认安装即可。 这里应该没有什么困难。

2 .先汉化吧。 英语好的人可以通过。

安装后默认为英语。 对于英语好的同学可以跳过这一步。

首先单击最左下角的插件安装按钮，然后在输入框中键入chinese

或者，也可以点击右侧的安装按钮。

安装完成后，右下方会显示一个对话框，提示您重新启动“立即重新启动”。 重新启动后，成为中文界面。

vs代码接口介绍

)事件栏从上到下依次打开侧栏进行检索，使用git、debug、插件

)新建侧栏、项目文件和文件夹

)编辑栏、写入代码的区域

)面板栏，从左到右依次是问题、输出、调试栏、终端(terminal，最重要的是terminal，输入相关的命令

:状态栏，点击该区域可以调出面板栏

:需要注意的是，如下图的红色框所示，分别表示鼠标光标所在的位置和制表符缩进字符，这里为4个字符缩进

4 .创建新文件和文件夹

新文件： Ctrl N创建新文件，修改后缀即可。 根据需要的文件(如. html、 css、 js等)添加后缀。

新建文件夹

)首先根据需要指定路径，然后创建新文件夹(这里创建的文件夹是demo1) )。

)用鼠标点击侧栏的第2个选择项，则如下图所示

)此时没有要打开的文件夹，请点击Open Folder按钮，将新创建的文件夹demo1导入桌面

)导入文件夹后，新创建的文件夹的名称是小写的。 现在变成了大写字母。 这个没有影响，所以不用太在意

=”https://p6.toutiaoimg.com/origin/pgc-image/faef88eec80a4d86855237742dbf89fe?from=pc”>

（右边图标从左到右为，新建文件 / 新建文件夹 / 刷新 / 折叠文件）

注：新建文件一定要修改后缀，否则默认都是text文本文件

五.自动保存设置

File（文件）- Preferences（首选项）– Setting （设置）然后弹出下面界面，选择User（一般会默认选中该选项），

接着如下图选择afterdelay选项即可，下面有个数字1000表示1秒，这个可自行设置，表示多少秒以后自动保存

六．自动格式化代码

File（文件）- Preferences（首选项）- Setting （设置）

User（用户）- Text-Editor（文本编辑）- Formatng（格式化）

然后勾选下图红色框中的选项后重启Vscode即可

七．Vscode更换主题

File（文件）- Preferences（首选项）- Color-Theme （颜色主题）

然后会出现下图红色框的界面，此时按键盘上的上下键即可实时查看主题颜色，直接回车可选中对应主题　

注：可以点击插件直接搜索 theme 下载其它非内置主题

八．常用快捷键

（只列出了很小一部分常用快捷键）

Ctrl + / （单行注释）

Shift + Alt + A （多行注释）若要取消单行或多行注释在按一次该快捷键即可

Ctrl + Shift + Enter （上方插入一行，鼠标光标在当前行的任意位置都可以直接换行到上一行）

Ctrl + Enter （下方插入一行，鼠标光标在当前行的任意位置都可以直接换行到下一行）　　

Alt + Shift + F （格式化代码，不需要全选中代码，直接格式化即可）

Ctrl + Shift + F （查找文件）

点击设置选择 keyboard shortcuts，右边会弹出所有快捷键目录

如果汉化了的同学请参照图片找到相应的选项或菜单

好了到这大家VS Code应该就没问题了，另外我这里还有一些用VS Code做的实战项目，有需要的可以私信我哦！