做一个简单的java编辑器

最近闲来无事，对于之前放置不理的language server又起了兴趣，研究了一下，搞了一个简单的java编辑器，因为心血来潮，功能比较简单，只支持打开单个java文件，编辑（错误提示，自动补全等都有）和保存。主要使用了monaco-editor，monaco-languageclient，electron，vue和eclipse.jdt.ls。在网上没找到多少中文的相关内容，在这里简单记录一些自己的心得。

什么是language server protocol

Adding features like auto complete, go to definition, or documentation on hover for a programming language takes significant effort. Traditionally this work had to be repeated for each development tool, as each tool provides different APIs for implementing the same feature.
A Language Server is meant to provide the language-specific smarts and communicate with development tools over a protocol that enables inter-process communication.
The idea behind the Language Server Protocol (LSP) is to standardize the protocol for how such servers and development tools communicate. This way, a single Language Server can be re-used in multiple development tools, which in turn can support multiple languages with minimal effort.
LSP is a win for both language providers and tooling vendors!

这里引用一些微软的官方解释，简单总结一下，语言服务器协议 (LSP) 的想法是标准化此类服务器和开发工具如何通信的协议。 这样，单个语言服务器可以在多个开发工具中重复使用，从而可以轻松地支持多种语言。
我从微软的语言服务器实现文档中找到了java的服务器实现，从中选择了eclipse.jdt.ls作为我们app选用的java语言服务器。

启动java language server

下载eclipse.jdt.ls

进入eclipse.jdt.ls的git仓库，参考readme即可。功能很强大，可以看到支持单独文件，也支持maven项目，我们这里只使用了单独文件的功能。

我选择了最新的snapshot版本，进入下载页面下载，然后将压缩包解压到/opt/jdt-language-server文件夹下面，文件夹里面的内容如下。

命令行启动

然后按照文档的指引启动即可，这里面./plugins/org.eclipse.equinox.launcher_1.6.400.v20210924-0641.jar要替换成你自己的jar文件，我下载的版本是这个，-configuration ./config_mac \这个因为我是mac系统，所以配置成这样，除此之外还有config_win和config_linux。

java \
	-Declipse.application=org.eclipse.jdt.ls.core.id1 \
	-Dosgi.bundles.defaultStartLevel=4 \
	-Declipse.product=org.eclipse.jdt.ls.core.product \
	-Dlog.level=ALL \
	-Xmx1G \
	--add-modules=ALL-SYSTEM \
	--add-opens java.base/java.util=ALL-UNNAMED \
	--add-opens java.base/java.lang=ALL-UNNAMED \
	-jar ./plugins/org.eclipse.equinox.launcher_1.6.400.v20210924-0641.jar \
	-configuration ./config_mac \

但是，这样启动的language server只支持标准输入和标准输出，我们在命令行启动的这个server并没有办法应用于网络环境。

搭建一个node服务器

官方文档说可以配置环境变量CLIENT_PORT启用socket，我失败了，没有找到解决方案。最后反复查找，受到Aaaaash的启发，最后决定使用node搭建一个服务器。大概思路是使用node的子进程启动这个java进程，然后监听socket，写到java子进程，并将子进程的输出写到socket。我本来打算直接抄他的服务器代码的，emmm，不太好用，自己改了改，我nodejs不太擅长，勉强看看吧，具体代码如下。

const cp = require("child_process")
const express = require("express")
const glob = require("glob")
const WebSocket = require("ws").WebSocket
const url = require("url")

const CONFIG_DIR = process.platform === 'darwin' ? 'config_mac' : process.platform === 'linux' ? 'config_linux' : 'config_win'
const BASE_URI = '/opt/jdt-language-server'

const PORT = 5036

const launchersFound = glob.sync('**/plugins/org.eclipse.equinox.launcher_*.jar', {cwd: `${BASE_URI}`})
if (launchersFound.length === 0 || !launchersFound) {
    throw new Error('**/plugins/org.eclipse.equinox.launcher_*.jar Not Found!')
}
const params =
    [
        '-Xmx1G',
        '-Xms1G',
        '-Declipse.application=org.eclipse.jdt.ls.core.id1',
        '-Dosgi.bundles.defaultStartLevel=4',
        '-Dlog.level=ALL',
        '-Declipse.product=org.eclipse.jdt.ls.core.product',
        '-jar',
        `${BASE_URI}/${launchersFound[0]}`,
        '-configuration',
        `${BASE_URI}/${CONFIG_DIR}`
    ]

