初探vscode插件开发-前端进阶之旅

趁着元旦假期最后一天，初次尝试了一下vscode插件开发，写了一个前端工具箱作为日常方便使用，记录一下

在vscode插件里面搜索：前端工具箱。或打开该网址安装即可 https://marketplace.visualstudio.com/items?itemName=poetries.fe-tools

# 搭建开发环境

我们先准备开发环境。我使用的操作系统：mac，首先确保安装了VS Code、Node.js 和 Git：

code -v
node -v
npm -v
git --version

@前端进阶之旅: 代码已经复制到剪贴板

https://code.visualstudio.com/api/get-started/your-first-extension

npm install -g yo generator-code

@前端进阶之旅: 代码已经复制到剪贴板

使用yo code指令初始化VSCode插件项目，然后需要回答一些简单的配置问题

yo code

# What type of extension do you want to create? 
# 创建那一种类型的扩展？

# What's the name of your extension?
# 扩展的名称？

# What's the identifier of your extension?
# 扩展的标示？

# What's the description of your extension?
# 扩展的描述

# Initialize a git repository? 
# 初始化git仓库

# Which package manager to use? 
# 使用那一种包管理器

@前端进阶之旅: 代码已经复制到剪贴板

# 运行插件

使用 VS Code 打开项目，在编辑器内部，按F5，编译并打开一个“扩展开发宿主机”窗口运行调试插件。为了叙述方便，把新打开的窗口称为运行窗口，旧窗口称为编辑窗口。在新窗口的命令面板（Ctrl+Shift+P）运行 Hello World 命令。看到右下角的 Hello World 通知信息了吗？恭喜你已经运行了一个自己编写的插件！

# 调试插件

使用 VS Code 调试扩展插件很容易。这里演示一

# 搭建开发环境

我们先准备开发环境。我使用的操作系统：mac，首先确保安装了VS Code、Node.js 和 Git：

code -v
node -v
npm -v
git --version

@前端进阶之旅: 代码已经复制到剪贴板

npm install -g yo generator-code

@前端进阶之旅: 代码已经复制到剪贴板

使用yo code指令初始化VSCode插件项目，然后需要回答一些简单的配置问题

yo code

# What type of extension do you want to create? 
# 创建那一种类型的扩展？

# What's the name of your extension?
# 扩展的名称？

# What's the identifier of your extension?
# 扩展的标示？

# What's the description of your extension?
# 扩展的描述

# Initialize a git repository? 
# 初始化git仓库

# Which package manager to use? 
# 使用那一种包管理器

@前端进阶之旅: 代码已经复制到剪贴板

# 运行插件

使用 VS Code 打开项目，在编辑器内部，按F5，编译并打开一个“扩展开发宿主机”窗口运行调试插件。为了叙述方便，把新打开的窗口称为运行窗口，旧窗口称为编辑窗口。在新窗口的命令面板（Ctrl+Shift+P）运行 Hello World 命令。看到右下角的 Hello World 通知信息了吗？恭喜你已经运行了一个自己编写的插件！