vue-stylelint-editor

This package provides Vue.js component of a code editor for stylelint playgrounds.

This idea and implementation is based on eslint4b and vue-eslint-editor.

Documentation

See documentation.

Installation

npm install stylelint4b vue-stylelint-editor

Usage

<template>
    <stylelint-editor
        :stylelint="stylelint"
        :code="code"
        :config="config"
        :options="options"
    />
</template>

<script>
import StylelintEditor from "vue-stylelint-editor"

export default {
    components: { StylelintEditor },
    props: {
        rules: {
            type: Object,
            default() {
                return {}
            },
        },
    },
    data() {
        return {
            stylelint4b: null,
            code: 'a { color: red; }'
            // stylelint config
            config: {
                extends: [
                    "stylelint-config-standard",
                ],
                rules: {},
            },
            // stylelint linting options
            options: {},
        }
    },
    computed: {
        stylelint() {
            if (!this.stylelint4b) {
                return null
            }

            return this.stylelint4b
        },
    },

    async mounted() {
        // Load linter asynchronously.
        this.stylelint4b = await import("stylelint4b")
    },
}
</script>