VS Code插件开发-全部流程介绍（一）

VS Code插件开发 - 全部流程介绍（一）

本系列博客列表：

VS Code插件开发-全部流程介绍（一）项目构建
VS Code插件开发-全部流程介绍（二）项目结构解读
VS Code插件开发-全部流程介绍（三）VSCode工作台扩展及相关API
VS Code插件开发-全部流程介绍（四）

目录
 前言
 环境配置
 创建插件项目

前言

  笔者最近参与了一个制作VS Code插件的项目。由于之前没有这方面的经验，所以花了一段时间来整理插件开发的相关知识。VS Code凭借着强大的可扩展性，现在已经成为了开发者手中的常用编辑器。通过安装各种插件，VS Code能够实现各种功能（例如：界面优化、主题扩展、代码高亮、编译和调试等）。当然，只要有需求和想法，更多更新颖的插件会越来越多，毕竟没有什么问题是代码解决不了的。笔者后期也想着能够多做些实用的插件来提高工作效率，故写下该系列的文章，用来记录之前学习的知识，以便后面回忆，同时也希望能给有兴趣开发VS Code插件但缺少经验的朋友们带来一点帮助。

环境配置

  在使用新的语言进行开发时，第一步肯定是通过Hello World程序来开始。这里先介绍一下插件开发前需要进行的相关配置，防止在开发过程中出现各种问题。
注意：笔者使用的是Ubuntu系统，所以开发环境是Linux

开发语言
  VS Code插件可以使用TypeScript[官方推荐]或者JavaScript来编写。可以根据个人习惯进行开发语言选择，至于二者的关系，网上应该有很多正规的讲解，这里不再赘述。

安装脚手架
  这是微软官方提供的脚手架vscode-generator-code。安装脚手架之前，需要先安装NodeJs(安装步骤)。使用脚手架可以快捷生成一份干净的项目框架代码，能帮助我们简化繁琐的项目搭建步骤。
  执行命令安装：

sudo npm install -g yo generator-code

  若提示“npm”尚未安装，则执行以下命令：

sudo apt install npm
sudo npm install -g yo generator-code

  如果安装过程出现”npm ERR!“，可能是node版本太低，可手动更新node。

安装NodeJs
  安装步骤：

#检查更新
sudo apt-get update
#安装apt工具提供的低版本node，后面进行更新即可
sudo apt-get install nodejs
sudo apt install nodejs-legacy
#安装npm，已安装可忽略
sudo apt install npm
#更换淘宝镜像，必须步骤
sudo npm config set registry https://registry.npm.taobao.org
#安装更新版本工具N
sudo npm install n -g
#更新node版本
sudo n stable

创建插件项目

  为了能进一步解释插件开发过程中的细节，笔者现在会从零开始，开发一个新的插件。然后根据功能点和注意点来和各位朋友进行交流。
  首先，当然就是创建一个新的项目，这里就会用到刚才下载的脚手架。
创建步骤：

• 进入到工作目录
• 执行命令yo code

yo code

• 选择插件类型（颜色主题、语言支持等），这里笔者选择“New Extension（JavaScript）”
• 根据提示，一步步选择完成后，一个可直接运行的项目便创建成功了
  

运行步骤：

• VS Code打开创建的项目
• 点击F5运行，会弹出“扩展开发宿主”页面
• 在“扩展开发宿主”页面，点击Ctrl+Shift+p，会弹出命令输入框
• 输入“Hello World”，回车
• 页面右下角会弹出提示框，显示“Hello World”

  现在已经实现了插件的运行，并验证了最基本的Hello World，后续文章中，会基于该项目进行结构说明和内容填充。