# vue-stylelint-editor

(opens new window) (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.

stylelint is the stylelint4b module to does linting and fixing.
config is the configuration object (opens new window) for the stylelint (opens new window).
code is the source code that the editor shows initially.

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" />

Type: stylelint4b | null
Default value: null

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" />

Type: ITextModelUpdateOptions (opens new window)
Default value: { insertSpaces: true, tabSize: 4 }

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.

← stylelint4b Examples →