vscode入门! 小白都能看懂的VS Code保姆级级使用教程

现在使用VS code进行前端开发的人越来越多，凭借着免费，开源，轻量，跨平台的特点收获了一大批忠实粉丝。相对于其它前端工具来说，VS Code显得更加的流畅，更加的轻量级。下面，就将我的学习经历和大家分享一下，希望可以帮助到有需要的人。

一、VS Code的下载和安装

官网下载:https://code.visualstudio.com/，下面是我们提供的软件下载。

Visual Studio Code(代码编辑器) v1.109.5 64位 中文免费绿色版

• 类型：编译工具
• 大小：171MB
• 语言：简体中文
• 时间：2026-02-25

查看详情

下载好之后就直接默认安装就行了。这里应该没有什么难度。

二、先来汉化一下吧。英语好的人可以略过。

安装好之后默认是英文的，对于英语好的同学可以略过此步。先点击最左边下面的插件安装按钮，在输入框中输入chinese。

或者点击右边的安装按钮也可以:

安装好之后，右下角会弹出一个对话框，提示重启[Restart Now],重启之后，就是中文界面了。

三.VS code界面介绍

活动栏从上到下依次为，打开侧边栏，搜索使用git，debug，使用插件

侧边栏，新建项目文件和文件夹

编辑栏，编写代码的区域

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

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

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

四、新建文件和文件夹

新建文件:Ctr+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即可

七.VS Code更换主题

File(文件)-Preferences(首选项)-Color-The me(颜色主题）

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

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

八、常用快捷键

(只列出了很小一部分常用快捷键)

• Ctrl +/(单行注释
• Shift + Alt +A(多行注释)若要取消单行或多行注释再按一次该快捷键即可
• Ctrl + Shift + Enter (上方插入一行，鼠标光标在当前行的任意位置都可以直接换行到上一行)
• Ctrl + Enter (下方插入一行，鼠标光标在当前行的任意位置都可以直接换行到下一行
• Alt + Shift +F(格式化代码，不需要全选中代码，直接格式化即可)
• Ctrl+ Shift +F(查找文件)点击设置选择 keyboard shortcuts，右边会弹出所有快捷键目录

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

最新评论