自動補完つきエディターまとめ

フロントエンド側

エディター

• ブラウザ側でユーザの入力を受け付けたりする

TSで作ろう。

• 補完機能は
  • 各言語に用意されているLanguage Server
  • ↓
  • Language Server Protocol LSPでLSに接続
  • ↓
  • エディターがLSPに接続して補完

microsoft.github.io

使い方

Monaco Editorの基本的な使い方 - Qiita

Create a web editor using Monaco editor, React and Node + Webpack and Typescript … How hard can it be? | by Nipuna Marcus | Dev Genius

GitHub - NipunaMarcus/web-editor

zenn.dev

javascript - Get the value of Monaco Editor - Stack Overflow

@monaco-editor/react - npm

react sugguest

react-autosuggest.js.org

dackdive.hateblo.jp

LSP

language server protocol といって、エディターと補完機能とかの通信を行なうためのプロトコル。ココに接続するだけでエディターは言語の機能を使える。

engineering.mercari.com

scrapbox.io

zenn.dev

monaco用LSP

GitHub - TypeFox/monaco-languageclient: NPM module to connect Monaco editor with language servers

バックエンド側

LS

language server といって、言語の補完とかをLSPに伝えるためのサーバ。

Goで作ろう。

scrapbox.io

qiita.com

解析手順

• 字句解析を行って、文字列、数値、予約後、関数、コメントとかタグ付けする
• 構文解析を行ってASTでデータ構造を作る

  字句解析

hake.hatenablog.com

構文解析

qiita.com

なんか全部できそうなやつ

github.com