{"id":28520306,"url":"https://github.com/Jayprecode/esprelint","last_synced_at":"2025-07-02T14:33:06.261Z","repository":{"id":42520985,"uuid":"452910072","full_name":"Jayprecode/esprelint","owner":"Jayprecode","description":"Eslint, prettier, lintstaged \u0026 husky configuration for new react projects to ensure good code practice and smooth development","archived":false,"fork":false,"pushed_at":"2022-08-01T18:39:50.000Z","size":91,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-09T07:06:53.869Z","etag":null,"topics":["eslint","eslint-config","nextjs","prettier","prettier-eslint","react"],"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/Jayprecode.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}},"created_at":"2022-01-28T02:10:56.000Z","updated_at":"2023-03-04T04:22:41.000Z","dependencies_parsed_at":"2022-09-01T12:01:09.801Z","dependency_job_id":null,"html_url":"https://github.com/Jayprecode/esprelint","commit_stats":null,"previous_names":["jayprecode/gcp4react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Jayprecode/esprelint","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jayprecode%2Fesprelint","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jayprecode%2Fesprelint/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jayprecode%2Fesprelint/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jayprecode%2Fesprelint/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Jayprecode","download_url":"https://codeload.github.com/Jayprecode/esprelint/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jayprecode%2Fesprelint/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263156721,"owners_count":23422485,"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":["eslint","eslint-config","nextjs","prettier","prettier-eslint","react"],"created_at":"2025-06-09T07:06:52.553Z","updated_at":"2025-07-02T14:33:06.236Z","avatar_url":"https://github.com/Jayprecode.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Documentation\n\nThis package template utilizes \n- [ESLint](https://github.com/BrindoSoft/Frontend-structure/edit/dev/README.md#eslint), \n- [Prettier](https://github.com/BrindoSoft/Frontend-structure/edit/dev/README.md#prettier), \n- [Husky](https://github.com/BrindoSoft/Frontend-structure/edit/dev/README.md#husky), \n- [Lint-staged](https://github.com/BrindoSoft/Frontend-structure/edit/dev/README.md#lint-staged) \n\n\n## To integrate into a new project\n\n1. Install this package as devDependency\n\n```sh\n# with Yarn\n$ yarn add -D @jayprecode/eslint-config @jayprecode/prettier-config @jayprecode/lintstaged-config husky\n\n# with npm\n$ npm i -D @jayprecode/eslint-config @jayprecode/prettier-config @jayprecode/lintstaged-config husky\n\n\n```\n\n2. Install peer dependencies of this package in your project as devDependencies\n\nTherefore, you can make use of the tool [install-peerdeps](https://github.com/nathanhleung/install-peerdeps):\n\n```sh\n# with Yarn\n$ install-peerdeps --dev @jayprecode/eslint-config @jayprecode/prettier-config @jayprecode/lintstaged-config\n\n# with npm\n$ install-peerdeps --dev @jayprecode/eslint-config @jayprecode/prettier-config @jayprecode/lintstaged-config\n\n\n```\n\n\n3. Use ESLint config in your project\n\nCreate a `.eslintrc.js` file in project root with the following content:\n\n```js\nmodule.exports = {\n  extends: [\"@jayprecode/eslint-config\"],\n};\n```\n\n4. Use Prettier config in your project\n\nCreate a `.prettierrc` file in project root with the following content:\n\n```\n\"@jayprecode/prettier-config\"\n```\n\n5. Use Lintstaged config in your project\n\nCreate a `.lintstagedrc` file in project root with the following content:\n\n```\n\"@jayprecode/lintstaged-config\"\n```\n\n6. Use Husky config in your project\n\nRun\n\n```sh\n$ npx husky-init\n```\nthen locate the `.husky/pre-commit` and paste the following\n\n```sh\n#!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\necho '🏗️👷 Styling, testing and building your project before committing'\n\n# Check Prettier standards\nyarn check-format ||\n(\n    echo '🤢🤮🤢🤮 Its FOKING RAW - Your styling looks disgusting. 🤢🤮🤢🤮\n            Prettier Check Failed. Run npm run format, add changes and try commit again.';\n    false;\n)\n\n# Check ESLint Standards\nyarn check-lint ||\n(\n        echo '😤🏀👋😤 Get that weak shit out of here! 😤🏀👋😤\n                ESLint Check Failed. Make the required changes listed above, add changes and try to commit again.'\n        false;\n)\n\n# If everything passes... Now we can commit\necho '🤔🤔🤔🤔... Alright.... Code looks good to me... Trying to build now. 🤔🤔🤔🤔'\n\nyarn build ||\n(\n    echo '❌👷🔨❌ Better call Bob... Because your build failed ❌👷🔨❌\n            Next build failed: View the errors above to see why.\n    '\n    false;\n)\n\n# If everything passes... Now we can commit\necho '✅✅✅✅ You win this time... I am committing this now. ✅✅✅✅'\n```\n\nthen your package.json file should look exactly like this below:\n\n```sh\n{\n  ...\n  \"scripts\": {\n    ...\n    \"check-format\": \"prettier --check .\",\n    \"check-lint\": \"eslint . --ext jsx --ext js\",\n    \"fix\": \"eslint --fix .\",\n    \"format\": \"prettier --write \\\"**/*.{js,jsx,json,md,yml,yaml}\\\"\",\n    \"check-packages\": \"yarn clean \u0026\u0026 yarn compile \u0026\u0026 yarn test \u0026\u0026 yarn lint\",\n    \"test-all\": \"yarn check-format \u0026\u0026 yarn check-lint \u0026\u0026 yarn check-types \u0026\u0026 yarn build\",\n    \"prepare\": \"husky install\"\n  },\n  ...\n}\n```\n\nBonus \n\n7. Configure vscode\n\nCreate a `vscode/settings.json` file in the project root with the following content:\n\n```\n{\n  \"editor.codeActionsOnSave\": {\n    \"source.fixAll\": true,\n    \"source.fixAll.eslint\": true\n  },\n  \"editor.formatOnSave\": true,\n  \"javascript.format.enable\": false,\n  \"[javascript]\": {\n    \"editor.formatOnSave\": false\n  },\n  \"[javascriptreact]\": {\n    \"editor.formatOnSave\": false\n  },\n  \"workbench.editor.enablePreview\": false,\n  \"workbench.colorCustomizations\": {\n    \"titleBar.activeBackground\": \"#0e851e\"\n  },\n  \"search.exclude\": {\n    \"**/.yarn\": true,\n    \"**/.pnp.*\": true\n  },\n  \"eslint.nodePath\": \".yarn/sdks\",\n  \"prettier.prettierPath\": \".yarn/sdks/prettier/index.js\"\n}\n```\n\n\n## Why?\n\nThe essence of the tools listed above implemented in this template, is applicable for the use of ensuring ```Good code practice (GCP)``` and also happen to be tools we find ourselves using over and over again in various projects. Sure, using the same handy plugins and configurations is good for consistency, but you have to copy and paste your dependencies from your package.json, .eslintrc.js, and .prettierrc over and over again and that's what the essence of this package is trying to prevent.\n\nWhen it comes to reducing the amount you have to copy with ESLint and Prettier configs, bundling them into an npm package saves a lot of time and effort for everyone.\n\n# Eslint\n\nESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code. In many ways, it is similar to JSLint and JSHint with a few exceptions:\n\n- ESLint uses Espree for JavaScript parsing.\n- ESLint uses an AST to evaluate patterns in code.\n- ESLint is completely pluggable, every single rule is a plugin and you can add more at runtime.\n\n### Find Problems\n\nESLint statically analyzes your code to quickly find problems. ESLint is built into most text editors and you can run ESLint as part of your continuous integration pipeline.\n\n### Fix Automatically\n\nMany problems ESLint finds can be automatically fixed. ESLint fixes are syntax-aware so you won't experience errors introduced by traditional find-and-replace algorithms.\n\n### Customize\n\nPreprocess code, use custom parsers, and write your own rules that work alongside ESLint's built-in rules. You can customize ESLint to work exactly the way you need it for your project.\n\nFor better understanding and configuration visit [Eslint](https://www.npmjs.com/package/eslint)\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n# Prettier\n\nPrettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.\n\nPrettier can be run in your editor on-save, in a pre-commit hook, or in CI environments to ensure your codebase has a consistent style without devs ever having to post a nit-picky comment on a code review ever again!\n\nFor better understanding and configuration visit [Prettier](https://www.npmjs.com/package/prettier)\n\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n# Husky\n\nHusky improves your commits and more 🐶 woof!\n\n### Install\n\n```bash\nnpm install husky --save-dev\n# or\nyarn add husky --save-dev\n```\n\n### Usage\n\nEdit ```package.json \u003e prepare``` script and run it once:\n\n```bash\nnpm set-script prepare \"husky install\"\nnpm run prepare\n# or\nyarn set-script prepare \"husky install\"\nyarn prepare\n```\n\nAdd a hook:\n\n```bash\nnpx husky add .husky/pre-commit \"npm test\"\ngit add .husky/pre-commit\n```\n\nMake a commit:\n\n```bash\ngit commit -m \"Keep calm and commit\"\n# `npm test` will run\n```\n\nFor better understanding and configuration, read through the documentation provided by [Husky](https://typicode.github.io/husky)\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n# Lint-staged\n\nRun linters against staged git files and don't let 💩 slip into your code base!\n\nLinting makes more sense when run before committing your code. By doing so you can ensure no errors go into the repository and enforce code style. But running a lint process on a whole project is slow, and linting results can be irrelevant. Ultimately you only want to lint files that will be committed.\n\n```bash\n$ git commit\n\n✔ Preparing lint-staged...\n❯ Running tasks for staged files...\n  ❯ packages/frontend/.lintstagedrc.json — 1 file\n    ↓ *.js — no files [SKIPPED]\n    ❯ *.{json,md} — 1 file\n      ⠹ prettier --write\n  ↓ packages/backend/.lintstagedrc.json — 2 files\n    ❯ *.js — 2 files\n      ⠼ eslint --fix\n    ↓ *.{json,md} — no files [SKIPPED]\n◼ Applying modifications from tasks...\n◼ Cleaning up temporary files...\n```\nFor better understanding and configuration visit [Lintstaged](https://www.npmjs.com/package/lint-staged)\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## Contributions\n\nYes please! Feature requests / pull requests are welcome.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJayprecode%2Fesprelint","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJayprecode%2Fesprelint","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJayprecode%2Fesprelint/lists"}