let app = express()
let server = app.listen(PORT)
let ws = new WebSocket.Server({
    noServer: true,
    perMessageDeflate: false
})
server.on('upgrade', function (request, socket, head) {
    let pathname = request.url ? url.parse(request.url).pathname : undefined
    console.log(pathname)
    if (pathname === '/java-lsp') {
        ws.handleUpgrade(request, socket, head, function (webSocket) {
            let lspSocket = {
                send: function (content) {
                    return webSocket.send(content, function (error) {
                        if (error) {
                            throw error
                        }
                    })
                },
                onMessage: function (cb) {
                    return webSocket.on('message', cb)
                },
                onError: function (cb) {
                    return webSocket.on('error', cb)
                },
                onClose: function (cb) {
                    return webSocket.on('close', cb)
                },
                dispose: function () {
                    return webSocket.close()
                }
            }
            if (webSocket.readyState === webSocket.OPEN) {
                launch(lspSocket)
            } else {
                webSocket.on('open', function () {
                    return launch(lspSocket)
                })
            }
        })
    }
})

function launch(socket) {
    let process = cp.spawn('java', params)
    let data = ''
    let left = 0, start = 0, last = 0
    process.stdin.setEncoding('utf-8')
    socket.onMessage(function (data) {
        console.log(`Receive：${data.toString()}`)
        process.stdin.write('Content-Length: ' + data.length + '\n\n')
        process.stdin.write(data.toString())
    })
    socket.onClose(function () {
        console.log('Socket Closed')
        process.kill()
    })
    process.stdout.on('data', function (respose) {
        data += respose.toString()
        let end = 0
        for(let i = last; i < data.length; i++) {
            if(data.charAt(i) == '{') {
                if(left == 0) {
                    start = i
                }
                left++
            } else if(data.charAt(i) == '}') {
                left--
                if(left == 0) {
                    let json = data.substring(start, i + 1)
                    end = i + 1
                    console.log(`Send: ${json}`)
                    socket.send(json)
                }
            }
        }
        data = data.substring(end)
        last = data.length - end
        start -= end
    })
    process.stderr.on('data', function (respose) {
        console.error(`Error: ${respose.toString()}`)
    })
}

要注意的是：

1. monaco-editor发送过来的信息和子进程需要的信息之间不太匹配需要处理，monaco-editor发送过来的是Buffer对象，没有content-length的信息，子进程输出的信息是Content-length和json数据，因此把信息写到子进程的输入时需要加上Conten-length信息，从子进程的输出读数据写到socket的时候需要过滤掉Conten-length信息。
2. 另外数据很长的时候子进程的输出是一段一段的，需要拼接。

我们使用node index.js启动这个node进程，就得到了一个可以处理socket链接的java language server。

创建一个java编辑器

创建一个vue项目

vue create java-editor

添加monaco编辑器相关依赖

npm install monaco-editor@0.30.0 --save
npm install monaco-editor-webpack-plugin@6.0.0 --save-dev
npm install monaco-languageclient --save
npm install @codingame/monaco-jsonrpc --save

添加electron-builder

vue add electron-builder
electron-builder install-app-deps

然后在vue.config.js文件里面添加plugin：

configureWebpack: {
    plugins: [
      new MonacoWebpackPlugin({
        languages: ['javascript', 'css', 'html', 'typescript', 'json', 'java']
      })
    ]
  }

创建Editor

参考monaco-languageclient的使用样例我们在components里面添加一个Editor.vue文件。

<template>
  <div style="width: 100%;height:100%;">
    <div class="hello" ref="main" style="width: 100%;height:100%;text-align: left" v-show="model">

    </div>
    <div v-show="!model" style="width: 100%;height:100%;position: relative">
      <span style="font-size: 30px;display: block;position:absolute;left: 50%; top: 50%;transform: translate(-50%, -50%)">
        Please Open A Java File</span>
    </div>
  </div>
</template>

