{"id":15061556,"url":"https://github.com/notacat1/lint-staged-template","last_synced_at":"2026-01-01T23:51:20.696Z","repository":{"id":197409456,"uuid":"698246126","full_name":"NotACat1/lint-staged-template","owner":"NotACat1","description":"This project is a template repository optimized for efficient and standardized development. It integrates Husky, lint-staged, and Commitlint for automated Git hooks, code linting, and structured commit messages, enhancing code quality and readability.","archived":false,"fork":false,"pushed_at":"2023-10-06T15:47:31.000Z","size":13775,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-22T02:14:51.627Z","etag":null,"topics":["babel","commitlint","css","eslint","html","htmlhint","husky","husky-hooks","js","less","prettier","sass","stylelint","ts","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NotACat1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-29T13:38:30.000Z","updated_at":"2023-10-01T09:33:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"6577ae3f-cb01-4a7b-8c0a-ebdbcdc7f83a","html_url":"https://github.com/NotACat1/lint-staged-template","commit_stats":{"total_commits":21,"total_committers":2,"mean_commits":10.5,"dds":"0.23809523809523814","last_synced_commit":"e439569d98f6d5dc24f171e33067915cb5f5ce61"},"previous_names":["notacat1/lint-staged-template"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NotACat1%2Flint-staged-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NotACat1%2Flint-staged-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NotACat1%2Flint-staged-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NotACat1%2Flint-staged-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NotACat1","download_url":"https://codeload.github.com/NotACat1/lint-staged-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243723104,"owners_count":20337309,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","commitlint","css","eslint","html","htmlhint","husky","husky-hooks","js","less","prettier","sass","stylelint","ts","webpack"],"created_at":"2024-09-24T23:21:17.953Z","updated_at":"2026-01-01T23:51:20.635Z","avatar_url":"https://github.com/NotACat1.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Шаблон lint-staged\n\n![Webpack](https://img.shields.io/badge/webpack-%238DD6F9.svg?style=for-the-badge\u0026logo=webpack\u0026logoColor=black)\n![ESLint](https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge\u0026logo=eslint\u0026logoColor=white)\n![Babel](https://img.shields.io/badge/Babel-F9DC3e?style=for-the-badge\u0026logo=babel\u0026logoColor=black)\n![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge\u0026logo=javascript\u0026logoColor=%23F7DF1E)\n![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)\n![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge\u0026logo=react\u0026logoColor=%2361DAFB)\n![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge\u0026logo=css3\u0026logoColor=white)\n![SASS](https://img.shields.io/badge/SASS-hotpink.svg?style=for-the-badge\u0026logo=SASS\u0026logoColor=white)\n![Less](https://img.shields.io/badge/less-2B4C80?style=for-the-badge\u0026logo=less\u0026logoColor=white)\n![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge\u0026logo=html5\u0026logoColor=white)\n\n## Описание проекта\n\nПроект представляет собой готовый шаблонный репозиторий, созданный с учетом максимальной эффективности и комфорта при старте нового проекта. Он включает в себя набор инструментов, предназначенных для автоматизации разработки и поддержки кодовой базы.\n\nВ основе данного проекта лежит совместное использование трех мощных инструментов: Husky, lint-staged и Commitlint, работающих в тесной интеграции. Husky позволяет автоматизировать запуск сценариев Git (hooks), lint-staged обеспечивает применение линтеров и автоматическую правку кода перед каждым коммитом, а Commitlint гарантирует соблюдение структурированности и информативности сообщений коммитов. Это дает возможность поддерживать код в едином стандарте и повышает качество и читаемость кодовой базы.\n\n## Реализованный функционал\n\n### 1. Линтинг и автоматическая правка\n\nВ данном проекте установлена и настроена автоматическая система правки кода при каждом коммите, используя инструмент под названием lint-staged. Это означает, что перед фиксацией изменений в репозиторий, все файлы проходят через процесс автоматической коррекции согласно заранее установленным правилам.\n\nlint-staged работает таким образом, что он применяет линтеры (специальные инструменты для анализа и исправления кода) к файлам, которые подлежат коммиту. Это гарантирует, что в репозиторий попадут только файлы, соответствующие установленным стандартам кодирования.\n\nТакой подход позволяет обеспечить высокую читаемость и качество кода в проекте, что существенно улучшает его поддержку и развитие в долгосрочной перспективе.\n\n```json\n// package.json\n{\n // * * * другие настройки package.json * * *\n \"lint-staged\": {\n    \"*.{js,jsx}\": [\n      \"eslint --fix\",\n      \"prettier --write\"\n    ],\n    \"*.{ts,tsx}\": [\n      \"eslint --fix\",\n      \"prettier --write\"\n    ],\n    \"*.{css,scss,sass,less}\": [\n      \"stylelint --fix\",\n      \"prettier --write\"\n    ],\n    \"*.{json,ya?ml,md}\": [\n      \"prettier --write\"\n    ],\n    \"*.html\": [\n      \"htmlhint\",\n      \"prettier --write\"\n    ]\n  }\n}\n```\n\n### 2. Проверка текста коммита\n\nВнедрена автоматизированная система проверки сообщений коммитов с применением Commitlint. Этот мощный инструмент предназначен для обеспечения высокой информативности и структурированности истории изменений в проекте.\n\nCommitlint позволяет определить набор правил, которым должны соответствовать сообщения коммитов. Эти правила могут включать в себя, например, указание типа коммита (фикс, новая функциональность, улучшение, исправление бага и т.д.) и краткое описание изменений.\n\nТакой подход обеспечивает четкость и наглядность в истории изменений проекта, что делает ее более доступной и понятной для всех участников команды. Благодаря Commitlint, мы можем быть уверены, что каждый коммит несет в себе ясную информацию о внесенных изменениях, что важно для эффективной работы и обслуживания проекта.\n\n```js\n// commitlint.config.js\nmodule.exports = {\n  extends: ['@commitlint/config-conventional'],\n  rules: {\n    'header-max-length': [2, 'always', Infinity],\n    'subject-max-length': [2, 'always', Infinity],\n  },\n};\n```\n\n### 3. Сборка многостраничного сайта\n\nВ этом проекте предусмотрена четкая структура расположения страниц. Согласно этой структуре, все страницы находятся в особой директории, названной src/pages. Каждая из этих директорий представляет собой отдельную страницу.\n\nВнутри каждой такой директории содержатся три обязательных файла:\n\n1. `index.html`: Этот файл предназначен для разметки страницы. Здесь размещаются все необходимые элементы, начиная от заголовков и текстовых блоков, и заканчивая изображениями и элементами управления.\n2. `script.js`: В этом файле размещается JavaScript-код, отвечающий за логику и взаимодействие элементов на странице. Здесь могут быть реализованы различные функции, обработчики событий и многое другое.\n3. `style.scss`: Файл предназначен для описания стилей страницы с использованием препроцессора Sass. Здесь определяются все визуальные аспекты страницы, включая цвета, шрифты, расположение элементов и многое другое.\n\nТакая структура обеспечивает четкое и организованное размещение всех компонентов каждой страницы проекта, что значительно облегчает работу с ними и поддержку проекта в целом.\n\n```\nsrc\n├── pages\n│   ├── page1\n│   │   ├── index.html\n│   │   ├── script.js\n│   │   └── style.scss\n│   ├── page2\n│   │   ├── index.html\n│   │   ├── script.js\n│   │   └── style.scss\n│   ├── page3\n│   │   ├── index.html\n│   │   ├── script.js\n│   │   └── style.scss\n│   └── ...\n└── ...\n```\n\n### 3. WebPack сборка\n\nВ данном проекте в качестве основного инструмента автоматизации сборки применяется WebPack. WebPack предоставляет мощные средства для эффективной организации сборки приложения, обеспечивая оптимальное сочетание всех его компонентов в единое работоспособное целое.\n\nНе ограничиваясь стандартными форматами js и css, WebPack умеет обрабатывать файлы с расширениями js, jsx, ts, tsx, css, scss, less. Он преобразует эти файлы в формат, который может быть легко интерпретирован и исполнен браузером, что обеспечивает плавную и эффективную работу приложения.\n\nКроме того, WebPack раскрывает свой потенциал и в области работы с мультимедийными ресурсами. Этот инструмент способен не только обрабатывать изображения, шрифты и мультимедийные файлы, но и преобразовывать их в оптимизированные элементы, пригодные для встроенного использования в приложении.\n\nБлагодаря WebPack в проекте реализован эффективный механизм сборки, что позволяет существенно повысить производительность и функциональность веб-приложения.\n\n```js\n// webpack.config.js\nmodule.exports = {\n  // * * * другие настройки webpack.config.js * * *\n  module: {\n    rules: [\n      {\n        test: /\\.(js|jsx)$/i,\n        exclude: /node_modules/,\n        use: {\n          loader: 'babel-loader',\n        },\n      },\n      {\n        test: /\\.(ts|tsx)$/i,\n        exclude: /node_modules/,\n        use: {\n          loader: 'ts-loader',\n        },\n      },\n      {\n        test: /\\.css$/i,\n        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],\n      },\n      {\n        test: /\\.(sass|scss)$/i,\n        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader', 'resolve-url-loader', 'postcss-loader'],\n      },\n      {\n        test: /\\.less$/i,\n        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader', 'resolve-url-loader', 'postcss-loader'],\n      },\n      {\n        test: /\\.(woff|woff2|eot|ttf|otf)$/i,\n        type: 'asset/resource',\n        generator: {\n          filename: 'fonts/[hash][ext][query]',\n        },\n      },\n      {\n        test: /\\.(png|svg|jpg|gif|webp)$/i,\n        use: [\n          {\n            loader: 'file-loader',\n            options: {\n              name: '[contenthash].[ext]',\n              outputPath: 'img/',\n            },\n          },\n        ],\n      },\n      {\n        test: /\\.(mp4|mp3)$/i,\n        use: [\n          {\n            loader: 'file-loader',\n            options: {\n              name: '[contenthash].[ext]',\n              outputPath: 'media/',\n            },\n          },\n        ],\n      },\n    ],\n  }\n};\n```\n\n### 4. Скрипты WebPack\n\n```bash\nnpm run build\n```\n\nЭтот скрипт используется для сборки проекта в режиме разработки. Он запускает Webpack, который занимается сборкой всех необходимых файлов. В результате работы этого скрипта, создается версия проекта, готовая к разработке.\n\n```bash\nnpm run production\n```\n\nЭтот скрипт предназначен для создания production-версии проекта. Запуская данный скрипт, Webpack производит сборку, оптимизированную для продакшн среды. Полученные файлы готовы к выкладыванию на сервер для публичного доступа.\n\n```bash\nnpm run serve\n```\n\nДанный скрипт используется для запуска веб-сервера в режиме разработки. Он автоматически обновляет страницу при внесении изменений в исходный код. Это обеспечивает комфортное и быстрое тестирование изменений в режиме реального времени.\n\n```bash\nnpm run msg-commit\n```\n\nЭтот скрипт запускает Commitlint для проверки сообщений коммитов на соответствие установленным правилам. Commitlint гарантирует, что сообщения коммитов содержат информацию о внесенных изменениях и имеют четкую структуру.\n\n```bash\nnpm run pre-commit\n```\n\nДанный скрипт запускает lint-staged перед каждым коммитом. Lint-staged применяет линтеры к измененным файлам, что позволяет удостовериться, что код соответствует установленным стандартам перед фиксацией изменений.\n\n```bash\nnpm run husky-inst\n```\n\nДанный скрипт предназначен для установки Husky, который позволяет автоматизировать запуск сценариев Git (hooks). В частности, он настраивает pre-commit и commit-msg хуки для запуска соответствующих проверок перед фиксацией изменений.\n\n```bash\nnpm run deploy\n```\n\nЭтот скрипт используется для развертывания проекта с использованием GitHub Pages. Он отправляет содержимое папки dist (которая представляет собой результат сборки) на удаленный репозиторий, что позволяет быстро публиковать проект в интернете.\n\n```json\n// package.json\n{\n  // * * * другие настройки package.json * * *\n  \"scripts\": {\n    \"build\": \"webpack --mode development\",\n    \"production\": \"webpack --mode production\",\n    \"serve\": \"webpack serve\",\n    \"msg-commit\": \"commitlint -E HUSKY_GIT_PARAMS\",\n    \"pre-commit\": \"lint-staged\",\n    \"husky-inst\": \"npx husky install \u0026\u0026 chmod +x .husky/pre-commit .husky/commit-msg\",\n    \"deploy\": \"gh-pages -d dist\"\n  }\n}\n```\n\n### 5. Husky, lint-staged и Commitlint\n\nКогда Husky, lint-staged и Commitlint используются вместе, это позволяет создать эффективную систему автоматической предкоммитной проверки и автокоррекции файлов перед фиксацией изменений. Например, при попытке сделать коммит, Husky может запустить lint-staged, который в свою очередь применит линтеры к измененным файлам. Затем Commitlint может проверить сообщение коммита на соответствие заданным стандартам.\n\nЭтот подход обеспечивает высокий уровень качества кода и структурированности истории изменений, что значительно улучшает процесс разработки и поддержки проекта.\n\n## Используемые технологии\n\n### 1. WebPack\n\n[WebPack](https://webpack.js.org/) – мощный инструмент для автоматизации сборки проекта. Он позволяет объединить все компоненты приложения в единое цельное целое, оптимизированное для развертывания и использования в продакшн среде. WebPack поддерживает различные типы файлов (js, jsx, ts, tsx, css, scss, less, изображения и другие), что делает его важным компонентом для организации современных веб-проектов.\n\n### 2. ESLint\n\n[ESLint](https://eslint.org/) – мощный линтер для JavaScript. Он помогает обнаруживать и исправлять ошибки, а также поддерживать соответствие кода установленным стандартам и стилям. Использование ESLint в проекте помогает создать код, который более читаем, консистентен и пригоден для совместной разработки.\n\n```json\n// .eslintrc.json\n{\n  \"parser\": \"@typescript-eslint/parser\",\n  \"parserOptions\": {\n    \"ecmaVersion\": 2021,\n    \"sourceType\": \"module\",\n    \"ecmaFeatures\": {\n      \"jsx\": true\n    }\n  },\n  \"extends\": [\"eslint:recommended\", \"plugin:react/recommended\", \"plugin:@typescript-eslint/recommended\"],\n  \"plugins\": [\"react\", \"@typescript-eslint\"],\n  \"env\": {\n    \"browser\": true,\n    \"node\": true\n  },\n  \"rules\": {\n    \"indent\": [\"error\", 2],\n    \"react/jsx-uses-react\": \"error\",\n    \"react/jsx-uses-vars\": \"error\",\n    \"@typescript-eslint/explicit-module-boundary-types\": \"off\",\n    \"@typescript-eslint/no-explicit-any\": \"off\",\n    \"@typescript-eslint/no-unused-vars\": \"off\",\n    \"@typescript-eslint/no-var-requires\": \"off\",\n    \"no-console\": \"off\"\n  },\n  \"settings\": {\n    \"react\": {\n      \"version\": \"detect\"\n    }\n  }\n}\n```\n\n### 3. Prettier\n\n[Prettier](https://prettier.io/) – это инструмент для автоматического форматирования кода. Он обеспечивает единообразие в оформлении, что способствует повышению читаемости и улучшает совместную работу над проектом. Вместе с ESLint, Prettier помогает создавать код, который соответствует высоким стандартам качества.\n\n```json\n// .prettierrc.json\n{\n  \"semi\": true,\n  \"trailingComma\": \"all\",\n  \"singleQuote\": true,\n  \"printWidth\": 120,\n  \"tabWidth\": 2\n}\n```\n\n### 4. Stylelint\n\n[Stylelint](https://stylelint.io/) – это линтер для CSS. Он помогает выявлять и устранять ошибки в стилях, а также поддерживать соответствие кода установленным стандартам. Использование Stylelint помогает создать стили, которые более читаемы, консистентны и пригодны для совместной разработки.\n\n```json\n// .stylelintrc.json\n{\n  \"extends\": \"stylelint-config-standard\",\n  \"plugins\": [\"stylelint-scss\", \"stylelint-less\"],\n  \"rules\": {\n    \"indentation\": 2,\n    \"color-no-invalid-hex\": true,\n    \"selector-pseudo-class-no-unknown\": [\n      true,\n      {\n        \"ignorePseudoClasses\": [\"global\"]\n      }\n    ],\n    \"at-rule-no-unknown\": [\n      true,\n      {\n        \"ignoreAtRules\": [\"include\", \"mixin\"]\n      }\n    ]\n  }\n}\n```\n\n### 5. HTMLHint\n\n[HTMLHint](https://htmlhint.com/) – линтер для HTML-кода. Он помогает выявлять и исправлять ошибки в разметке, а также поддерживать соответствие кода установленным стандартам. Использование HTMLHint способствует созданию валидной и качественной разметки, что важно для правильного функционирования веб-приложения.\n\n```json\n// htmlhint.json\n{\n  \"tagname-lowercase\": true,\n  \"attr-lowercase\": true,\n  \"attr-value-double-quotes\": true,\n  \"doctype-first\": false,\n  \"tag-pair\": true,\n  \"spec-char-escape\": true,\n  \"id-unique\": true,\n  \"src-not-empty\": true,\n  \"attr-no-duplication\": true,\n  \"alt-require\": true,\n  \"doctype-html5\": true,\n  \"id-class-value\": \"dash\",\n  \"style-disabled\": true,\n  \"space-tab-mixed-disabled\": \"space\",\n  \"id-class-ad-disabled\": true,\n  \"href-abs-or-rel\": false,\n  \"attr-unsafe-chars\": true,\n  \"head-script-disabled\": true,\n  \"img-alt-require\": true,\n  \"doctype-require\": true,\n  \"id-class-unadorned\": true,\n  \"spec-char-escape\": true,\n  \"tag-self-close\": true,\n  \"style-disabled\": true\n}\n```\n\n### 6. Babel\n\n[Babel](https://babeljs.io/) – это инструмент, который позволяет переводить современный JavaScript код в формат, совместимый со старыми браузерами. Он обеспечивает кросс-браузерность и поддержку новых возможностей языка в старых окружениях.\n\n```json\n// .babelrc\n{\n  \"presets\": [\n    \"@babel/preset-env\",\n    \"@babel/preset-react\"\n  ]\n}\n```\n\n### 7. Commitlint\n\n[Commitlint](https://commitlint.js.org/#/) – инструмент для проверки сообщений коммитов на соответствие установленным правилам и структуре. Это обеспечивает читаемость и информативность истории изменений в репозитории.\n\n```js\n// commitlint.config.js\nmodule.exports = {\n  extends: ['@commitlint/config-conventional'],\n  rules: {\n    'header-max-length': [2, 'always', Infinity],\n    'subject-max-length': [2, 'always', Infinity],\n  },\n};\n```\n\n### 8. Husky\n\n[Husky](https://typicode.github.io/husky/getting-started.html) – инструмент для автоматизации запуска сценариев Git (hooks). Это позволяет автоматизировать проверки и действия перед коммитами, что способствует поддержанию единого стиля кодирования и повышает качество кодовой базы.\n\n```bash\n# commit-msg\nnpx --no-install commitlint --edit $1\n```\n\n```bash\n# pre-commit\nnpx --no-install lint-staged\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnotacat1%2Flint-staged-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnotacat1%2Flint-staged-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnotacat1%2Flint-staged-template/lists"}