Atom初始化脚本中添加多组insertText命令的实现咨询

当然可以在同一个脚本文件里实现多个独立的insertText命令，完全不需要把它们合并到同一个命令里！你只需要像第一个命令那样，多次调用atom.commands.add方法，给每个命令分配独一无二的名称和对应的文本片段就行。

示例代码 #

直接在你的脚本里添加多组命令定义就好，比如：

// 第一个命令：插入React类模板
atom.commands.add('atom-text-editor', 'custom:react-class', () => {
  const editor = atom.workspace.getActiveTextEditor();
  editor?.insertText('class MyComponent extends React.Component {\n  render() {\n    return (\n      <div>\n        {/* 组件内容 */}\n      </div>\n    );\n  }\n}');
});

// 第二个命令：插入console.log快捷代码
atom.commands.add('atom-text-editor', 'custom:console-log', () => {
  const editor = atom.workspace.getActiveTextEditor();
  editor?.insertText('console.log();');
});

// 还能继续扩展更多命令
atom.commands.add('atom-text-editor', 'custom:arrow-function', () => {
  const editor = atom.workspace.getActiveTextEditor();
  editor?.insertText('const myFunc = () => {\n  // 函数逻辑\n};');
});

绑定快捷键 #

写完命令后，去Atom的快捷键设置面板（路径：File > Settings > Keybindings，或者用快捷键Ctrl+,打开），给每个命令单独绑定快捷键，比如用Cson格式配置：

'atom-text-editor':
  'ctrl-alt-r': 'custom:react-class'
  'ctrl-alt-l': 'custom:console-log'
  'ctrl-alt-f': 'custom:arrow-function'

小技巧：优化代码复用 #

如果觉得重复写atom.workspace.getActiveTextEditor()麻烦，可以把这部分逻辑抽成一个小函数，让代码更简洁：

// 复用函数：获取当前激活的编辑器
const getActiveEditor = () => atom.workspace.getActiveTextEditor();

atom.commands.add('atom-text-editor', 'custom:react-class', () => {
  getActiveEditor()?.insertText('你的React类文本');
});

atom.commands.add('atom-text-editor', 'custom:console-log', () => {
  getActiveEditor()?.insertText('console.log();');
});

注意：每个命令的唯一标识（比如custom:react-class）不能重复，否则后面的命令会覆盖掉前面的定义哦～

内容的提问来源于stack exchange，提问作者rnrh