linux终端怎么设置monaco,Monaco Editor 使用指南
為什么要寫這篇文章?
最近開發(fā)了一個(gè)簡單的在線代碼編輯器,基于 Monaco Editor 實(shí)現(xiàn),沒有了解過 Monaco 的人可能不知道,我們常用的 VS Code 也是基于它實(shí)現(xiàn)的~
回到正題,Monaco Editor 有一份完整的官方文檔,那為什么還要寫這個(gè)文章?因?yàn)楣俜轿臋n是在是太難用了,api 難找不說,找到了也是看得云里霧里,可能是我查閱的姿勢不對吧,歡迎有文檔使用經(jīng)驗(yàn)的朋友在評論中指教~
話不多說,下面開始總結(jié)我在開發(fā)中的常用功能。
開始使用
我使用的是 Vue 版本的包 monaco-editor-vue,使用方式如下:
theme="vs-dark"
language="javascript"
:editorMounted="onEditorMounted"
:options="options"
@change="onChange"
>
export default {
name: "App",
components: {
MonacoEditor
},
data() {
return {
options: {
value: '', // 初始值
foldingStrategy: 'indentation', // 代碼可分小段折疊
automaticLayout: true, // 自適應(yīng)布局
overviewRulerBorder: false, // 不要滾動(dòng)條的邊框
autoClosingBrackets: true,
tabSize: 2, // tab 縮進(jìn)長度
minimap: {
enabled: false, // 不要小地圖
},
},
}
},
methods: {
onChange(value) {
console.log(value);
}
onEditorMounted(editor, monaco) {
window.editor = editor
window.monaco = monaco
},
}
};
復(fù)制代碼
常用 api
editor.getValue()
獲取編輯器中的所有文本,并生成一個(gè)字符串返回,會保留所有信息(換行、縮進(jìn)、注釋等等)。
editor.getSelection()
獲取編輯器中被選中文案的 range ,返回一個(gè)對象,如下:
{
startLineNumber: 0,
startColumnNumber: 0,
endLineNumber: 0,
endColumnNumber: 0,
}
復(fù)制代碼
editor.getModel()
獲取編輯器當(dāng)前的 textmodel,一般不會直接使用,通過 textmodel 可以對文本各種操作。
editor.getModel().findMatches(str|regexp)
功能和 “? + F” 一致,通過字符串或正則表達(dá)式查找編輯器內(nèi)匹配的文本,并返回匹配文本 range 的集合。
editor.getModel().getValueInRange(range)
通過 range 獲取范圍內(nèi)的文本,返回一個(gè)字符串。
editor.getModel().getLinesContent(lineNumber)
如果傳入 lineNumber,則返回對應(yīng)行的文本字符串,不傳參則返回所有行的文本字符串的集合。
editor.executeEdits()
在指定位置插入代碼,跟 editor.setValue() 不同的地方是,可以用 “? + Z” 撤銷輸入。
editor.executeEdits('insert-code', [
{
range: {
startLineNumber,
startColumn,
endLineNumber,
endColumn,
},
text,
},
])
復(fù)制代碼
editor.addAction()
在右鍵菜單里增加一欄自定義的操作。
this.editor.addAction({
id: '', // 菜單項(xiàng) id
label: '', // 菜單項(xiàng)名稱
keybindings: [this.monaco.KeyMod.CtrlCmd | this.monaco.KeyCode.KEY_J], // 綁定快捷鍵
contextMenuGroupId: '9_cutcopypaste', // 所屬菜單的分組
run: () => {}, // 點(diǎn)擊后執(zhí)行的操作
})
復(fù)制代碼
monaco.editor.setModelMarkers()
在編輯器中用波浪線標(biāo)出錯(cuò)誤提示。
monaco.editor.setModelMarkers(editor.getModel(), 'owner', [
{
startLineNumber,
startColumn,
endLineNumber,
endColumn,
message, // 提示文案
severity: monaco.MarkerSeverity.Error, // 提示的類型
},
])
復(fù)制代碼
招聘
微信支付招聘前后端開發(fā),歡迎推薦,簡歷可發(fā)送到 timorliang@tencent.com ~
總結(jié)
以上是生活随笔為你收集整理的linux终端怎么设置monaco,Monaco Editor 使用指南的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: html整合vue elementui,
- 下一篇: java保存文件到linux指定目录_怎