Привет друг! В этой статье попробую описать, пошаговое создание пакета npm для размещёния в нём конфигурации ESLint.
Хочешь видеть единообразие в написанном CSS посмотри статью https://dzen.ru/a/Z1mIr9iQ3kxhk-AI. Там ты увидишь много общего🫢 и это не страшно. Это не лень - это забота о тебе😇.
Мотивация: Желание видеть единообразие в кодовой базе - это нормально!
При создании проекта создаём eslint.config.js закидываем туда, понравившиеся/обговорённые конфигурации. На следующем проекте делаем взмах волшебной палочкой 🪄 Ctrl+C - Ctrl+V и вуаля, конфиг готов! Но мы же с, Вами, крутые ребята 🧸 и копипастить, даже у себя, не хотим. По этой причине можем создать не большой пакет с настройками и установить его в проект со стороны.
И так - поехали !🛼
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-eslint",
"version": "1.0.10",
"description": "Custom ESLint configuration for React and TypeScript projects",
"type": "module",
"main": "index.js",
"exports": {
".": {
"import": "./index.js"
}
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"eslint",
"eslint-config",
"typescript",
"react",
"lint"
],
"author": "",
"license": "ISC",
"engines": {
"npm": ">=7",
"yarn": ">=1.22",
"pnpm": ">=6"
},
"dependencies": {
"@eslint/eslintrc": "^3.2.0",
"@eslint/js": "^9.15.0",
"@typescript-eslint/eslint-plugin": "^8.16.0",
"@typescript-eslint/parser": "^8.16.0",
"eslint": "^9.15.0",
"eslint-plugin-import": "^2.31.0",
"eslint-plugin-react-hooks": "^5.0.0"
},
"devDependencies": {}
}
- Свойство "name" должно быть уникальным. Проверить можно командой:
<npm search ckopiryi cvoe cvoistvo name>
- Свойство "engines" необходимо для совместимости с менеджерами пакетов.
- Свойство "keywords" добавляет ключевые слова.
3. Установить зависимости:
npm install eslint @eslint/eslintrc eslint-plugin-react-hooks @typescript-eslint/eslint-plugin eslint-plugin-import @typescript-eslint/parser @eslint/js
4. Создать файл конфигурации линтера:
touch index.js
5. Содержимое - как пример моя конфигурация:
import js from '@eslint/js';
import { FlatCompat } from '@eslint/eslintrc';
import parser from '@typescript-eslint/parser';
import importPlugin from 'eslint-plugin-import';
import reactHooks from 'eslint-plugin-react-hooks';
import typescriptEslint from '@typescript-eslint/eslint-plugin';
const compat = new FlatCompat();
export default [
js.configs.recommended,
...compat.extends('plugin:react-hooks/recommended'),
...compat.extends('plugin:@typescript-eslint/recommended'),
{
files: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'],
languageOptions: {
parser: parser,
ecmaVersion: 2021,
sourceType: 'module',
},
plugins: {
'@typescript-eslint': typescriptEslint,
import: importPlugin,
'react-hooks': reactHooks,
},
rules: {
'react-hooks/exhaustive-deps': 'warn',
'react-hooks/rules-of-hooks': 'error',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
'no-console': 'warn',
'prefer-const': 'warn',
quotes: ['warn', 'single'],
indent: ['warn', 2],
'max-len': ['warn', { code: 120 }],
'comma-dangle': ['warn', 'always-multiline'],
semi: ['warn', 'always'],
'import/order': [
'warn',
{
groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object', 'type'],
'newlines-between': 'always-and-inside-groups',
},
],
},
settings: {
react: {
version: 'detect',
},
},
},
];
Подробно останавливаться на описании каждого правила, не думаю, что стоит, так как художник - ты, и наверняка захочешь что то сделать по другому, так что загляни сюда https://eslint.org/docs/latest/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/.
- Создаём файл eslint.config.js
Содержимое как пример:
import eslintConfig from 'tvoe imya paketa';
export default eslintConfig;
- Запускаем линтер:
В файле package.json к скриптам прописываем "lint": "eslint .", ну и запускаем если надо.
Для меня куда приятнее выполнять правки по коду используя интерфейс web-storm. Для того, что бы провернуть подобное, необходимо.
- Заходим в Settings
- Жмём в поиске "eslint"
- Открываем нужную вкладку и ставим галки напротив Automatic ESlint Configuration и Run eslint --fix on save.
- Что бы применить линтер к написанному коду, жмякаем правую кнопку мыши в файле котором находимся на данный момент и выбираем Fix eslint probles.
Ну вот собственно и всё🚀🚀🚀.
9. CI для linter
Ну а теперь задача со звёздочкой, было бы не плохо переложить размещение пакета 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 файла, но я не совсем разобрался, как сделать так, что бы определять какую именно версию пушить патч, минор или мажор.
Спасибо за внимание! До Новых Встреч!🤗🤗🤗