Visual Studio Code 入门教程

本文详细介绍了Visual Studio Code(VSCode)的入门教程,包括其功能特性、安装步骤、汉化方法及初次使用的注意事项。VSCode是一款跨平台的免费源代码编辑器,具备语法高亮、代码自动补全、调试功能等。文章还提供了Windows和Mac的安装过程,并展示了如何在命令行中使用VSCode。此外,还提到了如何通过安装扩展实现汉化,以及如何利用命令面板和界面概览提高开发效率。
摘要由CSDN通过智能技术生成

一、入门教程

1.1 简介

  Visual Studio Code ,简称 VSCode。它是一款由微软开发且跨平台的轻量级但功能强大的免费源代码编辑器。该软件支持语法高亮、代码自动补全、代码重构、查看定义功能,并且内置了命令行工具和 Git 版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置,也可以通过内置的扩展程序商店安装扩展以拓展软件功能。

image

  Visual Studio Code 默认支持非常多的编程语言,包括 JavaScript、TypeScript、CSS 和 HTML;

image

  也可以通过下载扩展支持 Python、C/C++、Java 和 Go 在内的其他语言。支持功能包括语法高亮、括号补全、代码折叠和代码片段;对于部分语言,可以使用 IntelliSense。Visual Studio Code 也支持调试 Node.js 程序。和 GitHub 的 Atom一样,Visual Studio Code 也基于 Electron 框架构建。作为跨平台的编辑器,Visual Studio Code 允许用户更改文件的代码页、换行符和编程语言。

image

1.2 帮助文档

image

二、VScode 安装

