推薦一款超好用的編輯器

wslongchen發表於2022-05-25

現在很多平臺上都有需要用到程式碼編輯器的地方，開源的編輯器也很多，比如被大家熟知的codemirror，就是一款大家用的比較多的編輯器，但是今天我們推薦的是另外一款超好用的程式碼編輯器，那就是微軟開源的Monaco程式碼編輯器，目前在開源網站上已經收割了29.6K的star。
image.png

今天我們就嘗試在自己的專案中引入這一款編輯器，以VUE為例。

效果預覽

廢話不多說，先上效果，這是官網的效果：
image.png

然後這是自己用下來的效果：

如果不考慮其它因素，只是單純用他來進行程式碼的編輯，基本上與直接使用vscode進行開發是一模一樣的體驗。

使用教程

  • 引入依賴檔案

首先我們需要把對應的依賴檔案下載下來，可以從官網下載，當然還是推薦使用npm進行下載：

npm install monaco-editor@0.33.0
  • 初始化元件

然後我們需要再對應的檔案中進行初始化：

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

<script>
import * as monaco from 'monaco-editor'
import 'monaco-editor/esm/vs/editor/contrib/hover/hover'
import { language as JavaLanguage } from 'monaco-editor/esm/vs/basic-languages/java/java.js'

export default {
  name: 'CodeEditor',
  mounted() {
    this.init()
  },
  data () {
    return {
      // 編輯器物件
      monacoEditor: {},
            // 編輯器配置選項
            defaultOpts: {
        value: this.content,
        fontSize: 14,
        globalName: "self",
        acceptSuggestionOnCommitCharacter: true, // 接受關於提交字元的建議
        acceptSuggestionOnEnter: 'on', // 接受輸入建議 "on" | "off" | "smart" 
        accessibilityPageSize: 10, // 輔助功能頁面大小 Number 說明：控制編輯器中可由螢幕閱讀器讀出的行數。警告：這對大於預設值的數字具有效能含義。
        accessibilitySupport: 'on', // 輔助功能支援 控制編輯器是否應在為螢幕閱讀器優化的模式下執行。
        autoClosingBrackets: 'always', // 是否自動新增結束括號(包括中括號) "always" | "languageDefined" | "beforeWhitespace" | "never"
        autoClosingDelete: 'always', // 是否自動刪除結束括號(包括中括號) "always" | "never" | "auto"
        autoClosingOvertype: 'always', // 是否關閉改寫 即使用insert模式時是覆蓋後面的文字還是不覆蓋後面的文字 "always" | "never" | "auto"
        autoClosingQuotes: 'always', // 是否自動新增結束的單引號 雙引號 "always" | "languageDefined" | "beforeWhitespace" | "never"
        autoIndent: 'None', // 控制編輯器在使用者鍵入、貼上、移動或縮排行時是否應自動調整縮排
        automaticLayout: true, // 自動佈局
        codeLens: false, // 是否顯示codeLens 通過 CodeLens，你可以在專注於工作的同時瞭解程式碼所發生的情況 – 而無需離開編輯器。 可以查詢程式碼引用、程式碼更改、關聯的 Bug、工作項、程式碼評審和單元測試。
        codeLensFontFamily: '', // codeLens的字型樣式
        codeLensFontSize: 14, // codeLens的字型大小
        colorDecorators: false, // 呈現內聯色彩裝飾器和顏色選擇器
        comments: {
          ignoreEmptyLines: true, // 插入行註釋時忽略空行。預設為真。
          insertSpace: true // 在行註釋標記之後和塊註釋標記內插入一個空格。預設為真。
        }, // 註釋配置
        contextmenu: true, // 啟用上下文選單
        columnSelection: false, // 啟用列編輯 按下shift鍵位然後按↑↓鍵位可以實現列選擇 然後實現列編輯
        autoSurround: 'never', // 是否應自動環繞選擇
        copyWithSyntaxHighlighting: true, // 是否應將語法突出顯示覆制到剪貼簿中 即 當你複製到word中是否保持文字高亮顏色
        cursorBlinking: 'Solid', // 游標動畫樣式
        cursorSmoothCaretAnimation: true, // 是否啟用游標平滑插入動畫  當你在快速輸入文字的時候 游標是直接平滑的移動還是直接"閃現"到當前文字所處位置
        cursorStyle: 'UnderlineThin', // "Block"|"BlockOutline"|"Line"|"LineThin"|"Underline"|"UnderlineThin" 游標樣式
        cursorSurroundingLines: 0, // 游標環繞行數 當文字輸入超過螢幕時 可以看見右側滾動條中游標所處位置是在滾動條中間還是頂部還是底部 即游標環繞行數 環繞行數越大 游標在滾動條中位置越居中
        cursorSurroundingLinesStyle: 'all', // "default" | "all" 游標環繞樣式
        cursorWidth: 2, // <=25 游標寬度
        minimap: {
          enabled: false // 是否啟用預覽圖
        }, // 預覽圖設定
        folding: true, // 是否啟用程式碼摺疊
        links: true, // 是否點選連結
        overviewRulerBorder: false, // 是否應圍繞概覽標尺繪製邊框
        renderLineHighlight: 'gutter', // 當前行突出顯示方式
        roundedSelection: false, // 選區是否有圓角
        scrollBeyondLastLine: false, // 設定編輯器是否可以滾動到最後一行之後
        readOnly: this.opts.readOnly, // 是否為只讀模式
        theme: 'vs'// vs, hc-black, or vs-dark
      },
    }
  },
  methods: {
    init () {
            this.monacoEditor = monaco.editor.create(this.$refs.container, editorOptions)
        }
  }
}
</script>

一些主要的配置都已經在程式碼裡面進行註釋了喲，是不是好用又簡單呢？

最後

最後大家趕緊在自己的專案中用起來吧，希望國產編輯器也能崛起，下次我們將會繼續分享一些其他好玩的開源外掛，趕緊關注起來吧！

相關文章