Привет друг! В этой статье попробую описать, пошаговое создание пакета npm для размещёния в нём конфигурации StyleLint.
Хочешь видеть единообразие в написанном JS посмотри статью https://dzen.ru/a/Z1iL1J62BiwFEYgd. Там ты увидишь много общего🫢 и это не страшно. Это не лень - это забота о тебе😇.
Мотивация: Желание видеть единообразие в кодовой базе - это просто восхитительно!
Есть много способов добиться стандартизации написания кодовой базы, сегодня пробуем рассмотреть создание npm пакета, для того, что бы одной зависимостью в нашем package.json, решить проблему.
И так - поехали !🛼
1. Регистрируемся на https://www.npmjs.com/.
2. Инициализируем проект
В созданной папке с проектом прописываем:
npm init -y
Это создаст базовый package.json.
{
"name": "test-eslint",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Как пример мой package.json:
{
"name": "test-stylelint",
"version": "1.0.7",
"description": "Custom Stylelint configuration for CSS and SCSS",
"type": "module",
"main": "index.js",
"exports": {
".": {
"import": "./index.js"
}
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"lint:css": "stylelint '**/*.{css,scss}'"
},
"keywords": [
"stylelint",
"css",
"scss",
"lint"
],
"author": "",
"license": "ISC",
"dependencies": {
"stylelint": "^16.11.0",
"stylelint-config-standard": "^36.0.1",
"stylelint-config-standard-scss": "^14.0.0",
"stylelint-order": "^6.0.4",
"stylelint-scss": "^6.10.0"
}
}
- Свойство "name" должно быть уникальным. Проверить можно командой:
<npm search ckopiryi cvoe cvoistvo name>
- Свойство "engines" необходимо для совместимости с менеджерами пакетов.
- Свойство "keywords" добавляет ключевые слова.
- Скрипт "lint:css" - добавляет скрипт для линтинга.
3. Установить зависимости:
npm install stylelint stylelint-config-standard stylelint-config-standard-scss stylelint-scss stylelint-order --save
4. Создать файл конфигурации линтера:
touch index.js
5. Содержимое - как пример моя конфигурация:
export default {
extends: [
'stylelint-config-standard',
'stylelint-config-standard-scss',
],
plugins: [
'stylelint-scss',
'stylelint-order',
],
rules: {
'color-hex-length': 'short',
'block-no-empty': true,
'selector-class-pattern': '^[a-z][a-zA-Z0-9]*$',
'scss/dollar-variable-pattern': '^[a-z][a-zA-Z0-9]*$',
'order/properties-order': [
'position', 'top', 'right', 'bottom', 'left', 'z-index',
'display', 'flex', 'flex-grow', 'flex-shrink', 'flex-basis',
'justify-content', 'align-items', 'align-self', 'order',
'grid', 'grid-template-rows', 'grid-template-columns', 'grid-template-areas',
'grid-gap', 'gap', 'width', 'height', 'color', 'background-color', 'background', 'background-image',
'background-position', 'background-size',
'alphabetical',
],
},
};
Не хочу описывать каждое правило, что бы не отнимать у тебя время😇. Но если двумя словами регламентируем порядок свойств в каждом классе 1) всякие position 2) его величество - flex 3) здравствуй grid 4) потом колоры 5) всё остальное в алфавитном порядке. Что бы подробно ознакомиться с правилами написания css | scss зайди на https://stylelint.io/user-guide/rules.
6. Подготавливаем пакет к публикации:
Создаём файл .npmignore, чтобы исключить лишние файлы при публикации:
node_modules
.git
.vscode
.idea
7. Опубликовываем пакет.
- Входим в свою учетную запись npm:
npm login
2. Опубликовываем пакет:
npm publish
Отлично! Теперь наш пакет можно установить как зависимость.
P.S. Если внесёшь какие то правки после публикации, не забудь изменить версионность пакета в package.json свойство "version" , так как с одной и той-же версией, npm, не разрешит опубликовать изменения. Это можно сделать вручную, или прописать команду, в зависимости от того, на сколько серьёзными для api были изменения - прописываем | major | minor | patch | premajor | preminor | prepatch | prerelease | from-git :
npm version patch
8. Использование в проекте
Но вот вопрос🤔, как заставить работать линтер у нас в проекте?
- Устанавливаем наш линтер в проект используя, применяемый в проекте пакетный менеджер, названия пакета доступно в личном кабинете https://www.npmjs.com/.
- Создаём файл .stylelintrc.js
Содержимое как пример:
import styleLintConfig from 'imya tvoego paketa';
export default styleLintConfig;
- Запускаем линтер:
npm run lint:css
Ну или можем использовать интерфейс web-storm для автоматической правки файлов стилей, что на мой скромный взгляд, куда удобнее и информативнее. Какие манипуляции для этого нужно проделать:
- Заходим в Settings
- Жмём в поиске "stylelint"
- Открываем нужную вкладку и ставим галки напротив Enable и Run eslint --fix on save.
- Если в проект не установлен stylelint, сюрприз сюрприз - установи. Применив пакетный менеджер который установлен на проекте.
pnpm i stylelint --save-dev
- В поле Stylelint package: указываем путь к пакету stylelint. Обрати внимание этот путь не к нашему конфигу, а к зависимости stylelint. В конкретном проекте. В поле Run for files: **/*.{css,scss}
- Что бы применить линтер к написанному коду, жмякаем правую кнопку мыши в файле со стилями в котором находимся на данный момент и выбираем Fix Stylelint probles.
Ну вот собственно и всё🚀🚀🚀.
9. CI для liner
Ну а теперь задача со звёздочкой, было бы не плохо переложить размещение пакета npm на чьи нибудь хрупкие плечи, главное чтоб не на наши. Ну не знаю, например на GH. Для этого необходимо:
1. Разместить проект на https://github.com/
2. Зайти в личный кабинет npm, жмём по своей иконке "правый верхний угол", в выпавшем окне выбираем Access Tokens - Generate New Token - Classic Token.
Затем придумываем имя токену и выбираем Automation нужно это нам для CI/CD.
3. Копируем созданное имя.
4. Заходим на https://github.com/ в репозиторий созданного линтера.
5. Переходим Settings - Secrets and variables - Actions.
6. Создаём New repository secrets.
6. Заходим в свою IDE и создаём в корне проекта файл .github/workflows/deploy.yml
с содержимым:
name: Publish to npm
on:
push:
branches: [ 'master' ]
jobs:
publish:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Set up Node.js
uses: actions/setup-node@v3
with:
node-version: '16'
- name: Authenticate with npm
run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc
- name: Install dependencies
run: npm install
- name: Publish package
run: npm publish
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
Описывать каждую джобу не хочу🤭, если двумя словами - name: описывает процесс, run: запускает его.
Ну вот теперь точно всё🚀🚀🚀!
Теперь при изменениях в ветке 'master', пакет будет автоматически публиковаться на npm, не забываем перед пушом изменить версионность проекта. Можно это делать и при помощи deploy.yml файла, но я не совсем разобрался, как сделать так, что бы определять какую именно версию пушить патч, минор или мажор.
Спасибо за внимание! До Новых Встреч!🤗🤗🤗