atom插件制作

程序员文章站 2022-05-02 08:17:46

...

atom插件制作

2016开始了自己的开发生涯，步入这个行业初时就是以前端出身，虽说现在努力往全栈开发靠拢，但在前端这个领域还是比后台熟悉。这不，平时开发的时候一只在用atom，也觉得他用起来还比较顺手，到了新公司，我的职位还是前端开发，而且公司的代码规范里有一条就是相关的文件都需要有一套注释。
比如这样

/**
 * xxx的'样式'配置
 * @since 2017-08-04
 */

而初来公司，每次新建一个文件总是忘记写文件注释导致项目在build的时候失败，浪费大家时间。
所以就想，不如自己开发一个插件，新建的时候或者保存的时候提醒自己。

插件开发

atom由GitHub创建，而GitHub被微软收购，某种意义上说，atom属于微软。。

他是完全开源的，看起来和sublime text（还要收费）一样，看起来和Visual Studio Code也一样，是的，都是基于web技术，chrome内核+nodejs，而且开发atom的调试工具更让人不可思议
atom插件制作

他就像个浏览器一样，我们可以理解为他就是个本地浏览器。
看到这里我觉得我开发插件已经很有希望了，起初还以为需要学习什么特定的语法之类的。

如何开始

开发之前可以学习一下其他博客的介绍：Atom插件开发入门教程

也可以学习一下官方的api：Atom Documentation(全是英文。。。)

还有atom中文社区：Atom China

开发一个简单插件大致分为几步

1. 在packages选项里选择如下内容，就会自动生成一个插件文件夹，在本地github目录下，lib下为插件的主要逻辑区域，styles就是插件的样式，package.json是插件的一些描述和配置，在package.json中有这么一条

“activationCommands”: {
“atom-workspace”: “my-validate:toggle”
},

这是配置是让插件默认不启动，来提高atom的打开速度，如果你的插件需要自启动，就要把自己的插件从这里面移除
atom插件制作

2. 打开lib下的 my-validate.js 这是自己插件命名的，里面编写插件逻辑。

具体可以参照官网给出的事例事例地址

import YourNameWordCountView from './your-name-word-count-view';
import { CompositeDisposable } from 'atom';

export default {

  yourNameWordCountView: null,
  modalPanel: null,
  subscriptions: null,

initialize(state) {//初始化插件
    this.idisposable = atom.workspace.observeActivePaneItem(editor => {
      if (!editor || !editor.getText) return;
      let ochangeTitle = editor.onDidChangeTitle(() => {})
      editor.onDidDestroy(() => {
        ochangeTitle.dispose();
      });
    })

  },
  activate(state) {//活动区域，比如添加一个ctrl+s的监听事件
    this.yourNameWordCountView = new YourNameWordCountView(state.yourNameWordCountViewState);
    this.modalPanel = atom.workspace.addModalPanel({
      item: this.yourNameWordCountView.getElement(),
      visible: false
    });

    // Events subscribed to in atom's system can be easily cleaned up with a CompositeDisposable
    this.subscriptions = new CompositeDisposable();

    // Register command that toggles this view
    this.subscriptions.add(atom.commands.add('atom-workspace', {
      'your-name-word-count:toggle': () => this.toggle()
    }));
  },

  deactivate() {
    this.modalPanel.destroy();
    this.subscriptions.dispose();
    this.yourNameWordCountView.destroy();
  },

  serialize() {
    return {
      yourNameWordCountViewState: this.yourNameWordCountView.serialize()
    };
  },

  toggle() {
    console.log('YourNameWordCount was toggled!');
    return (
      this.modalPanel.isVisible() ?
      this.modalPanel.hide() :
      this.modalPanel.show()
    );
  }

};

3. 发布

发布流程特别简单，参照文档
其实就是2步，第一步 cd到插件所在目录，第二部执行apm publish
apm publish后面可以添加3个属性major, minor and patch。
major-大版本号 v1.0.0
minor-中版本号 v0.1.0
patch-小版本号 v0.0.1

GitHub

https://github.com/petsgre/my-validate

finish

atom插件制作