Kairyou's Blog

• VS Code Extension - VSCode 插件开发

  发布时间: 2024-09-10 / 分类: 开发 / No Comments

  Developing

  # 生成脚手架
  npx --package yo --package generator-code -- yo code
  # - What type of extension do you want to create? # 插件类型选择
  # > New Extension (TypeScript) # 基于TS的插件
  #   New Extension (JavaScript) # 基于JS的插件
  #   New Color Theme # 颜色主题
  #   New Language Support # 语言支持(语法高亮/代码片段/代码检查)
  #   New Code Snippets # 代码片段(插入常用代码或模板)
  #   New Keymap # 快捷键(定义快捷键)
  #   New Extension Pack # 插件包(包含多个插件, 可一次性安装这个包来获得一组功能)
  #   New Language Pack (Localization) # 语言包(本地化支持)
  #   New Web Extension (TypeScript) # Web 插件(在 VSCode 的 web 版本中运行)
  #   New Notebook Renderer (TypeScript) # Notebook渲染器(在 VSCode 的笔记本视图中渲染, 包含可执行代码块和展示结果区域, 场景: 可视化/教程/演示文档, 展示图表/表格等)
  # - What's the name of your extension? # 如 Xxx for VS Code
  # - What's the identifier of your extension?  # 插件标识符ID (aaa-bbb)
  # - What's the description of your extension? # 插件描述
  # - Initialize a git repository? # 是否初始化git仓库 (默认yes)
  # - Bundle the source code with webpack? # 是否使用webpack打包源码 (默认no, 用tsc编译)
  # - Which package manager to use? # 使用哪个包管理器 (pnpm/yarn)
  # - Do you want to open the new folder with Visual Studio Code? # 选择code打开插件目录, 提示安装`Extension Test Runner`(安装)

  插件入口为 src/extension.ts(建议src改成client). 按F5或 VSCode 左下角的Run Extension, 启动调试窗口, 在这个实例中可以调试插件.
  调试窗口, 按 Ctrl+Shift+P 打开命令面板, 输入 "Hello World" 并运行, 右下角会弹出提示.
  调试窗口, 按 Ctrl+Shift+I 打开开发者工具;
  修改源码后, 在源码窗口按Ctrl+Shift+F, 或 在调试窗口 按 Ctrl+R 重载插件(Reload Window), 使修改生效.
  调试窗口, 按Ctrl+Shift+P搜Webview可选Webview开发者工具/刷新Webview.

  查看全文 »

• react 与 vue 的一些写法对比

  发布时间: 2024-02-01 / 分类: 开发 / No Comments

  在线 Playground 测试

  • React Playground
  • Vue Playground

  state 简单状态

  vue

  const count = ref(0);
  const increment = () => (count.value += 1);

  react

  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);

  state 复杂状态

  vue

  state = reactive({
    value: 0,
  });
  state.value = 1;

  react

  const [state, setState] = useReducer((prev, { ...next }) => ({ ...prev, ...next }), {
    value: 0,
  });
  setState({ value: 1 });

  查看全文 »

« Older Entries