2.1 下载安装文件

  VS Code 有两个不同的发布渠道:一个是我们经常使用的稳定版(Stable),每个月发布一个主版本;另外一个发布渠道叫做 Insiders,每周一到周五早上6点从最新的代码发布一个版本,这也是 VS Code 团队在使用的版本,目标是可以第一时间用上自己新加的功能并及时发现问题。
  我们可以在 VScode 官网首页下载(https://code.visualstudio.com/)对应系统(支持Windows、Linux、macOS)的软件,点击绿色下载按钮旁的下拉按钮,就可以针对不同平台选择可用的 Insiders 版本了。而且,VS Code 安装完之后就会自动更新,你并不需要前往官网重新下载。

image

2.1 Mac 安装

VSCode 安装很简单,前往官网下载安装包:Visual Studio Code - Code Editing. Redefined。打开下载好的安装包依次点击:同意协议-下一步-下一步-安装。

2.2 Windows 安装

  1. 下载安装包,然后双击打开安装包,点击 Next。

    image

  2. 选中接受协议选项,然后点击 Next。

    • 同意使用协议,Visual Studio Code使用MIT开源协议,内容也就是授予商业和私人使用,以及免责条款。

    image

  3. 选择安装路径,也可以直接使用默认的。

    image

  4. 点击 Next,在开始菜单文件夹中创建VSCode的快捷方式。你可以选择更改开始菜单文件夹名字,或者不创建开始菜单文件夹,这一步无论你如何选择,实际上几乎不影响你使用VS Code。

    image

  5. 注意安装路径设置、环境变量默认自动添加到系统中,勾选以下所有选项。这一步按个人习惯选择是否创建桌面快捷方式,其他中的选项建议四项全选,它们分别对应在目录、文件和未知文件中用Visual Studio Code打开。

    image

  6. 这一步Visual Studio Code会提示要安装的任务,点击安装即可。

    image

  7. 这一步Visual Studio Code会开始执行安装任务,中途可以取消但不建议这么做。

    image

  8. 开始安装后会自动进行到这一步中Visual Studio Code,然后提示安装完成,默认勾会选打开vscode,点击完成将会打开vscode

    image

2.3 汉化Vscode

启动之后是这个界面(大家会发现是英文的,安装一下中文插件即可)

image

点有左侧打开拓展商店(Ctrl+shitr+X),然后搜索Chinese,安装出现的第一个即可,然后重启一下Vs code,ok汉化完成。
在这里插入图片描述

三、初次使用

2.1 欢迎界面

  Visual Studio Code 第一次启动后会显示一个“欢迎使用”的页面,这个界面主要是方便你快速打开文件、文件夹以及访问历史文件,同时还会附带一些帮助信息,,方便打开用户打开最近打开的工程进行编辑和修改。以下是 VScode 启动后的界面,简单说明如图:

image

image

2.2 命令面板

  命令面板是 VS Code 快捷键的主要交互界面,可以使用f1或者Cmd+Shift+P (win 上是Ctrl+Shift+P) 打开。在命令面板中你可以输入命令进行搜索(中英文都可以),然后执行。命名面板中可以执行各种命令,包括编辑器自带的功能和插件提供的功能。

image

  你可以在命令面板中快速搜索命令并且执行。如果你的 VS Code 是简体中文版,那么你可以在命令面板里使用中文或者英文来搜索命令。VS Code 的绝大多数命令都可以在命令面板里搜到,所以熟练使用命令面板,你就可以摆脱鼠标,完全通过键盘操作来完成全部编码工作。

2.3 界面概览

  界面概览,它展示了 VS Code 默认界面里的不同部件的位置、名称和快捷键。VS Code 强调无鼠标操作,但是对于初学者而言快捷键的记忆是个麻烦,这个界面恰好可以帮助你渡过最初的不适应阶段。

image

2.4 命令行的使用

  命令行你应该不陌生,我们脑海中的大神级程序员都是可以在Linux中随意敲打长串的命令,或是与黑客斗智斗勇,或是解决某个紧急的线上问题。而对于VS Code而言,最基础的命令行当然是让你能够不动鼠标,就能快速打开界面了。
  如果你是 Windows用户,安装并重启系统后,你就可以在命令行中使用 code 或者 code-insiders了,如果你希望立刻而不是等待重启后使用,可以将 VS Code 的安装目录添加到系统环境变量 PATH中, Windows 64 位下的 VS Code 安装路径是 C:\Program FIles\Microsoft VS Code下。如果你是在 macOS 上使用,安装后打开命令面板,搜索Shell 命令:在 PATH 中安装 “Code” 命令并执行,然后重启终端模拟就可以了。

image

  接下来,我们看一下 VS Code 的命令行都支持哪些操作,这里我先运行了 code --help来打印出 VS Code 命令行所支持的所有参数。

image

  最基本的命令行使用方式是在 code 命令后加上文件或者文件夹的地址,这样VS Code 就会在一个新窗口中打开这个文件或文件夹。如果你希望使用已经打开的窗口来打开文件,可以在 code 命令后添加参数 -r来进行窗口的复用。

image

  VS Code 也可以用来比较两个文件的内容,你只需使用 -d参数,并传入两个文件路径,比如输入 code -r -d a.txt b.txt命令,就可以比较a.txt和b.txt两个文件的内容了。有了这个命令,你就可以既使用命令行运行脚本,也可以借助 VS Code 的图形化界面进行文件内容的对比了。

image

好的,下面是Visual Studio Code的使用教程: 1.下载和安装Visual Studio Code 首先,你需要从Visual Studio Code的官网下载安装包并安装。下载地址:https://code.visualstudio.com/ 2.打开Visual Studio Code 安装完成后,打开Visual Studio Code。它的主界面分为四个部分:顶部菜单栏、左侧的资源管理器、右侧的编辑器和底部的状态栏。 3.打开项目 在Visual Studio Code中打开项目,可以通过以下两种方式: (1)点击左侧的资源管理器,选择要打开的项目文件夹。 (2)在Visual Studio Code的主界面中,点击“文件”菜单,选择“打开文件夹”,然后选择要打开的项目文件夹。 4.编辑代码 在Visual Studio Code中,可以通过以下方式编辑代码: (1)在右侧的编辑器中直接编辑代码。 (2)使用插件来增强编辑器功能,例如自动完成、代码高亮等。 5.调试代码 Visual Studio Code提供了强大的调试功能,可以帮助开发者快速发现和修复代码中的问题。要使用调试功能,需要进行以下步骤: (1)在代码中添加断点。 (2)选择要调试的文件。 (3)点击“调试”菜单中的“开始调试”。 6.使用插件 Visual Studio Code支持插件扩展,可以通过插件来增强编辑器的功能。要使用插件,需要进行以下步骤: (1)点击左侧的“扩展”按钮。 (2)在搜索框中输入要安装的插件名称。 (3)点击“安装”按钮。 以上就是Visual Studio Code的基本使用教程,希望对你有所帮助!
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

独泪了无痕

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值