<script>
const {ipcRenderer} = window.require('electron')
import { listen } from "@codingame/monaco-jsonrpc"
import * as monaco from 'monaco-editor/esm/vs/editor/editor.main.js'
import 'monaco-editor/esm/vs/basic-languages/java/java.contribution'
const { MonacoLanguageClient, CloseAction, ErrorAction, MonacoServices, createConnection } = require('monaco-languageclient')
export default {
  name: 'JavaEditor',
  data() {
    return {
      editor: null,
      websocket: null,
      model: null
    }
  },
  methods: {
    createLanguageClient(connection) {
      return new MonacoLanguageClient({
        name: "Java LSP client",
        clientOptions: {
          documentSelector: ['java'],
          errorHandler: {
            error: () => ErrorAction.Continue,
            closed: () => CloseAction.DoNotRestart
          }
        },
        connectionProvider: {
          get: (errorHandler, closeHandler) => {
            return Promise.resolve(createConnection(connection, errorHandler, closeHandler))
          }
        }
      })
    },
    createModel (filePath) {
      let fileContent = window.require('fs').readFileSync(filePath, 'utf-8').toString()
      return monaco.editor.createModel(fileContent, 'java', monaco.Uri.file(filePath))
    }
  },
  mounted() {
    let self = this
    //注册 Monaco language client 的服务
    MonacoServices.install(monaco)
    //监听打开文件的event，创建model
    ipcRenderer.on('open', (event, filePath) => {
      let first = !this.model
      let model = monaco.editor.getModel(monaco.Uri.file(filePath))
      if (!model) {
        model = this.createModel(filePath)
      }
      this.model = model
      //第一次打开的话，要创建编辑器，链接到language server
      if(first) {
        this.$nextTick(() => {
          this.editor = monaco.editor.create(this.$refs.main, {
            model: model
          })
          //这里这个url是之前启动的java language server的地址
          const url = 'ws://127.0.0.1:5036/java-lsp'
          this.websocket = new WebSocket(url)
          listen({
            webSocket: self.websocket,
            onConnection: connection => {
              console.log("connect")
              const client = self.createLanguageClient(connection);
              const disposable = client.start()
              connection.onClose(() => disposable.dispose());
              console.log(`Connected to "${url}" and started the language client.`);
            }
          })
        })
      } else {
        this.editor.setModel(model)
      }

    })
    //监听save事件，保存文件
    ipcRenderer.on('save', () => {
      if(this.model) {
        window.require('fs').writeFileSync(this.model.uri.fsPath, this.model.getValue())
      }
    })
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

修改App.vue文件，把Editor加入App.vue文件。

<template>
  <div id="app">
    <div style="background: black; height: 40px; width: 100%;color: white;text-align: left">
      <span style="display: inline-block;padding: 5px;font-weight: bold">A Simple Jave Editor</span>
    </div>
    <div style="width: 100%; height: calc(100vh - 60px); padding: 10px">
      <Editor/>
    </div>
  </div>
</template>

<script>
import Editor from './components/Editor.vue'

export default {
  name: 'App',
  components: {
    Editor
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
body {
  margin: 0;
}
</style>

配置electron菜单

修改background.js文件，这是之前electron-builder添加的electron的主进程，加入menu配置，主要是添加打开文件，保存文件的菜单。

'use strict'

import { app, protocol, BrowserWindow, Menu, dialog } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
const isDevelopment = process.env.NODE_ENV !== 'production'

// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])

async function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true
    }
  })

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    win.loadURL('app://./index.html')
  }
  const isMac = process.platform === 'darwin'

  const template = [
    ...(isMac ? [{
      label: app.name,
      submenu: [
        { role: 'about' },
        { type: 'separator' },
        { role: 'services' },
        { type: 'separator' },
        { role: 'hide' },
        { role: 'hideOthers' },
        { role: 'unhide' },
        { type: 'separator' },
        { role: 'quit' }
      ]
    }] : []),
    {
      label: 'File',
      //打开文件和保存文件的menu定义
      submenu: [
        {
          label: 'Open File', accelerator: "CmdOrCtrl+O", click: () => {
            if (win && !win.isDestroyed()) {
              dialog.showOpenDialog(win, {
                properties: ['openFile'],
                filters: [{name: 'Java', extensions: ['java']},]
              }).then(result => {
                if (!result.canceled) {
                  win.webContents.send('open', result.filePaths[0])
                }
              }).catch(err => {
                console.log(err)
              })
            }
          }
        },
        {label: 'Save File', accelerator: "CmdOrCtrl+S", click: () => {
            if(win && !win.isDestroyed()) {
              win.webContents.send('save')
            }
          }},
        isMac ? { role: 'close' } : { role: 'quit' }
      ]
    },
    {
      label: 'Edit',
      submenu: [
        { role: 'undo' },
        { role: 'redo' },
        { type: 'separator' },
        { role: 'cut' },
        { role: 'copy' },
        { role: 'paste' },
        ...(isMac ? [
          { role: 'pasteAndMatchStyle' },
          { role: 'delete' },
          { role: 'selectAll' },
          { type: 'separator' },
          {
            label: 'Speech',
            submenu: [
              { role: 'startSpeaking' },
              { role: 'stopSpeaking' }
            ]
          }
        ] : [
          { role: 'delete' },
          { type: 'separator' },
          { role: 'selectAll' }
        ])
      ]
    },
    {
      label: 'Window',
      submenu: [
        { role: 'minimize' },
        { role: 'zoom' },
        ...(isMac ? [
          { type: 'separator' },
          { role: 'front' },
          { type: 'separator' },
          { role: 'window' }
        ] : [
          { role: 'close' }
        ])
      ]
    },
    {
      role: 'help',
      submenu: [
        {
          label: 'Learn More',
          click: async () => {
            const { shell } = require('electron')
            await shell.openExternal('https://electronjs.org')
          }
        }
      ]
    }
  ]

  const menu = Menu.buildFromTemplate(template)
  Menu.setApplicationMenu(menu)
}

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      await installExtension(VUEJS_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})

// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
  if (process.platform === 'win32') {
    process.on('message', (data) => {
      if (data === 'graceful-exit') {
        app.quit()
      }
    })
  } else {
    process.on('SIGTERM', () => {
      app.quit()
    })
  }
}

启动运行

我们的editor就搭建好了，然后启动构建运行即可。

#启动
npm run electron:serve
#构建
npm run electron:build

启动之后界面如下：

打开一个本地java文件之后：

总结

最后，总结一下过程中遇到的问题

1.版本问题

monaco-editor和monaco-editor-webpack-plugin的版本是有对应关系的，刚开始由于默认使用最新版本0.33.0和7.0.1导致出现了很多错误，各种改版本，遇到了大概如下问题：

Error: Cannot find module 'vs/editor/contrib/gotoSymbol/goToCommands'
Error: Cannot find module 'monaco-editor/esm/vs/editor/contrib/bracketMatching/bracketMatching'
Error: Cannot find module 'vs/editor/contrib/anchorSelect/anchorSelect'
ERROR in ./node_modules/monaco-editor/esm/vs/language/css/monaco.contribution.js 29:15 Module parse failed: Unexpected token (29:15)
You may need an appropriate loader to handle this file type.

这是monaco-editor-webpack-plugin主页表注的对应关系表：

按照这个表来说，最新版本应该是可以的，我也没太搞明白，经过反复实验，最后选定了monaco-editor@0.30.0 和monaco-editor-webpack-plugin@6.0.0，解决了上述的问题。

另外，反复使用npm install更新版本遇到了下面的问题

Error: Cyclic dependency toposort/index.js:53:9)
Uncaught TypeError: Converting circular structure to JSON

删除node_modules文件夹，重新install就好了。

2.monaco-languageclient使用问题

按照官网的指示使用monaco-languageclient时，遇到了如下问题：

Uncaught Error: Cannot find module 'vscode' 
__dirname is not defined

参考官网的changelog，要在vue.config.js里面添加alias：

configureWebpack: {
    resolve: {
        alias : {
            'vscode': require.resolve('monaco-languageclient/lib/vscode-compatibility')
        }
    }
  }

另外，MonacoServices.install的使用根据版本不同改过很多次，要根据具体版本决定怎么用，我之前用错了，发生过以下问题：

TypeError: model.getLanguageId is not a function
TypeError: Cannot read property 'getModels' of undefined

具体可以参考官网的changelog。

3.electron的问题

我之前使用electron-vue都是直接使用模板创建的，但是，vue更新了，模板已经很多年没有更新了，这回先创建vue然后添加的electron，就遇到了奇怪的问题：

Uncaught ReferenceError: __dirname is not defined

查找资料让我改创建window时候的webPreferences里面的参数，改成如下的样子。

const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true
    }
  })

然后，出现了新的问题。

TypeError: fs.existsSync is not a function(anonymous function)
node_modules/electron/index.js:6

细心的小伙伴可能发现了，我上面代码里面的引用很多使用的window.require而不是require，使用window.require可以解决node的模块找不到的问题，我对前端不是太懂，反正好用了，就直接这么用了，有了解详情的欢迎大家分享，一起学习，共同进步。

源代码

• java language sever的源代码，参考 这儿.
• java editor的源代码，参考 这儿.