Syntax validation

[lucas-cota]

Ola, I need to create a syntax validation (js, html, css) for the monaco-editor in nuxt, I found nothing about it, any tips?

[e-chan1007]

By setting lang prop of <MonacoEditor> to javascript(typescript), css, (or also json), monaco-editor enables syntax checking automatically.

However, HTML couldn't be checked in this way. Using monaco-html-linter is one of the best ways.

<script setup>
import HTMLMonacoLinter from 'monaco-html-linter'
const onEditorLoad = (editor) => {
  const monaco = useMonaco()
  const linter = new HTMLMonacoLinter(editor, monaco)
  linter.watch()
}
</script>

<template>
  <MonacoEditor lang="html" @load="onEditorLoad" />
</template>

---

If you need to create error markers by yourself, try this with the latest version of nuxt-monaco-editor:

const onEditorLoad = (editor) => {
  const monaco = useMonaco()
  const model = editor.getModel()
  monaco.editor.setModelMarkers(model, 'owner', [
    {
      startLineNumber: 1,
      startColumn: 1,
      endLineNumber: 1,
      endColumn: 5,
      message: 'Error!',
      severity: monaco.MarkerSeverity.Error
    }
  ])
}

[lucas-cota]

I'm using the nuxt-monaco-editor, even when I define the language props='javascript' from the monaco editor, it doesn't do syntax checking, also i think it should do automatically. I need to check various syntaxes like js, html, css

[lucas-cota]

I need the editor to detect errors in syntax, such as the vs code

[e-chan1007]

<MonacoEditor lang="javascript" />

should enable syntax checking, shouldn't it?

Example: https://stackblitz.com/edit/nuxt-starter-bicbpv?file=app.vue

[lucas-cota]

it does not find the function useMonaco(), it suggests monaco(), but when us change to the suggestion it says it can not be accessed before startup

const monaco = useMonaco();
const severities = {
  8: 'Error',
  4: 'Warning',
  2: 'Info',
  1: 'Hint',
};
const markers = ref([]);
const value = ref('const this code = "Not working');

const onEditorLoad = () => {
  monaco.editor.onDidChangeMarkers(([uri]) => {
    markers.value = monaco.editor.getModelMarkers({ resource: uri });
  });
};
</script>

<template>
 <div>
    <MonacoEditor
    id="editor"
    v-model="value"
    lang="javascript"
    @load="onEditorLoad"
  />
  <div id="errors">
    <table>
      <tr v-for="(marker, i) in markers" :key="i">
        <td>{{ severities[marker.severity] }}</td>
        <td>
          {{ marker.message }}
        </td>
        <td>[Ln {{ marker.startLineNumber }}, Col {{ marker.startColumn }}]</td>
      </tr>
    </table>
  </div>
 </div>
</template>

<style>
html,
body,
#__nuxt {
  width: 100%;
  height: 100vh;
  margin: 0;
}

#__nuxt {
  display: flex;
  flex-direction: column;
}

#editor {
  flex-grow: 1;
  margin: 0;
  width: 100%;
}

#errors {
  width: 100%;
  height: 200px;
  overflow-y: scroll;
  flex-shrink: 0;
}

#errors table {
  width: 100%;
}
</style>

[lucas-cota]

{
  "name": "pastel-de-nata",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "nuxt --openssl-legacy-provider",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/proxy": "^2.1.0",
    "@vue/runtime-dom": "^3.2.45",
    "axios": "^1.2.0",
    "bootstrap": "^4.6.2",
    "bootstrap-vue": "^2.22.0",
    "core-js": "^3.25.3",
    "monaco-js-linter": "^1.0.2",
    "nuxt": "^2.15.8",
    "vue": "^2.7.10",
    "vue-monaco": "^1.2.2",
    "vue-server-renderer": "^2.7.10",
    "vue-template-compiler": "^2.7.14"
  },
  "devDependencies": {
    "monaco-editor": "^0.34.1",
    "nuxt-monaco-editor": "^1.1.0"
  }
}

[e-chan1007]

This package.json says you're using Nuxt 2. However, this module is for Nuxt 3.
If you can, try upgrading Nuxt to v3.0.0.

[lucas-cota]

[lucas-cota]

in version 3.0.0

[lucas-cota]

Now it worked, I created another project because I can not do the migration following the documentation, do you know how to tell me how to do the best way? Thank you

[e-chan1007]

First, you should rewrite nuxt.config.js(ts) (the document is here).

Second, try rewrite every pages and components.
Even though Nuxt started to use Vue 3 and Composition API, you can keep using Options API (used mainly in Vue 2).
Wrapping component with defineComponent({ ... }) is the good way because suggestion works better.

<script>
export default defineComponent({
  data() {
    return {
      greeting: 'Hello World!'
    }
  }
})
</script>

Those are the main way to migrate Nuxt 2 to Nuxt 3.

However, because this module is built on Composition API, you have to use Composition API in components where monaco-editor is loaded.
It is the best to rewrite all codes with Composition API, but it is a little hard.
I think using both Options API and Composition API simulatanously (tested here) is the way you can choose, too.

That's all I can tell you. I wish you good luck.

[lucas-cota]

Thank you my friend!

[lucas-cota]

Ola my friend, manage to advance in the project by changing the version of nuxt2 to the 3, I saw your examples of la codes on github, thank you very much for the tips. I wanted to ask you if you know any example of code for implement custom functions in the editor, so when the client is going to use the auto-complete be also my functions integrated in the editor

[e-chan1007]

All functions provided by monaco-editor should work with nuxt-monaco-editor.
Therefore, you should look for examples and proper functions to implement what you want on monaco-editor's website.

Example to add an action: https://stackblitz.com/edit/nuxt-starter-ffgkja?file=app.vue (Based on the official example)