-
visual studio code教程:基础使用和自定义设置
- 作者:谢梦罗 分类:电脑技术 发布时间:2017-06-10 15:11:16
visual studio code是一款轻量编辑器,采取了和VS相同的UI界面,搭配合适的插件可以优化前端开发的体验,今天为大家介绍一下visual studio code的使用技巧,大家可以学习下。 工具/材料 visual studio code Windows系统 基础教程 01因为软件下载安装之后,是英文版,可以先将其汉化,变成中文版,更方便开发。点击插件按钮搜索 “Chinese”, 在弹出的选项中选择第一个“中文简体”。 02右边会弹出如下图安装界面,接着点击【 Install 】安装。安装完毕后会有如下提示...
visual studio code是一款轻量编辑器,采取了和VS相同的UI界面,搭配合适的插件可以优化前端开发的体验,今天为大家介绍一下visual studio code的使用技巧,大家可以学习下。
工具/材料
visual studio code
Windows系统
基础教程
01因为软件下载安装之后,是英文版,可以先将其汉化,变成中文版,更方便开发。点击插件按钮搜索 “Chinese”, 在弹出的选项中选择第一个“中文简体”。
02右边会弹出如下图安装界面,接着点击【 Install 】安装。安装完毕后会有如下提示(主要提醒你安装完中文简体汉化包后一定要重启方可生效)。
03Vscode界面介绍:主要分为5个区域,依次是活动栏、侧边栏、编辑栏、面板栏、状态栏。
041.活动栏从上到下依次为,打开侧边栏、搜索、使用git、debug、使用插件; 2.侧边栏,新建项目文件和文件夹; 3.编辑栏,编写代码的区域; 4.面板栏,从左到右依次为:问题、输出、调试栏、终端(terminal)、最重要的是terminal,下图一所示,用来输入相关命令; 5.状态栏,点击可以调出面板栏; 6.需要注意的为下图二红框所示,分别表示鼠标光标所在位置和tab缩进字符,这里为缩进4个字符。
05新建文件和文件夹 新建文件:Ctrl+N新建文件并修改后缀即可(后缀根据所需文件来,比如.html,.css,.js等); 新建文件夹 1.首先根据需要指定一个路径(这里路径以桌面为例),然后新建一个文件夹(这里新建的文件夹为demo1); 2.鼠标点击侧边栏第二个选项,如下图一; 3.此时会提示你没有可以打开的文件夹,点击【Open Folder】按钮导入桌面新建的文件夹demo1,如下图二; 4.把文件夹导入后发现刚刚新建文件夹名字是小写的,现在变大写了,如下图三,这个不影响(右边图标从左到右为,新建文件 / 新建文件夹 / 刷新 / 折叠文件)。 注:新建文件一定要修改后缀,否则默认都是text文本文件
06自动保存设置。选择File(文件)、Preferences(首选项)、 Setting (设置)然后弹出下面界面,选择“User”(一般会默认选中该选项),接着如下图选择“afterdelay”选项即可,下面有个数字1000表示1秒,这个可自行设置,表示多少秒以后自动保存。
07自动格式化代码。选择File(文件)、 Preferences(首选项)、 Setting (设置)。User(用户)、Text-Editor(文本编辑)、 Formatng(格式化),然后勾选下图红色框中的选项后,重启Vscode即可。
08Vscode更换主题。选择File(文件)、 Preferences(首选项)、Color-Theme (颜色主题),如下图一所示。然后会出现下图二红色框的界面,此时按键盘上的上下键即可实时查看主题颜色,直接回车可选中对应主题。
猜您喜欢
- VS Code一键设置中文,告别语言困扰..2023-12-19
- 揭秘VSCode:快速注释代码的神秘快捷键..2023-12-16
- vscode注释快捷键是什么..2023-11-26
- VisualStudio2015生成sln客户端的图文教程..2023-10-11
- Win7安装Visual Studio 2015 (VS2015)完美图文..2023-02-08
- vscode安装教程|vscode安装+配置详细步骤..2023-02-04
相关推荐
- 电脑内存8G和16G有什么区别?教你区别..2021-06-11
- Word如何只打印部分文字?Word只打印部..2021-03-19
- excel中怎样用身份证号计算年龄..2017-06-22
- 联想拯救者:解锁摄像头,让游戏世界..2023-12-11
- 轻松掌握!Win11设置双音频输出,让声..2023-12-12
- 怎样将WPS文本另存为word的doc格式..2017-10-01