Блог

Главная - Вопросы по программированию - Как настроить Stylelint в приложении vue3 (vscode) для lint при сохранении

Как настроить Stylelint в приложении vue3 (vscode) для lint при сохранении

#javascript #vue.js #vuejs3 #stylelint

#javascript #vue.js #vuejs3 #stylelint

Вопрос:

Я хочу вставить свои файлы scss и область scss в компоненты .vue. моя конфигурация в stylelint.config:

 module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-recess-order',
    'stylelint-config-prettier',
    'stylelint-config-css-modules',
  ],
  plugins: [
    'stylelint-scss',
  ],
  rules: {},
}

и package.json:

 {
  "scripts": {
    "lint:all:stylelint": "yarn lint:stylelint "src/**/*.{vue,scss}""
  },
  "devDependencies": {
    "stylelint": "^14.1.0",
    "stylelint-config-prettier": "^9.0.3",
    "stylelint-config-recess-order": "^3.0.0",
    "stylelint-config-standard": "^24.0.0",
    "stylelint-scss": "^4.0.0",
  }
}

но это не работает. есть решение?

Ответ №1:

Вам необходимо указать пользовательский синтаксис, используя customSyntax опцию при компоновке чего-либо, кроме CSS, с помощью Stylelint.

Однако вместо того, чтобы использовать эту customSyntax опцию самостоятельно, вы можете расширить общие конфигурации, которые сделают это за вас:

 module.exports = {
  extends: [
    'stylelint-config-standard-scss', // configure for SCSS
    'stylelint-config-recommended-vue', // add overrides for .Vue files
    'stylelint-config-recess-order', // use the recess order for properties
    'stylelint-config-css-modules', // configure for CSS Modules methodology
    'stylelint-config-prettier' // turn off any rules that conflict with Prettier
  ]
}

Конфигурации stylelint-config-standard-scss и stylelint-config-recommended-vue shared будут настраивать Stylelint для файлов SCSS и Vue соответственно.

Вам также не нужно включать stylelint-scss плагин самостоятельно, поскольку он также входит stylelint-config-standard-scss .

Метки: