[記事] Add shell command button in ATOM

屬於阿宅世界的技術文章，想看的再點開，切莫自誤 !




最近利用 ATOM 寫程式時，對於老是要離開編輯器在 shell 手動執行 webpack 或是開啟 Electon App 覺得有點不耐，ATOM 是有個叫 run command 2 的package 可以在編輯器內執行 shell command ，但要自己打一串字還是不若其他 IDE 按個按紐或是快速鍵方便，試了一下，可以用下面的方式在ATOM內加上自己要的 Shell Command button

1. 安裝 run command 2 及 tool-bar 這兩個 package ，前者提供上述執行shell command 的能力，後者提供"加入"工具列的功能
2. 不過 tool-bar 只提供加入工具列的功能，本身不自帶任何工具列，可以自己寫一個，但最快的方式還是安裝現成的 tool-bar-main 來修改
3. 安裝完 tool-bar-main 後，它預設設定了七個常用功能（開發模式下再多兩個：　reload 及打開debbug console)，在 Mac 環境下，要加入自己要的 button 可以修改 ~/.atom/packages/tool-bar-main/lib/tool-bar-main.coffee，在原有的

@toolBar.addButton
      icon: 'gear-a'
      callback: 'settings-view:open'
      tooltip: 'Open Settings View'
      iconset: 'ion'

下面再加一段

@toolBar.addSpacer()

    @toolBar.addButton
      icon: 'archive'
      callback: 'run-command:webpack'
      tooltip: 'Run webpack command'
      iconset: 'ion'

    @toolBar.addButton
      icon: 'paper-airplane'
      callback: 'run-command:electron'
      tooltip: 'Electron Run'
      iconset: 'ion'

上面的意思是說，我要再加入三個元件 : 一個分隔線以及兩個按紐，前一個按紐叫 run command 執行 webpack ，後一個叫 run command 幫我帶起來 electron application

4. 再來加入上面需要的 callback 函式。修改 ~/.atom/packages/run-command2/lib/run-command-view.coffee，在原有的

atom.commands.add 'atom-workspace', 'run-command:run', =>
      @toggle()
    atom.commands.add 'atom-workspace', 'run-command:re-run-last-command', =>
      @reRunCommand()
    atom.commands.add 'atom-workspace', 'run-command:toggle-panel', =>
      @togglePanel()
    atom.commands.add 'atom-workspace', 'run-command:kill-last-command', =>
      @killLastCommand()
    atom.commands.add 'atom-workspace', 'run-command:cwd', =>
      @setWorkingDirectory()
    atom.commands.add 'atom-workspace', 'run-command:copy', =>
      @copyBuffer()

加上

atom.commands.add 'atom-workspace', 'run-command:webpack', =>
      @runBtnCmd('npm run webpack')
    atom.commands.add 'atom-workspace', 'run-command:electron', =>
      @runBtnCmd('electron .')

以及在

runCommand: =>
    command = @entry.filterEditorView.getText()
    cwd = @cwd?.cwd() || atom.project.getPaths()[0]

    unless Utils.stringIsBlank(command)
      @commandRunnerView.runCommand(command, cwd)

加入一個吃指令的 run 函式

runBtnCmd: (e)=>
    command = e
    cwd = @cwd?.cwd() || atom.project.getPaths()[0]

    unless Utils.stringIsBlank(command)
      @commandRunnerView.runCommand(command, cwd)

最後，因為在 run command 2 的package.json 中定義了 activationCommands ，這會讓 ATOM 在透過 command trigger "run command 2"後才初始化它，在這之前，因為"run command 2" 還沒被建立起來，當然也無法產生作用，要在一開始就讀進 "run command 2"的話，只要移除 "run command 2"的package.json 裡的這幾行就可以了

"activationCommands": {
    "atom-workspace": [
      "run-command:run",
      "run-command:re-run-last-command",
      "run-command:toggle-panel",
      "run-command:kill-last-command",
      "run-command:cwd",
      "run-command:copy"
    ]
  },

p.s
1. 利用 shell> atom --dev 的方式打開 debug 模式，配合 tool-bar- main 的 reload window / toggle developer console 會比較好除錯

2. run command 2 一開始可能會有找不到路徑(/bin/bash)的問題，試著把它加進路徑(eg. .bashrc 中 export PATH=$PATH:/bin/bash)，如果是 mac 從 lauchpad 啟動的話，再執行 shell> launchctl setenv PATH $PATH，之後在 debugger console 確認 process.env.PATH 的值。