天蚕土豆,好看的课外书,殿上欢

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

聊聊VSCode使用的代碼編輯器

前言

另一個(gè)優(yōu)秀的庫(kù)就是 Monaco Editor，它比較重量級(jí)，但功能卻十分優(yōu)秀，本文主要介紹下 Monaco Editor 的用法。

十年的新巴爾虎右網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營(yíng)銷型網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整新巴爾虎右建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“新巴爾虎右網(wǎng)站設(shè)計(jì)”,“新巴爾虎右網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

Monaco Editor 介紹

Monaco Editor 是 VS code 使用的編輯器，支持豐富的代碼格式，擁有良好的可擴(kuò)展性，支持代碼并排對(duì)比編輯器，并且友好的支持視覺(jué)障礙人士，擁有語(yǔ)音播報(bào)功能，但 Monaco Editor 在移動(dòng) web 中卻不支持。

代碼對(duì)比

功能

對(duì)以下語(yǔ)言支持代碼感知和驗(yàn)證：

TypeScript, JavaScript, CSS, LESS, SCSS, JSON, HTML。

對(duì)以下語(yǔ)法支持代碼高亮：

XML, PHP, C#, C++, Razor, Markdown, Diff, Java, VB, CoffeeScript, Handlebars, Batch, Pug, F#, Lua, Powershell, Python, Ruby, SASS, R, Objective-C。

基本使用

1、首先安裝 monaco-editor：

npm install monaco-editor

2、需要一個(gè)渲染編輯器的容器節(jié)點(diǎn)，我們?cè)O(shè)置是一個(gè) id 為 container 的 div：

3、在 js 文件中引入 monaco editor, 并創(chuàng)建編輯器：

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'

monaco.editor.create(document.getElementById('container'), {
  value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
})

打開(kāi)瀏覽器，我們可以看到編輯器已經(jīng)成功展示出來(lái)：

效果

常規(guī)配置

我們可以在 create 的第二個(gè)參數(shù)傳遞一個(gè) option 參數(shù)。

參數(shù)	說(shuō)明	類型	默認(rèn)值	可選值
value	編輯器的初始值	string	-	-
theme	編輯器的主題樣式,除了提供的可選值外，也可以通過(guò) monaco.editor.defineTheme 自定義主題	string	'vs'	'vs','vs-dark','hc-black'
language	編輯器的初始語(yǔ)言,例如可以設(shè)置為 javascript, json 等	string	-	-
model	和編輯器關(guān)聯(lián)的初始模型	ITextModel	-	-
lineNumbers	控制行數(shù)的渲染，如果是 function，那么會(huì)使用 return 的內(nèi)容作為行數(shù)展示	string/Function	'on'	'on','off','relative', 'interval', '(lineNumber: number) => string'
readOnly	控制編輯器是否只讀	boolean	false	-
autoClosingBrackets	自動(dòng)閉合括號(hào)	string	'languageDefined'	'always'/'languageDefined'/'beforeWhitespace'/'never'
autoClosingOvertype	自動(dòng)閉合括號(hào)或引號(hào)	string	-	'always'/'auto'/'never'
autoClosingQuotes	自動(dòng)閉合引號(hào)	string	'languageDefined'	'always'/'languageDefined'/'beforeWhitespace'/'never'
autoIndent	自動(dòng)縮進(jìn)	string	'advanced'	'none'/'keep'/'brackets'/'advanced'/'full'

在 webpack 中使用

JS 代碼：

import * as monaco from 'monaco-editor'

self.MonacoEnvironment = {
  getWorkerUrl: function (moduleId, label) {
    if (label === 'json') {
      return './json.worker.bundle.js'
    }
    if (label === 'css' || label === 'scss' || label === 'less') {
      return './css.worker.bundle.js'
    }
    if (label === 'html' || label === 'handlebars' || label === 'razor') {
      return './html.worker.bundle.js'
    }
    if (label === 'typescript' || label === 'javascript') {
      return './ts.worker.bundle.js'
    }
    return './editor.worker.bundle.js'
  },
}

monaco.editor.create(document.getElementById('container'), {
  value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
  language: 'javascript',
})

然后需要在 webpack 入口添加配置：

module.exports = {
  mode: 'development',
  entry: {
    app: './index.js',
    'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
    'json.worker': 'monaco-editor/esm/vs/language/json/json.worker',
    'css.worker': 'monaco-editor/esm/vs/language/css/css.worker',
    'html.worker': 'monaco-editor/esm/vs/language/html/html.worker',
    'ts.worker': 'monaco-editor/esm/vs/language/typescript/ts.worker',
  },
  output: {
    globalObject: 'self',
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.ttf$/,
        use: ['file-loader'],
      },
    ],
  },
}

