monaco editor 에 jsvue 언어 지원 추가 등록

서 문 .

최근 git lab 의 web ide 을 사용하여 vue 구성 요소 를 작성 할 때 파일 의 접 미 사가 . view 라는 것을 발견했습니다 .편집 기의 오른쪽 상 단 모 서 리 에는 현재 프로그래밍 언어 에 대한 view 가 표시 되며 구 문 또는 레이 블 을 강조 표시 하고 서 식 화 하고 축 소 하는 것이 모두 훌륭 합니다 .그러나 Mona co 는 V ue J S 를 지원 하지 않으며 프 런 트 엔 드 개발 자로서 때로는 Mona co 편집 기에서 V ue 구성 요소 를 작성 해야 하므로 여 가 시간에 V ue J S 를 Mona co 에 통합 하려고 노력 합니다 . V ue js 는 프로그래밍 언 어가 아니며 HTML 과 매우 유사 하지만 많은 차이 점이 있으므로 여기에 더 이상 설명 하지 않습니다 .이 기 사는 주로 Monaco 에 View J S 를 통합 하는 방법을 탐 구하고 연습 합니다 .

탐 구

Git lab 의 Web ide 에서 View 구성 요소 가 어떻게 수행 되는 지 살펴 보 겠습니다 .
다음은 web ide 에서 수행 되는 두 가지 간단한 view 구성 요소 코드 입니다 .

HTML 의 태 그 , 속 성 , 또는 js 의 키 워 드 , 변 수는 모두 적절 하게 색 칠 할 수 있음을 알 수 있습니다 .단 점이 없다고 할 수는 없지만 이미 훌륭 하다 . (한 가지 단 점은 스크 립 트 레이 블 을 축 소 할 수 없다는 것입니다 .)

이러한 효과를 달성 하기 위해 두 부분 으로 나 뉘 며 , 첫 번째는 mona co 에 대한 view 언어를 등록 하고 해당 언어 의 속 성을 구성 하는 것이 아닙니다 .두 번째는 더 좋은 주 제를 설정 하는 것입니다 .이 문서 에서는 MON AC O 등록 에 V UE 프로그래밍 언어를 추가 하는 첫 번째 단계를 다루 고 있습니다 .

연구 방향을 결정 한 후 , 나는 많은 자료 를 검색 했지만 , 모든 것은 view 에 mona co 를 통합 하는 방법에 대한 기사 와 답을 찾 았습니다 .

唯一有相关的就是这个问题

여러 번의 검색 이 결 실을 맺 었 기 때문에 모 나 코 에 view 언어 지원을 추가 하는 이 문제는 잠시 동안 보 류 되었으며 최근에 다시 도전 하고 싶 었습니다 .실제로 이 연구 과 제는 실제 역할 이 크 지 않으며 편집 기에서 view 구성 요소 를 작성 하는 것은 직접 표시 하고 사용할 수 없습니다 .이러한 기능을 필요로 하는 일부 대규모 웹 플랫폼 을 제외하고 개인 및 중 소 기업 은 기본적으로 사용할 수 없습니다 .내가 모르는 다른 용 도가 있어야 한다 .그러나 사실 나에게 그것은 단지 필요한 것이 아니라 단지 관심 포인트 , 작은 연구 과 제 입니다 .

이 문제에 대한 가장 간단한 해결책 중 하나는 Git lab 의 웹 사이 드 코드를 제거 하는 것입니다 .맞 습니다 . 광 대한 git lab 소 스 코드 에서 V ue 언어를 mona co 에 등록 하는 방법 과 프로 파 일이 무엇인지 알아 보십시오 .간단 하지만 시간이 많이 걸 린다 .믿지 않는 학 우 들은 먼저 아래 를 보지 말고 자신을 찾아 갈 수 있다 .

과 일을 따 야 할 길을 알았 기 때문에 , 나는 의 의 없이 여 정을 밟 았다 . 开始浅浅地研究gitlab的webide 相关的源码，说研究都是在夸自己，其实就是一段
검색 , 검색 , 검색 .

연습 하다

검색 이라고 말하면 실제로 올바른 키 워 드를 찾아야 하며 검색 의 키 워 드는 당신이 찾는 효율 성을 결정 합니다 .
내가 사용한 키 워 드는 , 첫 번째 단계에서 나는 등록 을 사용 했는데 , 왜냐하면 모 나 코 에 프로그래밍 언어를 추가 하려면 languages . register () 메 서 드를 사용 해야 하기 때문이다 . 看了一遍我该用关键词한 꺼 번에 자신이 원하는 것을 찾 았다 .

사실 , 검색 은 또한 mona co 버전 의 문제가 관련 되어 있습니다 , git lab 은 mona co 를 비교 적 일찍 사용 했기 때문에 , 충분한 버 전을 업데이트 하지 않으면 , 버전 은 매우 낮 아야 합니다 , 이 상황은 쉽게 문서 로 이어 질 수 있습니다 , API 는 일치 하지 않습니다 .원하는 것을 검색 할 수 없 거나 검색 해도 직접 사용할 수 없습니다 . gitlab 使用的monaco版本为

여기에 등록 언어 와 관련된 몇 가지 문 서를 게시 합니다 .
app/assets/javascripts/editor/source_editor.js
register L angu ages 메 서 드를 사용하여 모든 사용자 정의 언어를 등록 합니다 .

app/assets/javascripts/ide/lib/languages/vue.js

app/assets/javascripts/ide/lib/editor.js
주제 설정 , 언어 등록

app/assets/javascripts/ide/utils.js

이 파일 에는 view . js 에 정의 된 속 성을 사용하는 매 개 변 수의 register L angu ages 메 서 드가 있습니다 .

mona co 를 통합 하기 위해 순 수한 ht ml 을 사용하고 있기 때문에 view . js 를 사용 하려면 약간의 수정 이 필요합니다 .
전체 코 드는 문 자의 끝에 볼 수 있습니다 .

import export 를 제거 하고 languages 의 열 거 값을 대체 했습니다 .

vue . js 를 수정 하면 세 개의 함 수를 호출 하여 vue 를 mona co 에 통합 할 수 있습니다 .
핵심 코 드는

const language Id = www . example . com ;
mona co . languages . register (vue L an);
mona co . languages . set Mon arch Tok ens Prov ider (l angu age Id , vue L an . language);
monaco.languages.setLangu age Con figur aation (l angu age Id , vue L an . conf);

전체 효과

완전한 코드

<! DO CT Y PE ht ml>
<ht ml>

<헤 드>
  <title>
  <meta http - equ iv = " Cont ent - Type " content = " text / ht ml ; ch ars et = ut f - 8 " />
</ 머리>

<몸 체>
  <h2>

  <h2>
  <div id="container" style="width: 800px; height: 600px; border: 1px solid grey">

  <스크 립 트 sr c = ". / monaco-editor/package/min/vs/loader.js">

  <스크 립 트 sr c = ". / vue.js">

  <스크 립 팅>
    require . conf ig ({ path s : { vs : '. / mona co - editor / package / min / vs ' } });
    편집 기 let editor

    require(

      vueLan.id const languageId = 
      mona co . languages . register (vue L an);
      mona co . languages . set Mon arch Tok ens Prov ider (l angu age Id , vue L an . language);
      mona co . languages . set L angu age Con figur ation (l angu age Id , vue L an . conf);

      편집 기 = mona co . editor . create (doc ument . get E lement By Id (' con tain er '), {
        값 : vue Com ,
        언어 : ' 뷰 ',
      });
    });


  </ script>
</ body>

</ ht ml>