Первоначально опубликовано мной самостоятельноблог.
Сейчас 9102 года, и срок действия многих руководств и публикаций в Интернете истек.Если вы будете следовать их шагам, вы наступите на некоторые ямы, такие какstylelint-processor-htmlбольше не поддерживается и--fixПозже.vueостались только файлы<style>часть и т. д. Ступив на яму и пробежавшись по удовлетворительным результатам, я сохраню новое руководство для использования в последующих проектах и, кстати, поделюсь им.
Почему стоит выбрать stylelint?
Этот вопрос имеет два значения: во-первых, почему вы должны использовать этот инструмент проверки стиля кода стиля, а во-вторых, почему вы выбираете его по сравнению с другими инструментами.stylelintа не другиеstylefmtЖдать.
Причины использовать линтер
Что касается первого вопроса, я полагаю, что многих мелких партнеров будет беспокоить код стиля, оставшийся от истории, или разные стили кода, написанные несколькими людьми. В частности, иногда вы можете встретить такой наследственный код:
#idA .classB,.classC{position:absolute;top: 0;left:0; display:-webkit-flex;display: flex;width:100%;background:url(../pic.png) no-repeat;-webkit-background-size:contain;background-size:contain }
Есть довольно много проблем с этим кодом из моего личного стиля:
- Использование селекторов идентификаторов для определения стилей не рекомендуется;
- Множественные селекторы не имеют разрывов строк и не являются понятными и интуитивно понятными;
- Несколько правил css не переносятся, это слишком долго, чтобы втиснуть их в одну строку;
- использовал
-webkit-префикс, но он уже поддерживается в проектеautoprefixer; - Пробелы между свойствами и значениями иногда отсутствуют и так далее.
Конечно, стиль кода варьируется от человека к человеку, поэтому команда должна быть единой. В некоторых ранних проектах, в которых отсутствовали совершенный код-ревью и другие системы, легко скапливался комок, не очень дружелюбный к другим членам команды, малочитабельный, сложно накапливаемый из-за удобства лени программистов или в момент срочная и грубая работа.Поддерживается css.
Сравнение похожих инструментов
Что касается второго вопроса, то причина выбора stylelint тоже очень проста, на данный момент всесреди подобных инструментовТот, у которого больше всего пользователей, имеет более активное сообщество и все еще поддерживается. и как этоissueВ статье упоминается, что сейчас его используют многие крупные фабрики, например, github.primerСистема настроила набор собственныхправило stylelint-config-primer.
Что касается stylefmt, то его также рекомендовалось сочетать с stylelint, и об этом упоминалось во многих блогах. Но чиновник не рекомендовал продолжать использовать его, используйте stylelint напрямую.--fixвариант.
NOTICE: Consider other tools before adopting stylefmt If you are using stylefmt with stylelint configuration to format according to its rules, you can now use stylelint's --fix option (from v7.11.0) to autofix.
Another on the other hand, prettier supports to format not only JavaScript but also CSS, SCSS and Less code.
без учетаprettierПричина в том, что он надеется предоставить унифицированную спецификацию стиля, которая официально признается сама по себе, а не просто линтер или форматтер.Настраиваемых элементов мало, а степень свободы настройки низкая.Это не подходит для команд, которые хотят делать вещи сами по себе, но больше подходит для использования отдельными разработчиками.
С чего начать
Установить зависимости
На самом деле, официальное руководство пользователя очень подробное и очень похоже на eslint.
-
установить стильлинт
npm i -D stylelint stylelint-config-standпоследний
stylelint-config-standЭто не обязательно, так же можно настроить правила с нуля по документации, либо использовать правила стороннего типа githubstylelint-config-primer. -
Установите плагин, который адаптирует синтаксис предварительной обработки
Возьмите sass в качестве примера:
npm i -D stylelint-scssОднако стилус не нашел соответствующих подключаемых модулей с высокой доступностью, что также приводит к тому, что stylelint не может анализировать синтаксис стилуса.
-
Установите плагин веб-пакета
npm i -D stylelint-webpack-plugin
использование командной строки
stylelint ищет каталоги и файлы, используя правила glob:
npx stylelint --cache **/*.{html,vue,css,sass,scss} --fix
--cacheОпция может указать использование кеша, который генерируется по умолчанию..stylelintcacheФайл помещается в каталог выполнения,--fixВ параметрах можно указать, что stylelint будет автоматически восстанавливать код, который не соответствует правилам исправления.Для других параметров см. официальную документацию.
Но есть одна проблема, о которой нужно знать,использовать без настройкиstylelint-scssперед такими плагинами, как, stylelint не может напрямую парсить vue-файлы, html-файлы и т. д. и сообщит о множестве ошибок:
1:1 ✖ Unknown word CssSyntaxError
Мы можем использовать встроенный пользовательский синтаксисpostcss-htmlдля разбора (установка не требуется):
npx stylelint **/*.{html,vue} --custom-syntax postcss-html
Также можно анализировать файлы css со встроенной поддержкой синтаксиса scss:
npx stylelint **/*.{css,sass,scss} --syntax scss
запустить через команду npm
Просто добавьте его в скрипты.Это должно быть основной операцией для фронтенд-программистов в 9102:
// package.json
{
"scripts": {
"lint:style": "stylelint **/*.{html,vue} --custom-syntax postcss-html",
"lint:css": "stylelint **/*.{css,sass,scss} --syntax scss"
}
}
или (настроеноstylelint-scssпосле плагина):
{
"scripts": {
"lint:css": "stylelint **/*.{html,vue,css,sass,scss}"
}
}
Затем вы можете вручную запустить в командной строке:
npm run lint:css
npm run lint:css -- --fix
npm run lint:css -- --cache --fix
Запуск через плагин webpack
// webpack.conf.js
const StyleLintPlugin = require('stylelint-webpack-plugin');
module.exports = {
...
'plugins': [
...
new StyleLintPlugin({
'files': ['**/*.{html,vue,css,sass,scss}'],
'fix': false,
'cache': true,
'emitErrors': true,
'failOnError': false
})
]
};
Все параметры командной строки, поддерживаемые stylelint, можно указать, передав параметры при инициализации плагина, включая упомянутые выше.--syntaxЖдать. Еще можно обратиться кstylelint-webpack-pluginОфициальная документация.
записать конфигурацию
объект конфигурации
stylelint поддерживает настройку cosmiconfig, ища объекты конфигурации в следующем порядке:
- существует
package.jsonсерединаstylelintАтрибуты - в формате JSON/YAML/JS
.stylelintrcфайл (с суффиксом) - экспорт JS-объектов
stylelint.config.jsдокумент
Его конфигурация также очень проста, толькоrules,extends,plugins,processors,ignoreFilesа такжеdefaultSeverity.
вdefaultSeverityтолько поддержка"warning"а также"error"Два, используемые для определения глобального уровня ошибки по умолчанию. Но у него нет соответствующей опции cli, и на самом деле это не очень полезно — если вы хотитеstylelint-webpack-pluginЭто просто предупреждение, а git-hooks — это прямая ошибка, когда коммит не разрешен. В документе есть предложение о том, как настроить уровень ошибки для правил отдельно, в котором упоминается, как его контролировать:
Different reporters may use these severity levels in different way, e.g. display them differently, or exit the process differently.
Но информации о репортерах нигде и в руководстве разработчика я не нашел, может надо форматтер самому написать.
Простой пример конфигурации:
// stylelint.config.js
module.exports = {
'defaultSeverity': 'error',
'extends': [ 'stylelint-config-standard' ],
'plugins': [ 'stylelint-scss' ],
'rules': {
// 不要使用已被 autoprefixer 支持的浏览器前缀
'media-feature-name-no-vendor-prefix': true,
'at-rule-no-vendor-prefix': true,
'selector-no-vendor-prefix': true,
'property-no-vendor-prefix': true,
'value-no-vendor-prefix': true
}
};
Так как его можно использоватьstylelint-scssДля разбора кода scss в файле нам не нужно использовать какие-либо официально перечисленныеprocessors.
игнорировать файлы
Хотя можно настроитьignoreFilesДля достижения простой реализации, но мы можем ожидать, что временно не включим stylelint для какого-то устаревшего старого кода, а затем постепенно выпустим его позже.В этом случае необходимо настроить множество путей к файлам. Для удобства можем написать.stylelintignoreфайла, за его синтаксисом следует.gitignoreа также.eslintignoreтоже самое:
# .stylelintignore
# 旧的不需打包的样式库
*.min.css
# 其他类型文件
*.js
*.jpg
*.woff
# 测试和打包目录
/test/
/dist/
# 通过反取忽略目录
/src/component/*
!/src/component/CompA
!/src/component/CompB
# 这样的效果是除 CompA 和 CompB 外其他目录都会被忽略
Еще можно обратиться кnode-ignore.
Как Stylint и Eslint используют конфигурацию GIT-крюков
Если проект уже использует Husky'spre-commitХук для запуска eslint, теперь добавить stylelint на самом деле очень просто:
// package.json
{
...
"lint-staged": {
"*.{vue,js}": [
"eslint --fix",
"git add"
],
"*.{html,vue,css,sass,scss}": [
"stylelint --fix",
"git add",
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged",
}
}
}
Единственное предостережение заключается в том, что lint-staged по умолчанию выполняется параллельно, и.vueфайл сделатьgit addБудут ли конфликты? Я давно не видел соответствующих дискуссий в Интернете, и у меня нет проблем с его запуском.Если вы действительно беспокоитесь, вы можете определить сопоставление глобусов отдельно.
локальное правило отключения
Также похоже на eslint, мы можем передатьstylelint-disableКомментарий для отключения правила локально.
<style>
/* stylelint-disable selector-no-vendor-prefix, property-no-vendor-prefix, value-no-vendor-prefix */
.classA {
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
/* stylelint-disable declaration-block-no-duplicate-properties */
transition-property: transform;
transition-property: transform, -webkit-transform;
/* stylelint-enable */
}
</style>
Но далее следует распространенная ошибка: вы игнорируете подсказку для префикса браузера в шапке файла, но в другом удаленном месте временно разрешаете тот же атрибут имени, через/* stylelint-enable */Перезапустите все ранее проигнорированные правила. Поэтому обязательно обратите внимание только на то, чтобы соответствующие правила формировали эхо:
<style>
.classA {
/* stylelint-disable declaration-block-no-duplicate-properties */
transition-property: transform;
transition-property: transform, -webkit-transform;
/* stylelint-enable declaration-block-no-duplicate-properties */
}
</style>
Другие соображения
-
Разобрать
.vueфайлы (однофайловые компоненты) не используют процессорыНекоторые устаревшие руководства в Интернете, в том числе обсуждения на github, рекомендуют использовать
stylelint-processor-htmlили@mapbox/stylelint-processor-arbitrary-tagsРазобрать css в html или vue, самой по себе проблемы нет, но у этого плагина есть баг, при указании stylelint'а--fixпоместит файл vue в<style>...</style>Остальные части удаляются.Мы используем собственный синтаксис
postcss-htmlили оставитьstylelint-scssПлагинов достаточно. -
некоторые правила работают
--fixОшибка в опцииНапример
declaration-block-semicolon-newline-afterнастраивать"always", в одной строке нельзя писать несколько правил css, но отступ может быть неправильным после автоисправления:<style> .classA { display: block; } a { color: pink; top: 0; } </style>После ремонта (пример, до этого я не пытался найти нужный путь при настройке):
<style> .classA { display: block; } a { color: pink; top: 0; } </style>Если это произойдет и с вами, вы можете указать
indentationБазовый отступ для правил (baseIndentLevel):module.exports = { ... rules: { ... 'indentation': [2, { 'baseIndentLevel': 1, }], 'declaration-block-semicolon-newline-after': 'always' } };