JS 코드 컴 파 일 러 모나코 사용법

머리말
나의 요 구 는 문법 하 이 라이트,함수 알림 기능,자동 줄 바 꾸 기,코드 접 기 이다.
Monaco
Monaco 는 마이크로소프트 의 것 으로 지원 하 는 언어 가 많 고 약도 있 습 니 다.가끔 은 힌트 가 좋 지 않 고 가방 이 큽 니 다.
The Monaco Editor is the code editor that powers VS Code.

사용법
[공식 문서](https://microsoft.github.io/monaco-editor/index.html)
[온라인 데모](https://github.com/Microsoft/monaco-editor-samples)
[github]( https://github.com/Microsoft/monaco-editor )
설치 하 다.
yarn add monaco-editor | npm install monaco-editor
끌어들이다

import * as monaco from 'monaco-editor' //         demo     

//         
const suggestions = [
  {
    label: 'split_chinese',
    insertText: 'split_chinese(inputString,language);', //         。。
    detail:
      'inputString：need split string
' +
      'language:
CH_T：traditional Chinese
CH_S：Chinese Simplified
 HK_T:Hong Kong Traditional
TW_T:Taiwan Traditional
'
  },
  {
    label: 'uuid',
    insertText: 'var uuid = uuid();',
    detail: 'generate uuid'
  },
  {
    label: 'HashMap',
    insertText: 'var hashMap = new HashMap();',
    detail: 'create hash object'
  }
]

초기 화

mounted() {
    monaco.languages.registerCompletionItemProvider('JavaScript', {
      provideCompletionItems() {
        return {
          suggestions: suggestions
        }
      },
      triggerCharacters: [' ', '.'] //         ，     
    })
    let self = this
    setTimeout(function () {
      self.init()
    }, 50) //                 
  }
  
 //     
init(script) {
  let self = this
  if (script) this.code = script
  self.$refs.container.innerHTML = ''
  var editor = monaco.editor.create(this.$refs.container, {
    value: this.code,
    language: 'javascript',
    minimap: {
      enabled: false
    },
    fontSize: '12px',
    fixedOverflowWidgets: true //           fixed    
  })
  editor.onDidChangeModelContent(function () {
    self.$emit('update:code', editor.getValue()) //           ，        
  })
}

html

<template>
  <div ref="container" class="monaco"></div>
</template>

css

<style scoped>
.monaco {
  width: 95%;
  height: 400px;
  border: 1px solid #dcdfe6;
  text-align: left;
  margin-right: 20px;
  border-radius: 4px;
}
</style>

 
실행 효과

결점.
내 가 뒤 집 었 어.더 이상 뛰 고 싶 지 않 아.코드 는 아직도 demo 만 써 있어.운행 은 가능 합 니 다.(고객 이 사용 하지만 피드백 도 좋 지 않 습 니 다.제 냄비 입 니 다.Monaco 를 사용 할 자격 이 없습니다)정말 사용 하기 어렵 습 니 다.특히 힌트 의 기능 은 일반적인 상황 에서 힌트 가 없습니다.그리고 가방 하나 가 커 요.3.9G(심각)인 것 같 아 요.필요 에 따라 도입 되 지 않 았 을 수도 있 지만 알림 기능 이 없 는 사용자 정의 함수 알림 을 도입 하지 않 습 니 다.웹 팩 설정 도 있 습 니 다.왔 다 갔다 합 니 다!
이상 은 JS 컴 파일 러 Monaco 사용 튜 토리 얼 의 상세 한 내용 입 니 다.JS 컴 파일 러 Monaco 에 관 한 자 료 는 저희 의 다른 관련 글 을 주목 하 세 요!