The standard shareable Vue config for Stylelint.

Yosuke Ota

Last update: Dec 13, 2022

Related tags

Vue.js stylelint-config-standard-vue

Overview

stylelint-config-standard-vue

The standard shareable Vue config for Stylelint.

This config:

extends the stylelint-config-standard shared config and configures its rules for Vue
extends the stylelint-config-recommended-vue shared config

Requirements

Stylelint v14.0.0 and above
It cannot be used with Stylelint v13 and below.

To see the rules that this config uses, please read the config itself.

💿 Installation

npm install --save-dev postcss-html stylelint-config-standard-vue

📖 Usage

Set your stylelint config to:

{
    "extends": "stylelint-config-standard-vue"
}

Note: This config enables rules for only .vue files.

If you don't want the rules to be overridden (If you want to enable only the parser.), please use stylelint-config-html.

{
    "extends": "stylelint-config-html/vue"
}

Since this package configure customSyntax option to allow parsing Vue files, be sure it is the LAST item into the extends array, in case more than one configuration is applied. Not complying to this rule may result in broken Vue files parsing, generating confusing errors like Unknown word (CssSyntaxError).

With SCSS

Install stylelint-config-standard-scss:

npm install --save-dev stylelint-config-standard-scss

Set your stylelint config to:

{
    "extends": "stylelint-config-standard-vue/scss"
}

When used with stylelint-config-standard-scss:

{
    "extends": [
        "stylelint-config-standard-scss",
        "stylelint-config-standard-vue/scss"
    ]
}

Extending the config

Simply add a "rules" key to your config, then add your overrides and additions there.

For example, to add the unit-allowed-list rule:

{
    "extends": "stylelint-config-standard-vue",
    "overrides": [
        {
            "files": ["*.vue", "**/*.vue"],
            "rules": {
                "unit-allowed-list": ["em", "rem", "s"]
            }
        }
    ]
}

💻 Editor integrations

Visual Studio Code

Use the stylelint.vscode-stylelint extension that Stylelint provides officially.

You have to configure the stylelint.validate option of the extension to check .vue files, because the extension does not check the *.vue file by default.

Example .vscode/settings.json:

