Guide

💿 Installation

Use npm or a compatible tool to install.

npm install vue-eslint-editor

📖 Usage

Basically, the vue-eslint-parser component requires three attributes; linter, config, and code.

• linter is the Linter object to does linting and fixing.
• config is the configuration object for the Linter object.
• code is the source code that the editor shows initially.

TIP

The eslint4b package is useful as the Linter class which works in browsers.

For example:

<template>
    <eslint-editor
        :linter="linter"
        :config="config"
        :code="code"
    />
</template>

<script>
import EslintEditor from "vue-eslint-editor"

export default {
    components: { EslintEditor },

    /* omitting */

    async mounted() {
        // Load linter asynchronously.
        const { default: Linter } = await import("eslint4b")
        this.linter = new Linter()
    },
}
</script>

<style>
/* omitting */
</style>

TIP

See playground.vue for a complete example. That is the editor which is in Home.

Then use a bundler which has the code splitting feature, such as Webpack. The vue-eslint-editor will load the editor implementation with the dynamic import syntax since it's very large.

For example, a webpack config:

const path = require("path")
const VueLoaderPlugin = require("vue-loader/lib/plugin")

module.exports = {
    entry: {
        index: "src/index.js",
    },
    output: {
        filename: "[name].js",
        path: path.join(__dirname, "dist"),
    },
    module: {
        rules: [
            // For `vue-eslint-editor/dist/monaco.css`
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"],
            },
            // For `vue-eslint-editor/dist/codicon.ttf`
            {
                test: /\.ttf$/,
                loader: "file-loader",
            },
            // For `vue-eslint-editor/dist/index.vue`
            {
                test: /\.vue$/,
                loader: "vue-loader",
            },
        ],
    },
    plugins: [
        new VueLoaderPlugin(),
    ],
}