Registry / web-framework / vue-eslint-editor

vue-eslint-editor

library1.1.0jsnpmunverified

A Vue.js component providing an embedded code editor for ESLint playgrounds, built on Monaco Editor. Current stable version is 1.1.0, released with Quick Fix support for autofixes and suggestions. The package integrates ESLint linting directly in the editor, supports multiple languages via the `language` prop, and offers preprocessing/postprocessing hooks. It requires Vue 2.x (not Vue 3) and Monaco Editor as peer dependencies. Differentiators include deep ESLint integration and a dedicated component for Vue-based playgrounds.

web-framework

npm install vue-eslint-editor

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-ESLINT-EDITOR

vue-eslint-editor

web-frameworkjavascriptv1.1.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueEslintEditor

✓ import VueEslintEditor from 'vue-eslint-editor'

✗ const VueEslintEditor = require('vue-eslint-editor')

Default export is the Vue component. CommonJS require works, but ESM is preferred for bundlers.

VueEslintEditor

✓ import VueEslintEditor from 'vue-eslint-editor'

✗ import { VueEslintEditor } from 'vue-eslint-editor'

Named import is incorrect; the package exports a single default component.

VueEslintEditor (as component)

✓ components: { 'vue-eslint-editor': VueEslintEditor }

✗ components: { VueEslintEditor }

When registering, the key in components should be the tag name used in templates (kebab-case).

Basic usage of vue-eslint-editor with Vue 2, registering the component and passing code, language, and linter props.

<template> <div id="app"> <vue-eslint-editor :code="code" :language="language" :linter="linter" @change="onCodeChange" style="height: 400px;" /> </div> </template> <script> import Vue from 'vue' import VueEslintEditor from 'vue-eslint-editor' import { Linter } from 'eslint' export default { name: 'App', components: { 'vue-eslint-editor': VueEslintEditor }, data() { return { code: 'const x = 1', language: 'javascript', linter: new Linter() } }, methods: { onCodeChange(newCode) { console.log(newCode) } } } </script>

Debug

Known issues

gotchaThe component only supports Vue 2.x, not Vue 3. Attempting to use in Vue 3 will fail.

fix

Use with Vue 2 or find an alternative for Vue 3.

affects: all

deprecatedMonaco Editor version used by the component is fixed; upgrading Monaco independently may break.

fix

Ensure monaco-editor peer dependency matches version expected by vue-eslint-editor (currently 0.20.0+).

affects: >=1.0.0

gotchaThe linter prop expects an instance of ESLint's Linter class, not a config object.

fix

Create a new Linter instance: this.linter = new (require('eslint').Linter)()

affects: >=0.1.0

breakingv1.0.0 upgraded monaco-editor to 0.20.0, changing renderValidationDecorations option behavior.

fix

If using renderValidationDecorations, ensure it is set to 'on' as the default changed.

affects: >=1.0.0

Errors

Common errors & fixes

Unknown custom element: <vue-eslint-editor> - did you register the component correctly?

Component not globally registered or not imported correctly.

fix

Import and register the component locally or globally: import VueEslintEditor from 'vue-eslint-editor'; Vue.component('vue-eslint-editor', VueEslintEditor)

Cannot read property 'defineTheme' of undefined

monaco-editor not loaded or improperly initialized.

fix

Ensure monaco-editor is installed and imported before using the component: import * as monaco from 'monaco-editor'

The "linter" prop expects a valid ESLint Linter instance

linter prop not provided or is not a Linter instance.

fix

Pass a new Linter(): :linter="new (require('eslint').Linter)()"

Upgrade

Version history

1.1.0latest on npm

Audit

Dependencies

monaco-editorrequiredThe editor widget is based on Monaco Editor; must be installed and comes with its own CSS.

eslintoptionalESLint is used for linting the code; bundled via eslint4b or similar, but the component expects an ESLint Linter instance.

Agent activity

6 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/mysticatea/vue-eslint-editor ↗

packagehttps://www.npmjs.com/package/vue-eslint-editor ↗