visual studio code教程:基础使用和自定义设置

visual studio code是一款轻量编辑器,采取了和VS相同的UI界面,搭配合适的插件可以优化前端开发的体验,今天为大家介绍一下visual studio code的使用技巧,大家可以学习下 。
工具/材料
visual studio code
Windows系统
基础教程因为软件下载安装之后,是英文版,可以先将其汉化,变成中文版,更方便开发 。点击插件按钮搜索 “Chinese”, 在弹出的选项中选择第一个“中文简体” 。
visual studio code教程:基础使用和自定义设置

右边会弹出如下图安装界面,接着点击【 Install 】安装 。安装完毕后会有如下提示(主要提醒你安装完中文简体汉化包后一定要重启方可生效) 。
visual studio code教程:基础使用和自定义设置

visual studio code教程:基础使用和自定义设置

Vscode界面介绍:主要分为5个区域,依次是活动栏、侧边栏、编辑栏、面板栏、状态栏 。
visual studio code教程:基础使用和自定义设置

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

visual studio code教程:基础使用和自定义设置

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

visual studio code教程:基础使用和自定义设置

visual studio code教程:基础使用和自定义设置

自动保存设置 。选择File(文件)、Preferences(首选项)、 Setting (设置)然后弹出下面界面,选择“User”(一般会默认选中该选项),接着如下图选择“afterdelay”选项即可,下面有个数字1000表示1秒,这个可自行设置,表示多少秒以后自动保存 。
visual studio code教程:基础使用和自定义设置

【visual studio code教程:基础使用和自定义设置】

自动格式化代码 。选择File(文件)、 Preferences(首选项)、 Setting (设置) 。User(用户)、Text-Editor(文本编辑)、 Formatng(格式化),然后勾选下图红色框中的选项后,重启Vscode即可 。
visual studio code教程:基础使用和自定义设置

Vscode更换主题 。选择File(文件)、 Preferences(首选项)、Color-Theme (颜色主题),如下图一所示 。然后会出现下图二红色框的界面,此时按键盘上的上下键即可实时查看主题颜色,直接回车可选中对应主题 。
visual studio code教程:基础使用和自定义设置

visual studio code教程:基础使用和自定义设置