【1】Visual Studio Code is not just another evolved notepad with syntax colorization and automatic indentation. Instead, it is a very powerful code-focused development environment expressly designed to make it easier to write web, mobile, and cloud applications using languages that are available to different development platforms and to support the application development lifecycle with a built-in debugger and with integrated support to the popular Git version control engine.

With Visual Studio Code, you can work with individual code files or with structured file systems based on folders.

Visual Studio Code has been the first cross-platform development tool in the Microsoft Visual Studio family that runs on Windows, Linux, and macOS. It is free, open source (https://github.com/Microsoft/vscode), and it is definitely a code-centric tool, which makes it easier to edit code files and folder-based project systems as well as writing cross-platform web and mobile applications over the most popular platforms, such as Node.js and .NET Core, with integrated support for a huge number of languages and rich editing features such as IntelliSense, finding symbol references, quickly reaching a type definition, and much more. Visual Studio Code is based on Electron (https://electronjs.org/), a framework for creating cross-platform applications with native technologies, and combines the simplicity of a powerful code editor with the tools a developer needs to support the application lifecycle development, including debuggers and version control integration based on Git. It is therefore a complete development tool, rather than being a simple code editor. For more advanced coding and development, you will certainly consider Microsoft Visual Studio 2017 on Windows and Visual Studio for Mac on macOS, but Visual Studio Code can be really helpful in many situations.( Visual Studio Code Distilled. P1-P2)

【2】Visual Studio Code is an extremely versatile development tool that can be customized and extended in many ways. In fact, you can customize its appearance, the code editor, and key shortcuts to make your editing experience extremely personalized.

Additionally, you can install third-party extensions such as new languages, debuggers, themes, linters, and code snippets. This chapter explains how to customize Visual Studio Code, explaining the difference between customizations and extensions. Then, in the next chapter, you will learn how to work with extensions.

You can personalize the environment of Visual Studio Code with both customizations and extensions. The difference is that extensions add new instrumentation or they add functionalities to a tool or change the behavior of existing functionalities. Implementing IntelliSense for a language that does not have it by default, adding commands to the status bar, and adding custom debuggers are examples of extensions.( Visual Studio Code Distilled. P95)

【3】Visual Studio Code is built with extensibility in mind. From the UI to the editing experience, almost every part of VS Code can be customized and enhanced through the Extension API. In fact, many core features of VS Code are built as extensions and use the same Extension API.( Visual Studio Code Extension. [OL])

【4】Visual Studio Code - Open Source

VS Code is a type of tool that combines the simplicity of a code editor with what developers need for their core edit-build-debug cycle. It provides comprehensive editing and debugging support, an extensibility model, and lightweight integration with existing tools.

VS Code is updated monthly with new features and bug fixes. You can download it for Windows, macOS, and Linux on VS Code#39;s website. To get the latest releases every day, you can install the Insiders version of VS Code. This builds from the master branch and is updated daily at the very least.

The vscode repository is where VS Code is developed and there are many ways in which you can participate in the project, for example:

• Submit bugs and feature requests and help us verify as they are checked in.
• Review source code changes.
• Review the documentation and make pull requests for anything from typos to new content.

Bundled Extensions

Code ships with a set of extensions. These extensions are located in the extensions folder. These extensions include grammars and snippets for several languages. Extensions that provide rich language support (code completion, go to definition) for a language have the suffix #39;language-features#39;. For example, the #39;json#39; extension provides coloring for JSON and the #39;json-language-features#39; provides rich language support for JSON.

【5】What can extensions do?

Here are some examples of what you can achieve with the Extension API:

• Change the look of VS Code with a color or icon theme - Theming
• Add custom components amp; views in the UI - Extending the Workbench
• Create a Webview to display a custom webpage built with HTML/CSS/JS - Webview Guide
• Support a new programming language - Language Extensions Overview
• Support debugging a specific runtime - Debugger Extension Guide( Visual Studio Code Extension. [OL])

【6】Extension Anatomy

In the last topic, you were able to get a basic extension running. How does it work under the hood?

The Hello World extension does 3 things:

• Registers the onCommand Activation Event: onCommand:extensio

  【1】Visual Studio Code并不仅是一个拥有自动缩进和语法高亮功能的高级版记事本，相反，它是一个有着许多功能并以代码为中心的开发集成环境，更重要的是它被设计用于在不同的开发平台上更快捷的开发应用，它同时内置了应用调试开发功能，并且集成了流行的Git版本控制引擎。

  通过Visual Studio Code，您可以单独编辑源代码文件或者是在基于文件夹的结构化文件系统上编辑文件。

  在运行在Windows，Linux，macOS系统上微软开发的Visual Studio系列软件中，Visual Studio Code成为了第一个跨平台的开发工具。VSCode是免费开源的，并且它被认为是一个以代码为中心的工具，因此这让它更容易编辑代码文件或者基于文件夹的项目,以及更容易在流行的平台(如node.js和.net core)上开发网页端和移动端应用程序。它内置了对许多语言的支持以及拥有丰富的编辑功能(如智能感知)和查找符号引用、快速跳转类型定义等功能。Visual Studio Code是基于Electron(https://electronjs.org/)开发的。Electron是使用native技术开发并用于创建跨平台应用的框架，它将代码编辑器的简洁，开发人员需要的应用程序开发功能，调试和基于Git版本控制的功能相结合。因此它是一个完整的开发工具，而不是一个简单的代码编辑器。如果需要强大的代码编辑功能，您肯定会考虑在Windows上使用Microsoft Visual Studio 2017或者在Mac的macOS系统上使用Visual Studio，但是大多数情况下，Visual Studio Code真的很有帮助

  【2】Visual Studio Code是一个用途极为广泛的开发工具，它可以通过多种方式对功能进行自定义和扩展。事实上，您可以定制其外观、代码编辑器和快捷键，让您的开发体验更加个性化。

  此外，还可以安装第三方插件，用于支持新的编程语言、调试器、主题、提示和代码片段。本章将介绍如何定制Visual Studio Code，解释定制和使用插件之间的区别。然后, 在下一章中, 您将学习如何使用插件。

  您可以通过设置或者插件对Visual Studio Code的环境进行个性化设置。两者不同之处在于, 插件会添加新的检测功能，或者向工具添加功能或更改现有功能的行为。例如，为默认情况下没有智能提示的语言添加智能提示，在状态栏中添加命令，以及添加自定义调试器。

  【3】Visual Studio Code最初是以易扩展性的目的被开发出来的。从应用界面到编程体验，几乎每一个VS Code的部分都可以通过插件开发接口进行定制甚至升级。事实上，VS Code的很多核心特征都是建立在使用插件或相同的插件开发接口的基础上。( Visual Studio Code Extension. [OL])

  【4】Visual Studio Code-开源

  VS Code是一款工具，它将代码编辑器的简洁性与开发人员对其核心编辑-编译-调试功能的需求结合在一起。它提供完整的编辑功能和调试支持、可插件性模板以及现有工具的轻量级集成。

  VS Code每月都会更新功能或者修复错误。您可以在VS Code的网站上下载适应Windows、macOS和 Linux不同的操作系统的版本。如果想要获取最新版本，您可以安装VS Code的内部版本。这是从master branch生成的，至少每天都会更新。

  VS Code仓库是开发VS Code的地方，您可以通过多种方式参与项目，例如:

  • 提交错误和功能请求, 并帮助我们在签入时进行验证。
  • 查看源代码的更改。
  • 查看文档并对从拼写到新内容的任何错误内容提出反馈。

  捆绑插件

  代码附带了一组插件。这些插件位于插件文件夹中。这些插件包括几种语言的语法和代码片段。为一种语言提供大量的语言支持(代码填充,定义跳转)的插件具有后缀' language-features'。例如，'json'插件为json提供高亮，' json-language-features'为json提供大量的语言支持。

  【5】插件可以做什么？

  这儿有一些可以通过插件开发接口实现的案例：

  • Theming-改变VS Code的界面颜色或图标主题
  • Extending the Workbench-在界面上添加定制的按钮或视图
  • Webview Guide-创建一个基于HTML/CSS/JS的自定义网页的网页视图
  • Language Extensions Overview-支持一种新的编程语言
  • Debugger Extension Guide-支持调试专门的运行环境

  【6】插件分析

  在上一个主题，您能使一个基础插件运行。暗地里它是怎么工作的呢？

  • 注册onCommand Activation Events：onCommand: extension.helloWorld，所以当用户运行Hello World命令时开始激活。
  • 使用contributes.commands Contribution Point使命令Hello World在命令菜单中能够使用，和命令ID extension.helloWorld捆绑在一起。
  • 使用commands.registerCommand VS Code API来捆绑函数以此注册命令ID extension.helloWorld。

  为了编写VS Code插件，明白以下三个概念是很重要的：

  • Activation Events：激活插件的事件
  • Contribution Points：
  • VS Code API：一组可以在您的插件代码中调用的JavaScript API。

  一般而言，您的插件将结合使用VSCode中Contribution Points和VS Code API的功能。插件功能可以帮助您为您的插件找到正确的Contribution Point和VS Code API。

  让我们进一步的查看作为案例的Hello World插件的源代码，看看这些概念在它上面怎么使用的。

  插件文件结构：

  ├── .vscode

  │ ├── launch.json // Config for launching and debugging the extension

  │ └── tasks.json // Config for build task that compiles TypeScript

  ├── .gitignore // Ignore build output and node_modules

  ├── README.md // Readable description of your extension#39;s functionality

  ├── src

  │ └── extension.ts // Extension source code

  ├── package.json // Extension manifest

  ├── tsconfig.json // TypeScript configuration

  配置

  关于配置文件，您还可以看到更多：

  • launch.json用于配置VS Code调试功能
  • tasks.json用于定义VS Code任务
  • tsconfig.json用于查询TypeScript配置

  然后，让我们关注package.json和extension.ts，为了理解Hello World插件，它们是必不可少的。

  Extension Manifest

  每个VS Code插件必须有一个package.json作为它的Extension Manifest。Package.json包含了Node.js域和VS Code特殊域的混合，例如，Node.js域中的脚本，依赖库，VS Code特殊域中的开发者，活动事件和贡献。您可以在Extension Manifest参考中找到所有的VS Code特殊域的描述。这里有一些重要的域：

  • name and publisher：对插件而言，VS Code使用lt;publishergt;.lt;namegt;作为一个独特的ID。例如，Hello World有着ID vscode-samples.helloworld-sample。VS Code使用这个独特的ID辨别您的插件。
  • main：插件进入接口。
  • activationEvents和contributes：Activation Events和Contribution Points.
  • engines.vscode：这个表明了插件依赖的VS Code API的最低版本。
  • The postinstall script：这个将会安装VS Code API的1.25版本作为engines.vscode的特定版本。一旦vscode.d.ts文件下载到node_modules/vscode/vscode.d.ts，在VS Code API的所有使用情况下，您将会获得智能感知，定义跳转和错误检查的功能。

  {

  'name': 'helloworld-sample',

  'displayName': 'helloworld-sample',

  'description': 'HelloWorld example for VS Code',

  'version': '0.0.1',

  'publisher': 'vscode-samples',

  'repository': 'https://github.com/Microsoft/vscode-extension-samples/helloworld-sample',

  'engines': {

  'vscode': '^1.25.0'

  },

  'categories': ['Other'],

  'activationEvents': ['onCommand:extension.helloWorld'],

  'main': './out/extension.js',

  'contributes': {

  'commands': [

  {

  'command': 'extension.helloWorld',

  'title': 'Hello World'

  }

  ]

  },

  'scripts': {

  'vscode:prepublish': 'npm run compile',

  'compile': 'tsc -p ./',

  'watch': 'tsc -watch -p ./',

  'postinstall': 'node ./node_modules/vscode/bin/install'

  },

  'devDependencies': {

  '@types/node': '^8.10.25',

  'tslint': '^5.11.0',

  'typescript': '^2.6.1',

  'vscode': '^1.1.22'

  插件入口文件

  插件入口文件实现两个功能：激活和注销。当您注册Activation Event时执行激活功能。在您的插件注销前，注销将会给您提供一次机会清理。VS Code模块包含一个位于节点./node_module

  资料编号：[3699]