Stylelint in .vue

Vue.js

Stylelint

Лично для меня stylelint — это инструмент линтера кода css, который можно использовать в сочетании с nodejs и cli. После csslinter и других линтеров имеет функцию плагина, и хорошо интегрируются плагины postcss, webpack и т.д.

Если инструмент обнаружения и спецификации кода js находится после jslint и jshint, вы, должно быть, слышали об eslint. Подобно правилам проверки js-кода в eslint, в stylelint тоже есть аналогичная система обработки.

update in 12/15

Просто вилка напрямуюvue-templates for webpack, Напрямую разветвите этот проект, создайте ветвь stylelint локально, измените meta.js, повысилсяstylelintСоответствующая конфигурация (используя последний шаблон веб-пакета vue-cli, конкретный адрес версии1.2.7)

Так что теперь просто нужно содержимое ниже локального типа

/* vue init username/repo your-projectName*/
vue init EliazTray/webpack#stylelint webpack-stylelint

Появляется следующее содержимое, все можно проверить

Затем после установки зависимостей

// 就可以对所有的.vue文件进行处理了（支持.vue里面的lang）
npm run lintcss:vue

В это время должна быть ошибка, показывающаяExpected empty line before rule rule-empty-line-before

// 类似eslint中添加--fix
npm run lintcss:vue -- --fix

Вы можете обнаружить, что эти ошибки автоматически исправляются (ниже также упоминается, что некоторые ошибки не поддерживают автоматическое исправление)

Если вы хотите попробовать эффект, вы можете использовать шестнадцатеричное представление цвета в верхнем регистре в любом месте файла .vue.Используя --fix, вы можете обнаружить, что верхний регистр автоматически фиксируется в нижнем регистре (из-за наследованияstandardправила в)

Надпись совсем небольшая, если есть вопросы, можно общаться :)

TL;DR

1. Используйтеvue-cliИнициализировать проект

2.npm i stylelint stylelint-config-standard -D

3. Создайте в корневом каталоге проектаstylelint.config.jsфайл, скопируйте в него следующее содержимое.

module.exports = {
  "extends": "stylelint-config-standard",
  "rules": {
  }
}

4. Откройте package.json и вставьте в скрипты

"scripts": {
    // 表示对所有的.vue文件使用自定义的syntax去parse，自定义的syntax module就是postcss-html，并且使用--fix自动修复选项，去修复一些可以修复的规则。
  "lintcss:fix": "stylelint **/*.vue --custom-syntax postcss-html --fix"
}

5. Выполнение консолиnpm run lintcss:fix

Установить

Рекомендуется устанавливать локально и переустанавливать каждый проект заново.

npm i stylelint -D

Потому что он не установлен глобально (-gустановка), так что в общем, вам нужно использовать помощьnpm scripts, Если вы еще не играли в нее раньше, сначала проверьте соответствующую информацию.

// in package.json

···
···

{
  "scripts": {
    "lintcss": "stylelint **/*.css -s scss"
  }
}

···

