Monaco Editor에서 언어 구성 확장

Monaco 편집기는 구문 강조 기능이 있는 온라인 편집기입니다. 기본적으로 많은 언어에 대한 구문 강조 표시 지원을 제공합니다.
그러나 실제 사용 사례와 일치하려면 custom syntax highlighting가 필요할 수 있습니다.
불행히도 언어 구성을 확장하는 데 사용할 수 있는 API가 없습니다. 이 항목을 참조하십시오comment.

조언에 따라 덮어 썼습니다 output of the built-in tokenizer

목차

How I Approached

Actual Code

Advantages

Limitations

Take Away

Github Link

Running the App

내가 접근한 방법

API를 사용하여 monaco 편집기에서 사용할 수 있는 모든 언어 구성을 가져왔습니다monaco.languages.getLanguages().

그런 다음 원하는 언어를 필터링했습니다(제 경우에는 javascript를 선택했습니다)

등록된 대부분의 언어

에 사용할 수 있는 loader() 메서드가 있습니다.

로더를 실행하면 configuration 및 language라는 2개의 키가 포함된 개체가 반환됩니다.

이 언어는 토크나이저 데이터를 보유합니다.

이 토크나이저를 가져갔고 modified the certain parts with my custom tokens

수정은 base object reference is unaffected

실제 코드

const allLangs = await monaco.languages.getLanguages();
const { conf, language: jsLang } = allLangs.find(({ id }) => id ==='javascript').loader();
for (let key in customTokenizer) {
  const value = customTokenizer[key];
  if (key === 'tokenizer') {
    for (let category in value) {
      const tokenDefs = value[category];
      if (!jsLang.tokenizer.hasOwnProperty(category)) {
        jsLang.tokenizer[category] = [];
      }
      if (Array.isArray(tokenDefs)) {
        jsLang.tokenizer[category].unshift.apply(jsLang.tokenizer[category], tokenDefs)
      }
    }
  } else if (Array.isArray(value)) {
    if (!jsLang.hasOwnProperty(key)) {
      jsLang[key] = [];
    }
    jsLang[key].unshift.apply(jsLang[key], value)
  }
}

장점

monaco-editor에서 javascript worker provides excellent code completions , 새 언어 토크나이저를 만들면 이 제안이 손실될 수 있습니다. 이 방법을 사용하면 새 언어가 필요하지 않으므로 코드 완성이 유지됩니다

.

이 사용자 정의 토크나이저follows the monaco editor’s monarch pattern , 따라서 사용자 정의 토크나이저를 이미 작성했다면 마이그레이션이 쉬울 것입니다

.

토큰은 custom tokens are given high priority와 같은 방식으로 추가되며 unshift에서 push를 jsLang keys로 변경하여 수정할 수도 있습니다.

제한 사항

모나코 에디터로서 모나코 인스턴스 내부에 언어 구성을 저장하는 방법이 있으므로 원하는 언어로 언어 구성before creation of any model (or) editor을 덮어써야 합니다.

테이크 어웨이

이 방법은 monaco editor’s lazy loading feature (monaco 편집팀 덕분에) 때문에 가능합니다. 여기서 해당 언어에 대한 모델(또는) 편집기 인스턴스가 생성될 때만 언어 구성을 로드합니다.
So if we can change the configuration of the language before monaco uses it we can achieve the desired customization

Github 링크

프로필 링크 : PranomVignesh

저장소 링크 : Extend Language Configuration in Monaco Editor