{
  "stylelint.validate": [
      ...,
      // ↓ Add "vue" language.
      "vue"
  ]

🔒 License

See the LICENSE file for license rights and limitations (MIT).

Comments

Unknown word (CssSyntaxError) in VSCode

show error in vscode, but not in terminal

package.json

"devDependencies": {
    "postcss-html": "^1.3.1",
    "stylelint": "^14.6.1",
    "stylelint-config-standard-vue": "^1.0.0",
  },

lint syntax

    "lint:style": "stylelint **/*.vue",

.stylelintrc.js

module.exports = {
  extends: [
    "stylelint-config-standard-vue"
  ],
  customSyntax: "postcss-html",
};

needs repro

opened by Sky-star 8

Cannot format .vue files

Hi!

I use stylelint-config-standard-vue to format .vue file in does not work, but is fine.

devDependencies

"stylelint": "^14.5.3",
"stylelint-config-recess-order": "^3.0.0",
"stylelint-config-standard": "^25.0.0",
 "stylelint-config-standard-scss": "^3.0.0",
"stylelint-config-standard-vue": "^1.0.0",

.stylelintrc.js

module.exports = {
    extends: [
        'stylelint-config-recess-order',
        "stylelint-config-standard-scss",
        "stylelint-config-standard-vue/scss"
    ],
    rules: {
        "indentation": 4,
        'scss/at-import-partial-extension': null
    }
};

.vscode/settings.json

/// stylelint
    "css.validate": false,
    "less.validate": false,
    "scss.validate": false,
    "stylelint.validate": [
        "css",
        "less",
        "postcss",
        "scss",
        "vue",
        "sass"
    ],
"editor.codeActionsOnSave": {
        "source.fixAll": true,
        "source.fixAll.stylelint": true
    },

Please help. Thanks.

opened by solumon 4

Doesn't work with vue+scss

I make the same "errors" in both a .scss file and a .vue file and I cannot get stylelint to detect the vue file errors using the cli.

Steps to reproduce:

follow instructions in the readme of this repo
run npx stylelint my-file.scss and I get errors reported
run npx stylelint my-file.vue and I don't get errors reported

Note: if I change my style block in the vue file to normal css (<style lang="scss"> => <style>) then the errors are reported ok.

My Setup

package.json (relevant bits)

{
  "devDependencies":  {
      "vue": "^3.2.24",
      "postcss-html": "^1.3.0",
      "stylelint": "^14.2.0",
      "stylelint-config-standard-scss": "^3.0.0",
      "stylelint-config-standard-vue": "^1.0.0",
  }
}

.stylelintrc.yaml

# .stylelintrc.yaml
extends:
  - stylelint-config-standard-scss
  - stylelint-config-standard-vue/scss

My vue file style block

<style lang="scss">
    // expect camel case error
    .santVeamos {
        color: red;
        font-size: 4em;
    }
    // expect empty error
    .empty {}
</style

My normal scss file (exactly same contents as vue style block)

    // expect camel case error
    .santVeamos {
        color: red;
        font-size: 4em;
    }
    // expect empty error
    .empty {}

cli output

➜  $ npx stylelint {my-file.vue,my-file.scss}

my-file.scss
  4:1   ✖  Expected class selector to be kebab-case  selector-class-pattern
  8:11  ✖  Unexpected empty block                    block-no-empty

As you see only errors from the .scss file are reported.

cli output when I remove the lang="scss" part from my file

➜  $ npx stylelint {my-file.vue,my-file.scss}

my-file.scss
 4:1   ✖  Expected class selector to be kebab-case  selector-class-pattern
 8:11  ✖  Unexpected empty block                    block-no-empty        

my-file.vue
 75:5   ✖  Expected class selector to be kebab-case  selector-class-pattern
 80:12  ✖  Unexpected empty block                    block-no-empty

opened by santiagoarizti 2

Update dependency @ota-meshi/eslint-plugin to ^0.13.0
This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @ota-meshi/eslint-plugin | ^0.12.0 -> ^0.13.0 | | | | |

Release Notes

ota-meshi/eslint-plugin

v0.13.0

Compare Source

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Enabled.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

[ ] If you want to rebase/retry this PR, click this checkbox.

This PR has been generated by Mend Renovate. View repository job log here.
opened by renovate[bot] 0
Update dependency @ota-meshi/eslint-plugin to ^0.12.0
This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @ota-meshi/eslint-plugin | ^0.11.0 -> ^0.12.0 | | | | |

Release Notes

ota-meshi/eslint-plugin

v0.12.0

Compare Source

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Enabled.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

[ ] If you want to rebase/retry this PR, click this checkbox.

This PR has been generated by Mend Renovate. View repository job log here.
opened by renovate[bot] 0
Update dependency eslint-plugin-json-schema-validator to v4
This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | eslint-plugin-json-schema-validator | ^3.0.0 -> ^4.0.0 | | | | |

Release Notes

ota-meshi/eslint-plugin-json-schema-validator

v4.0.0

Compare Source

💥 Breaking Changes

Change not to bundle schmas data by @ota-meshi in https://github.com/ota-meshi/eslint-plugin-json-schema-validator/pull/158

Drop support for Node.js < 14.18.0 by @ota-meshi in https://github.com/ota-meshi/eslint-plugin-json-schema-validator/pull/161

Full Changelog: https://github.com/ota-meshi/eslint-plugin-json-schema-validator/compare/v3.2.8...v4.0.0

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Enabled.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

[ ] If you want to rebase/retry this PR, click this checkbox.

This PR has been generated by Mend Renovate. View repository job log here.
opened by renovate[bot] 0
Update dependency @ota-meshi/eslint-plugin to ^0.11.0
This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @ota-meshi/eslint-plugin | ^0.10.0 -> ^0.11.0 | | | | |

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Enabled.

♻ Rebasing: Renovate will not automatically rebase this PR, because other commits have been found.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

[ ] If you want to rebase/retry this PR, click this checkbox. ⚠ Warning: custom changes will be lost.

This PR has been generated by Mend Renovate. View repository job log here.
opened by renovate[bot] 0
Update dependency eslint-plugin-yml to v1
This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | eslint-plugin-yml (source) | ^0.15.0 -> ^1.0.0 | | | | |

Release Notes

ota-meshi/eslint-plugin-yml

v1.0.0

Compare Source

💥 Breaking Changes

#148 Drop support for Node.js v12.

#148 Upgrade yaml-eslint-parser.

Full Changelog: https://github.com/ota-meshi/eslint-plugin-yml/compare/v0.15.0...v1.0.0

Configuration

📅 Schedule: At any time (no schedule defined).

🚦 Automerge: Enabled.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

[ ] If you want to rebase/retry this PR, click this checkbox.

This PR has been generated by WhiteSource Renovate. View repository job log here.
opened by renovate[bot] 0
Update dependency eslint-plugin-json-schema-validator to v3
This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | eslint-plugin-json-schema-validator (source) | ^2.0.0 -> ^3.0.0 | | | | |

Release Notes

ota-meshi/eslint-plugin-json-schema-validator

v3.0.0

Compare Source

💥 Breaking Changes

#131 Drop support for Node.js v12.

#131 Upgrade yaml-eslint-parser.

Full Changelog: https://github.com/ota-meshi/eslint-plugin-json-schema-validator/compare/v2.4.5...v3.0.0

Configuration

📅 Schedule: At any time (no schedule defined).

🚦 Automerge: Enabled.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

[ ] If you want to rebase/retry this PR, click this checkbox.

This PR has been generated by WhiteSource Renovate. View repository job log here.
opened by renovate[bot] 0
Update dependency eslint-plugin-vue to v9
This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | eslint-plugin-vue (source) | ^8.0.0 -> ^9.0.0 | | | | |

Release Notes

vuejs/eslint-plugin-vue

v9.0.0

Compare Source

💥 Breaking Changes

#1847 Drop support for Node.js v12.

#1846 Change default casing of vue/custom-event-name-casing rule to camelCase.

#1883 Potentially breaking bug fix: Enable vue/html-closing-bracket-spacing and vue/html-closing-bracket-newline rules for top-level tags.

#1848, #1892 Change presets configs and remove unused internal methods. (see below)

#1849 Upgrade vue-eslint-parser to v9. (see below)

#1881 Remove deprecated rules. (see below)

Change Vue 3 presets configs

Change plugin:vue/vue3-essential config:

Add vue/no-child-content rule

Add vue/no-expose-after-await rule

Add vue/no-reserved-component-names rule

Add vue/no-use-computed-property-like-method rule

Add vue/no-v-text-v-html-on-component rule

Add vue/prefer-import-from-vue rule

Add vue/valid-attribute-name rule

Change plugin:vue/vue3-strongly-recommended config:

Same changes as above

Change plugin:vue/vue3-recommended config:

Same changes as above

Change Vue 2 preset configs

Change plugin:vue/essential config:

Add vue/no-child-content rule

Add vue/no-reserved-component-names rule

Add vue/no-use-computed-property-like-method rule

Add vue/no-v-text-v-html-on-component rule

Add vue/valid-attribute-name rule

Add vue/valid-model-definition rule

Add vue/no-export-in-script-setup rule *

Add vue/no-ref-as-operand rule *

Add vue/no-setup-props-destructure rule *

Add vue/return-in-emits-validator rule *

Add vue/valid-define-emits rule *

Add vue/valid-define-props rule *

Change plugin:vue/strongly-recommended config:

Same changes as above

Change plugin:vue/recommended config:

Same changes as above

Note: The rules marked with * are now included in the plugin:vue/essential config because @vue/composition-api and unplugin-vue2-script-setup add (limited) support for these Vue 3 features in Vue 2. If you don't use those libraries, enabling these rules shouldn't affect you.

Deprecated features

vue/no-invalid-model-keys rule is now deprecated, as it's renamed to vue/valid-model-definition

vue/script-setup-uses-vars rule is now deprecated, as it's no longer needed with the upgrade to vue-eslint-parser to v9

vue/setup-compiler-macros environment is now deprecated, as it's no longer needed with the upgrade to vue-eslint-parser to v9

Removed features

Previously deprecated rules are removed completely:

vue/experimental-script-setup-vars rule (deprecated in v7.13.0): not needed anymore

vue/name-property-casing rule (deprecated in v7.0.0): use vue/component-definition-name-casing instead

vue/no-confusing-v-for-v-if rule (deprecated in v5.0.0): use vue/no-use-v-if-with-v-for instead

vue/no-unregistered-components rule (deprecated in v8.4.0): use vue/no-undef-components instead

Previously deprecated internal util methods are removed completely:

getComponentProps: use getComponentPropsFromOptions instead

getComponentEmits: use getComponentEmitsFromOptions instead

✨ Enhancements

#1874 Make vue/match-component-file-name rule fixable via editor suggestions.

#1885 Support <script setup> in vue/no-expose-after-await rule.

#1851, #1892 Add vue/valid-attribute-name rule.

🐛 Bug Fixes

#1861 Fix wrong behavior of vue/define-macros-order rule when there are multiple <script> tags.

#1883 Potentially breaking bug fix: Enable vue/html-closing-bracket-spacing and vue/html-closing-bracket-newline rules for top-level tags.

Full Changelog: https://github.com/vuejs/eslint-plugin-vue/compare/v8.7.0...v9.0.0

Configuration

📅 Schedule: At any time (no schedule defined).

🚦 Automerge: Enabled.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

[ ] If you want to rebase/retry this PR, click this checkbox.

This PR has been generated by WhiteSource Renovate. View repository job log here.
opened by renovate[bot] 0
Update dependency eslint-plugin-yml to ^0.15.0
This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | eslint-plugin-yml (source) | ^0.14.0 -> ^0.15.0 | | | | |

Release Notes

ota-meshi/eslint-plugin-yml

v0.15.0

Compare Source

What's Changed

Fix wrong indent for block literal with array hyphen mark by @ota-meshi in https://github.com/ota-meshi/eslint-plugin-yml/pull/152

Full Changelog: https://github.com/ota-meshi/eslint-plugin-yml/compare/v0.14.0...v0.15.0

Configuration

📅 Schedule: At any time (no schedule defined).

🚦 Automerge: Enabled.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

[ ] If you want to rebase/retry this PR, click this checkbox.

This PR has been generated by WhiteSource Renovate. View repository job log here.
opened by renovate[bot] 0

Releases(v1.0.0)

v1.0.0(Jan 24, 2022)

First release
Source code(tar.gz)
Source code(zip)

Owner

Yosuke Ota

Member of @vuejs, @stylelint and @intlify. Owner of cheetah-grid. Java/JavaScript/TypeScript/Python. I use broken English.

GitHub

vite+vue3.2+setup+elementPlus+eslint+js+stylelint

前期准备工作，npm包和vscode配置！！！很重要，关乎整个Vue3开发阶段的代码提示 Volar使用使用Vue3开发需要禁用vscode插件Vetur 然后安装 Volar(Vue Language Features)，这样Vue3代码提示即使是使用js开发也非常友好如果volar没有任何

2 Feb 8, 2022

🛠️ Standard Tooling for Vue.js Development

Vue CLI Vue CLI is the Standard Tooling for Vue.js Development. Documentation Docs are available at https://cli.vuejs.org/ - we are still working on r

29.6k Jan 4, 2023

:tada: A magical vue admin https://panjiachen.github.io/vue-element-admin

English | 简体中文 | 日本語 | Spanish SPONSORED BY 活动服务销售平台客户消息直达工作群 Introduction vue-element-admin is a production-ready front-end solution for admin inter

80.1k Dec 31, 2022

:eyes: Vue in React, React in Vue. Seamless integration of the two. :dancers:

vuera NOTE: This project is looking for a maintainer! Use Vue components in your React app: import React from 'react' import MyVueComponent from './My

4k Dec 30, 2022

🎉 基于 vite 2.0 + vue 3.0 + vue-router 4.0 + vuex 4.0 + element-plus 的后台管理系统vue3-element-admin

vue3-element-admin ?? 基于 Vite 2.0 + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus 的后台管理系统简介 vue3-element-admin 是一个后台前端解决方案，它基于 vue3 和 element-plu

84 Nov 28, 2022

Jenesius vue modal is simple library for Vue 3 only

Jenesius Vue Modal Jenesius vue modal is simple library for Vue 3 only . Site Documentation Installation npm i jenesius-vue-modal For add modals in yo

63 Dec 30, 2022

A template repository / quick start to build Azure Static Web Apps with a Node.js function. It uses Vue.js v3, Vue Router, Vuex, and Vite.js.

Azure Static Web App Template with Node.js API This is a template repository for creating Azure Static Web Apps that comes pre-configured with: Vue.js