ESLint를 시연하는 Vue.js 구성 요소를 만들었습니다.

ESLint 플러그인을 만들고 게시할 때 문서에 통합해 두면 브라우저에서 동작을 확인할 수 있어 편리합니다. 예를 들어, eslint-plugin-es 이나 eslint-plugin-eslint-comments 의 문서에서는 이 컴퍼넌트가 사용되고 있습니다.

예 : eslint-plugin-es/no-optional-catch-binding

💿 설치

npm 등을 사용하여 설치합니다.

$ npm install vue-eslint-editor

📖 사용법

<vue-eslint-editor> 컴퍼넌트에는 linter , config , code 의 3 개의 속성을 부여할 필요가 있습니다.


이름
Description

linter실제로 린트하기 위한 린터 객체입니다. 브라우저에서 동작하는 린터 객체를 만들기 위해서는, eslint4b 패키지를 사용하면 편리합니다.
config
린터 객체에 전달하는 ESLint 설정입니다.
code에디터에 표시하는 소스 코드입니다.



예

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

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

export default {
    components: { EslintEditor },

    /* 中略 */

    async mounted() {
        // Linter は大きいので非同期で読むと良い。
        const { default: Linter } = await import("eslint4b")
        this.linter = new Linter()
    },
}
</script>

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

완전한 샘플 코드로 eslint-playground.vue가 있습니다.

그리고, Webpack 등의 Dynamic Imports 를 서포트하고 있는 번들러를 이용해 주세요.
( <vue-eslint-editor> 는 먼저 코드를 고정 문자열로 표시하면서 편집기 구현 부분을 비동기 적으로 읽은 다음 다시 표시합니다)

예

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: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.vue$/,
                loader: "vue-loader",
            },
        ],
    },
    plugins: [
        new VueLoaderPlugin(),
    ],
}

VuePress에서 사용하는 경우

현재 VuePress SSR 빌드에는 버그가 있습니다.

예

import EslintEditor from "../../../node_modules/vue-eslint-editor"

📚 자세한 문서

1을 참조하십시오.




API References  htps : // 기주 b. 코 m / ゔ에 js / ゔ 에 s / s 451