上述加載方式是 ESM 的加載方式，默認(rèn)情況下，monaco editor 附帶的所有語(yǔ)言都將包含在內(nèi)，如果你覺(jué)得這樣配置麻煩，可以使用 monaco-editor-webpack-plugin，通過(guò)只選擇特定的語(yǔ)言或者只選擇特定的編輯器特性，這樣可以用來(lái)生成一個(gè)更小的編輯器包。

修改 webpack.config.js ，在 languages 填寫只包含支持的語(yǔ)言子集。

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
const path = require('path')

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.ttf$/,
        use: ['file-loader'],
      },
    ],
  },
  plugins: [
    new MonacoWebpackPlugin({
      languages: ['typescript', 'html', 'css'],
    }),
  ],
}

值獲取

editor.getValue()

獲取編輯器中的所有文本，并生成一個(gè)字符串返回，會(huì)保留所有信息(換行、縮進(jìn)、注釋等等)。

editor.getSelection()

獲取編輯器中被選中文案的 range ，返回一個(gè)對(duì)象，如下：

{
  "startLineNumber": 0,
  "startColumnNumber": 0,
  "endLineNumber": 0,
  "endColumnNumber": 0
}

自定義語(yǔ)言

monaco editor 還可以支持自定義語(yǔ)言，下面代碼演示一個(gè)日志的編輯器：

//  注冊(cè)一個(gè)語(yǔ)言
monaco.languages.register({ id: 'mySpecialLanguage' })

// 通過(guò)正則注冊(cè)解析規(guī)則
monaco.languages.setMonarchTokensProvider('mySpecialLanguage', {
  tokenizer: {
    root: [
      [/\[error.*/, 'custom-error'],
      [/\[notice.*/, 'custom-notice'],
      [/\[info.*/, 'custom-info'],
      [/\[[a-zA-Z 0-9:]+\]/, 'custom-date'],
    ],
  },
})

// 定義僅包含與此語(yǔ)言匹配的規(guī)則的新主題
monaco.editor.defineTheme('myCoolTheme', {
  base: 'vs',
  inherit: false,
  rules: [
    { token: 'custom-info', foreground: '808080' },
    { token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
    { token: 'custom-notice', foreground: 'FFA500' },
    { token: 'custom-date', foreground: '008800' },
  ],
  colors: {
    'editor.foreground': '#000000',
  },
})

// 注冊(cè)新語(yǔ)言的代碼提示
monaco.languages.registerCompletionItemProvider('mySpecialLanguage', {
  provideCompletionItems: () => {
    var suggestions = [
      {
        label: 'simpleText',
        kind: monaco.languages.CompletionItemKind.Text,
        insertText: 'simpleText',
      },
      {
        label: 'testing',
        kind: monaco.languages.CompletionItemKind.Keyword,
        insertText: 'testing(${1:condition})',
        insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
      },
      {
        label: 'ifelse',
        kind: monaco.languages.CompletionItemKind.Snippet,
        insertText: ['if (${1:condition}) {', '\t$0', '} else {', '\t', '}'].join('\n'),
        insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
        documentation: 'If-Else Statement',
      },
    ]
    return { suggestions: suggestions }
  },
})

monaco.editor.create(document.getElementById('container'), {
  theme: 'myCoolTheme',
  value: getCode(),
  language: 'mySpecialLanguage',
})

效果：

通過(guò)這個(gè)例子，我們就可以在網(wǎng)頁(yè)實(shí)現(xiàn)友好查看在線日志。

在 react 中使用

目前社區(qū)已經(jīng)封裝了 @monaco-editor/react，而且不需要使用 webpack (或 rollup/parcel/etc)配置文件/插件。

import React from 'react'

import Editor from '@monaco-editor/react'

function App() {
  return 
}

export default App

詳情請(qǐng)參考倉(cāng)庫(kù) npm[1]。

應(yīng)用

tailwindcss 的在線運(yùn)行網(wǎng)站就 https://play.tailwindcss.com/ 就是使用了 monaco-editor 并且擁有智能的語(yǔ)法提示，代碼是開(kāi)源的。

小結(jié)

本文簡(jiǎn)單介紹了下 monaco-editor，當(dāng)然還有很多高級(jí)功能等待著我們?nèi)ヌ剿骱屯诰颍?文中羅列并不全面，深入挖掘請(qǐng)大家參考官網(wǎng)[2]和Github[3] ，希望在未來(lái)的開(kāi)發(fā)中能夠快速上手類似的代碼編輯器實(shí)現(xiàn)。

參考資料

[1]npm: https://www.npmjs.com/package/@monaco-editor/react

[2]官網(wǎng): https://microsoft.github.io/monaco-editor/

[3]Github: https://github.com/microsoft/monaco-editor

分享題目：聊聊VSCode使用的代碼編輯器
鏈接地址：http://fisionsoft.com.cn/article/dhosdop.html