使用 coc.nvim 整合自动构建工具

优点

• 无需新开窗口
• 观察 statusline 即可了解构建状态
• 使用 quickfix 列表快速跳转错误位置

实现

以 webpack 为例：

const {commands, workspace, Disposable} = require('coc.nvim')
const path = require('path')

const patternWebpack = /ERROR\sin\s(?<filename>\S+)\s(?<line>\d+):(?<col>\d+)/
const errorPattern = /ERROR\sin\s(?<filename>[^(]+)\((?<line>\d+),(?<col>\d+)\)/

exports.activate = context => {
  let {nvim} = workspace
  let statusItem = workspace.createStatusBarItem(1, {progress: true})
  let task = workspace.createTask('WEBPACK')
  let cwd

  async function check() {
    let running = await task.running
    if (running) {
      statusItem.isProgress = false
      statusItem.text = '?'
      statusItem.show()
    } else {
      statusItem.hide()
    }
  }
  check().catch(_e => {
    // noop
  })
  task.onExit(code => {
    if (code != 0) {
      workspace.showMessage(`Webpack exit with code ${code}`, 'warning')
    }
    statusItem.hide()
  })
  task.onStdout(lines => {
    let i = 0
    let items = []
    for (let line of lines) {
      if (line.indexOf('ERROR') !== -1) {
        let res = patternWebpack.exec(line)
        if (res == null) {
          res = errorPattern.exec(line)
        }
        if (res != null) {
          let {filename} = res.groups
          if (!path.isAbsolute(filename)) {
            filename = path.join(cwd, filename)
          }
          items.push({
            filename,
            lnum: parseInt(res.groups.line),
            col: parseInt(res.groups.col),
            text: lines[i + 1].trim(),
            type: 'E'
          })
        }
      }
      i++
    }
    nvim.call('setqflist', [items], true)
    statusItem.text = items.length == 0 ? '✓' : '✗'
    statusItem.isProgress = false
  })
  task.onStderr(lines => {
    for (let line of lines) {
      if (line.match(/webpack\sis\swatching/)) {
        statusItem.text = 'watching'
      }
    }
  })

  context.subscriptions.push(Disposable.create(() => {
    task.dispose()
  }))
  context.subscriptions.push(commands.registerCommand('webpack.watch', async () => {
    cwd = workspace.cwd
    task.start({
      cmd: 'webpack',
      args: ['--watch', '--no-color'],
      cwd: workspace.cwd
    })
    statusItem.show()
  }))
}

将文件保存为 $VIMCONFIG/coc-extensions/webpack.js，设置自定义 Webpack 命令 （ vim 中执行 :echo $VIMCONFIG 查看 $VIMCONFIG ）

command! -nargs=0 Webpack :call CocAction('runCommand', 'webpack.watch')

友情提示

• 该示例使用 webpack --watch, 而不是保存完重现构建，效率高一些
• 任务是由 vim/neovim 执行的，重启 coc 服务不用重启任务
• coc-tsserver 插件自带了 tsserver.watchBuild 命令执行 tsc --watch 构建