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

时间:2020-01-04   作者:互联网搜集整理

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 (颜色主题),如下图一所示。然后会出现下图二红色框的界面,此时按键盘上的上下键即可实时查看主题颜色,直接回车可选中对应主题。

声明:内容仅供参考,图片和文章选取自网络,如侵权请联系删除。