{"id":24169675,"url":"https://github.com/unit2795/spacey","last_synced_at":"2026-04-15T19:40:12.788Z","repository":{"id":269532065,"uuid":"907709963","full_name":"Unit2795/spacey","owner":"Unit2795","description":"A style guide \u0026 coding standard for React/TypeScript projects that emphasizes meticulous organization, performance optimization, best practices, explicit clarity, and generous use of whitespace; taking one giant leap for code clarity and readability.","archived":false,"fork":false,"pushed_at":"2025-02-06T08:41:44.000Z","size":1695,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-02T11:16:54.377Z","etag":null,"topics":["coding-standards","eslint","eslint-config","jsx","react","styleguide","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/spacey-install","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Unit2795.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2024-12-24T07:49:04.000Z","updated_at":"2025-02-07T23:42:56.000Z","dependencies_parsed_at":null,"dependency_job_id":"043ef4bd-3c91-46b8-b8ea-b50b20370bd2","html_url":"https://github.com/Unit2795/spacey","commit_stats":null,"previous_names":["unit2795/spacey"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Unit2795%2Fspacey","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Unit2795%2Fspacey/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Unit2795%2Fspacey/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Unit2795%2Fspacey/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Unit2795","download_url":"https://codeload.github.com/Unit2795/spacey/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241494182,"owners_count":19971871,"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":["coding-standards","eslint","eslint-config","jsx","react","styleguide","typescript"],"created_at":"2025-01-12T23:13:56.444Z","updated_at":"2026-04-15T19:40:12.734Z","avatar_url":"https://github.com/Unit2795.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ✨ Spacey 🛰️\n![black hole banner image with planets](docs/banner.png)\n\n\u003e A style guide \u0026 coding standard for React TypeScript projects powered by ESLint that emphasizes meticulous organization, performance optimization, best practices, explicit clarity, and generous use of whitespace, taking one giant leap for code clarity and readability. \n\n🚧**ALPHA - UNDER ACTIVE DEVELOPMENT**🏗️\n\n-----\n\n## Example\nWant to see more complex examples? Compare the [/original](example/original) and [/formatted](example/formatted) directories in the project root.\n\n**BEFORE**\n```typescript jsx\nfunction SampleSimple({test, hello, world}:{test:string, hello:number, world: boolean}){\n  const handleClick = () =\u003e {console.log(test, hello, world)};\n  return\u003cdiv\u003e\n    \u003cbutton type='button' onClick={handleClick} className={'myclass'}\u003eClick me\u003c/button\u003e\n    \u003cp\u003eHello,World!\u003c/p\u003e\n  \u003c/div\u003e\n}\n\nexport default SampleSimple;;\n```\n\n**AFTER**\n```typescript jsx\nfunction SampleSimple( {\n  test,\n  hello,\n  world\n}: {\n  test: string,\n  hello: number,\n  world: boolean\n} ) {\n  const handleClick = () =\u003e {\n    console.log(\n      test,\n      hello,\n      world\n    );\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton\n        className=\"myclass\"\n        type=\"button\"\n        onClick={ handleClick }\n      \u003e\n        Click me\n      \u003c/button\u003e\n\n      \u003cp\u003e\n        Hello,World!\n      \u003c/p\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default SampleSimple;\n\n```\n\n## Introduction\nSpacey uses [ESLint](https://eslint.org/) and a collection of handy plugins to help you write clean, maintainable, and performant React \u0026 TypeScript code. The majority of the rules can apply automated fixes. It's a great idea to run them on save.\n\n## Guiding Principles\n1. **Readable Code**:\n    1. Each section is clearly defined, predictably laid out, and visually separate, making it easier to follow even for someone unfamiliar with the project. \n   2. Modern JavaScript features, such as template literals and arrow functions, are preferred to keep the codebase concise where possible, without sacrificing explicitness. \n   3. Cyclomatic complexity and deep nesting limits reduce overly complex logic, encouraging cleaner and more testable code.\n2. **Debuggable and Maintainable**: \n   1. Explicit patterns reduce ambiguities and potential runtime bugs. \n   2. Generous whitespace and structured formatting make debugging easier by isolating logic and visualizing code flow.\n3. **Performant and Predictable**: \n   1. Avoid some easier to catch React \u0026 JS footguns and implicit expectations that can lead to performance bottlenecks or unexpected behavior. Even at the cost of a little extra verbosity.\n\n## CLI\n[Spacey Install CLI](./cli/README.md) helps you set up the Spacey style guide's ESLint config in your project by optionally installing the dev dependencies and/or creating the ESLint configuration file (or a sample config file you can pick and choose from or use as inspiration).\n\nTry it out by running the following in your terminal:\n```shell\nnpx spacey-install\n```\n\n### Why a CLI?\nSpacey is meant to be something you take and run with, extending and modifying it as you see fit. So you are given full control over the dependencies and the shared config file\n\n### Manual Installation\nIf you prefer to install the dependencies and create the config file manually, follow these steps:\n1. Install the dependencies:\n    ```shell\n    npm install -D eslint @eslint/js @stylistic/eslint-plugin eslint-plugin-import-newlines eslint-plugin-newline-destructuring eslint-plugin-no-relative-import-paths eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh globals typescript-eslint\n    ```\n2. Copy your desired ESLint rules from the shared config file in this repo [eslint-config-spacey.js](./eslint-config-spacey.js) to your project's ESLint config file.\n\n\n\n\n## Developer Guide\nWant to try messing around with the code?\n### Getting Started\n1. Clone the repo\n2. Run `pnpm install` in `/example` directory\n3. Place some unformatted code in the `/original` directory\n4. Run `pnpm format` to output the formatted code fixed by eslint to the `/formatted` directory\n\n### Project Structure\n- The example code in the `/original` directory contains the unmodified code that has not had `eslint --fix` applied yet. The fixed code will be copied to the `/formatted` directory after running `eslint --fix`.\n- The eslint configuration file `eslint.config.js` in the root directory contains all of the rules and settings for the project.\n\n## Inspiration\n- [Airbnb Style Guide](https://airbnb.io/javascript/react/)\n- [Prettier](https://prettier.io/)\n- [Google TypeScript Style Guide](https://google.github.io/styleguide/tsguide.html)\n- [Vite React TypeScript ESLint Setup](https://vite.dev/)\n\n## Troubleshooting\n- If any of the plugins/dependencies that Spacey relies on receive an update that produces breaking changes you will need to do one of the following:\n  - Submit an issue to the Spacey repo requesting an update\n  - Update the broken eslint rule\n  - Revert to a previous dependency versio\n  \n\n## TODO\n- Continue to review rules and ensure they conform the general principles of the style guide\n- Add a visual diffing tool to compare the original code with the formatted code\n\n## Contributing\nFeel free to open an issue or pull request if you have any suggestions, questions, debates, discussions, or improvements\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funit2795%2Fspacey","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funit2795%2Fspacey","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funit2795%2Fspacey/lists"}