Во-первых, давайте поговорим о большой предпосылке, которая очень важна.

  • stylelint автоматически игнорируетсяnode_modulesа такжеbower_modulesпроверка линтера ниже.
  • stylelint автоматически использует соответствующий синтаксис для анализа файлов с такими суффиксами, как css, .scss, .sass и т. д. Например, css использует css, а scss использует scss. Вы сказали выше, используйте-sили--syntaxвозможность переопределить загруженныйsyntax.
  • stylelint не может использовать папку как стандартный ввод (не src/, ее нужно указать как src/*.scss), а также не указывает суффикс (функция --ext в eslint). как используется в eslinteslint -ext .js,.vueВы можете линтеровать файлы указанного типа

правило

Как правило, файл конфигурации для stylelint необходимо создать в корневом каталоге проекта.

  • a stylelint property in package.json
  • a .stylelintrc file
  • a stylelint.config.js file exporting a JS object

По сравнению с eslint, eslint имеет .eslintrc.js

Бебель использует.babelrc

Итак, stylelint я привык создаватьstylelint.config.jsФайлы в module.exports путь, вывод некоторых правил конфигурации.

Взгляните на конфигурацию в моем проекте. последующийstylelint-config-standard,stylelint-orderТребует установки.

module.exports = {
  "extends": "stylelint-config-standard",
  "plugins": [
    "stylelint-order"
  ],
  "rules": {
    "order/order": [
      "declarations",
      "custom-properties",
      "dollar-variables",
      "rules",
      "at-rules"
    ],

    ····
    ····
  }
}

в общемextendsНаследовать правило, обычно используется isstylelint-config-standardЭта библиотека, эта библиотека официально рекомендована, а также используется многими крупными компаниями, такими как facebook и google, использующими этот набор правил css.

Здесь я использовал этакие плагины, и так скажу. Это действует для позиции написания свойства css.

Использование StyleLint в редакторе

То, что я только что написал, является базовой конфигурацией и введением, которое должно гарантировать, что вы можете написать это, исходя из понимания того, что такое stylelint.

Если вы хотите использовать stylelint в редакторе, напримерvscode, это очень просто,

1. Найдите stylelint в репозитории плагинов 2. В соответствии с подсказками плагина измените некоторые пользовательские настройки. Но я проверил, в моей текущей версии эти конфигурации могут действовать без необходимости. 3. Если вы хотите использовать stylelint в специальном языковом блоке, например, в файле vue, добавьте следующие настройки.

// 用户设置文件中. 文件->首选项->用户设置
// 让stylelint在vue组件中支持.
    "stylelint.additionalDocumentSelectors": [
        "vue"
    ]

stylelint будет основан на корневом каталогеstylelint.config.jsВ настройках правила перейдите к линтеру всех файлов .vue и предложите связанные с ними синтаксические ошибки.

Таким образом, он уже имеет функцию автоматического сообщения об ошибках при кодировании.

Автоматическая коррекция

Представьте, что в eslint есть --fix, а в stylelint тоже есть --fix, но --fix в stylelint может решить только некоторые проблемы, например, перед фигурными скобками должны быть пробелы, они не исправят автоматически за вас. , Ручное исправление (официальная документация тоже очень понятна)

Потом это все --fix в .css или .scss, или .sss и другие файлы, но если специальный файл еще и stylelint нужен для линтера, что нужно делать, официальная документация тоже очень понятна, используйте препроцессор , сначала используйте препроцессор для анализа соответствующего файла с параметром --custom-syntax.

настоятельно рекомендуется к прочтению

Разбирать нестандартные грамматики

Связанное обсуждение 1

Связанное обсуждение 2

После прочтения соответствующих вопросов, вероятно, следующая версия (начиная с сегодняшнего дня) (новый шаблон веб-пакета под vue-cli) должна интегрировать соответствующие настройки stylelint.

Таким образом, обработка файла vue

// package.json
{
  "scripts": {
    // 表示对所有的.vue文件使用自定义的syntax去parse，自定义的syntax module就是postcss-html，并且使用--fix自动修复选项，去修复一些可以修复的规则。
    "lintcss:fix": "stylelint **/*.vue --custom-syntax postcss-html --fix"
  }
}

этоpostcss-htmlМодуль был встроен в stylelint несколько дней назад, то есть встроен, поэтому при установке stylelint не нужно устанавливать postcss-html.Функция этого postcss-html заключается в разборе нестандартного синтаксиса, такие как уценка и vue.

Используйте соответствующие плагины

в наследствоstylelint-config-standardПосле этого уже есть некоторые правила CSS, но если мне потребуется порядок лирики CSS, на этот раз вам нужно включить обнаружение порядка атрибутов CSS (порядок свойств определяется самим собой), в основном используя имяstylelint-orderКонкретная конфигурация выглядит следующим образом.

Первыйnpm i stylelint-order -D(Уже установленоstylelint,stylelint-config-standardпомещение)

// 我项目工程的配置，order是使用style-order的推荐属性顺序。
module.exports = {
  "extends": "stylelint-config-standard",
  "plugins": [
    "stylelint-order"
  ],
  "rules": {
    "order/order": [
      "declarations",
      "custom-properties",
      "dollar-variables",
      "rules",
      "at-rules"
    ],
    "order/properties-order": [
      "position",
      "top",
      "right",
      "bottom",
      "left",
      "float",
      ...
      ...
    ]
  }
}

Таким образом, правила атрибутов, написанные моими css и scss, устанавливаются по моим правилам.Если в заказе есть ошибка, он поможет подсказать их, а затем при использовании --fix автоматически исправит правила порядка. Я установил.

Наверное, это так, очень полезный линтер, а также отдельные читатели могут изучить его самостоятельно в postcss или webpack~

Категории