前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航

初探vscode插件开发

首页
2021-01-03 15:01:24
Front-End
插件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 调试扩展插件很容易。这里演示一

fe
  • 搭建开发环境
  • 运行插件
  • 调试插件
    • 调试webview
  • 项目解析
    • 基本概念
    • JavaScript 插件目录结构
    • 清单文件:package.json
    • 插件入口文件:extension.js
  • Webview
    • 本地资源的使用
    • Webview与插件通信
  • 打包、发布和升级
  • 参考文档

← webpack plugin原理分析与实践小程序绘制海报总结 →