# vue-stylelint-editor

NPM license (opens new window) NPM version (opens new window)

This package provides Vue.js (opens new window) component of a code editor for stylelint (opens new window) playgrounds.

This idea and implementation is based on eslint4b (opens new window) and vue-eslint-editor (opens new window).

# Installation

npm install stylelint4b vue-stylelint-editor

# Usage

Basically, the vue-stylelint-editor (opens new window) component requires three attributes; stylelint, config, and code.

For example:

<template>
    <vue-stylelint-editor
        style="height: 300px; border: solid 1px #ddd;"
        :stylelint="stylelint4b"
        :code="code"
        :config="config"
        fix
    />
</template>

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

export default {
    components: { VueStylelintEditor },
    data() {
        return {
            stylelint4b: null,
            code: "a { color: red; \n}",
            // stylelint config
            config: {
                extends: ["stylelint-config-standard"],
            },
        }
    },
    async mounted() {
        // Load linter asynchronously.
        this.stylelint4b = await import("stylelint4b")
    },
}
</script>
a { color: red; }
Now loading...

# 🔧 Properties

# stylelint

<vue-stylelint-editor :stylelint="stylelint4b" />

The stylelint4b module to does linting and fixing the input code.

This component requires this property in order to work properly, but this property can be null in order to use dynamic imports.

# code

<vue-stylelint-editor :code="code" />
<vue-stylelint-editor v-model="code" />
  • Type: string
  • Default value: ""

The source code which is shown in this code editor.

Users can edit the source code. You can bind a property with v-model to receive the edits.

# config

<vue-stylelint-editor :config="config" />
  • Type: object
  • Default value: { extends: ["stylelint-config-standard"], rules: {}, }

The configuration object (opens new window) to stylelint (opens new window).

# options

<vue-stylelint-editor :options="options" />
  • Type: object
  • Default value: {}

The options object to stylelint (opens new window).
Specify options that can be used with the stylelint's Node.js API (opens new window).

# dark

<vue-stylelint-editor dark />
  • Type: boolean
  • Default value: false

The flag to use dark theme.

# filename

<vue-stylelint-editor filename="a.css" />
  • Type: string
  • Default value: "a.css"

The filename of the source code.

Some rules use filenames to lint. You can customize the filename with this property.

# fix

<vue-stylelint-editor fix />
  • Type: boolean
  • Default value: false

The flag to show the "Preview" button that shows fixed code side by side (opens new window).

# format

<vue-stylelint-editor :format="format" />

The format option object for Monaco Editor (opens new window).

# language

<vue-stylelint-editor language="css" />
  • Type: string
  • Default value: "css"

The language option object for Monaco Editor (opens new window).

You can change syntax highlights and language services in order to play stylelint (opens new window) with custom parsers.

# 🔔 Events

# input

<vue-stylelint-editor @input="onInputCode" />
  • Type: string

The event which is fired on every edit.

This event is for v-model functionality.

# change

<vue-stylelint-editor @change="onChange" />
  • Type: {code: string, fixedCode: string, messages: Array, fixedMessages: Array}

The event which is fired on edits asynchronously.

The first argument has the following properties:

  • code is the current source code.
  • fixedCode is the autofixed code.
  • messages is the errors that stylelint (opens new window) reported.
  • fixedMessages is the errors which are remained after autofix.