{"id":15793516,"url":"https://github.com/schuchard/prettier-schematic","last_synced_at":"2025-04-07T05:13:28.903Z","repository":{"id":39557781,"uuid":"137550950","full_name":"schuchard/prettier-schematic","owner":"schuchard","description":"Add Prettier to an Angular project","archived":false,"fork":false,"pushed_at":"2023-01-07T04:03:39.000Z","size":6916,"stargazers_count":141,"open_issues_count":29,"forks_count":9,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-04-25T09:43:12.657Z","etag":null,"topics":["angular","prettier","schematics"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/schuchard.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}},"created_at":"2018-06-16T03:48:55.000Z","updated_at":"2024-03-19T10:18:47.000Z","dependencies_parsed_at":"2023-02-06T11:15:39.105Z","dependency_job_id":null,"html_url":"https://github.com/schuchard/prettier-schematic","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schuchard%2Fprettier-schematic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schuchard%2Fprettier-schematic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schuchard%2Fprettier-schematic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schuchard%2Fprettier-schematic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/schuchard","download_url":"https://codeload.github.com/schuchard/prettier-schematic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247595335,"owners_count":20963943,"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":["angular","prettier","schematics"],"created_at":"2024-10-04T23:11:32.132Z","updated_at":"2025-04-07T05:13:28.874Z","avatar_url":"https://github.com/schuchard.png","language":"HTML","readme":"# Angular Prettier schematic\n\nA Schematic that adds prettier and a pre-commit hook for formatting staged files.\n\n[![CircleCI](https://circleci.com/gh/schuchard/prettier-schematic.svg?style=svg)](https://circleci.com/gh/schuchard/prettier-schematic)\n[![npm](https://img.shields.io/npm/v/@schuchard/prettier.svg)](https://www.npmjs.com/package/@schuchard/prettier)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n\n## Usage 🚀\n\nRun in an Angular CLI project\n\n```bash\nng add @schuchard/prettier\n```\n\nThen you're done. Continue your normal workflow of `git add, commit, push` or a similar workflow with your IDE/editor.\n\nYou can optionally install globally:\n\n```shell\nnpm install -g @schuchard/prettier\n```\n\nthen in an Angular CLI project:\n\n```shell\nng g @schuchard/prettier:add\n```\n\n## How does Prettier work with Angular\n\n### Automatically against staged files\n\nBy default [lint-staged](https://github.com/okonet/lint-staged) is [configured](https://prettier.io/docs/en/precommit.html#option-1-lint-staged-https-githubcom-okonet-lint-staged) along with a pre-commit hook. This will run Prettier against all new files as they are committed according to the settings defined in `prettier.config.json`. Generally speaking, your workflow should remain unchanged - `git add, commit, push`\n\n![lint-staged-example](docs/prettier-vsc-term-600.gif)\n\n#### Disabling lint-staged install\n\nlint-stage and the precommit hook can be disabled with the following\n\n```shell\nng g @schuchard/prettier:add --lintStaged=false\n```\n\n### Manually\n\nWhile lint-staged only runs prettier against staged files, you can manually run Prettier against **ALL** [targeted](#Angular-formatting) files with the script added to the `package.json`\n\n`npm run prettier`\n\n## Angular formatting\n\nBeginning with [1.15](https://prettier.io/blog/2018/11/07/1.15.0.html#html-vue-angular), Prettier supports formatting HTML and Angular files.\n\n### Format all Angular Files - `{js,json,css,md,ts,html,component.html}`\n\n![format-angular-files](docs/prettier-ng-sm.png)\n\n### Format only Typescript files\n\nPrevious versions of this schematic only formatted Typescript files. That functionality is still available and is configured in the CLI prompts or via the `--formatAllAngularFiles=false` if desired. The default is `true`.\n\n![format-typescript-files](docs/prettier-ts-sm.png)\n\n## Default Prettier options\n\n### Angular 7\n\nThis schematic takes advantage of CLI [prompts](https://github.com/angular/angular-cli/blob/fb4e8187824fe66e50b42c16f95458e82b4787a8/docs/specifications/schematic-prompts.md) for configuring Prettier options. If you're unsure of a setting, press enter to select the default. You can skip a prompt by passing any of the options when call the schematic.\n\n`ng g @schuchard/prettier:add --printWidth=100`\n\n![schematic-cli](docs/prettier-cli-sm.png)\n\n### \u003c Angular 7\n\nWithout any CLI arguments the [default](https://prettier.io/docs/en/options.html) Prettier options will be applied. The defaults can be changed in one of two ways:\n\n- modifying the `./prettier.config.js` after the schematic runs\n- passing a flag to the schematic with the desired value for any of the options. For example:\n  - `ng g @schuchard/prettier:add --printWidth=100 --tabWidth=4`\n\n### Example default `prettier.config.js`\n\n```json\nprintWidth = 80;\ntabWidth = 2;\nuseTabs = false;\nsemi = true;\nsingleQuote = false;\ntrailingComma = \"none\";\nbracketSpacing = true;\njsxBracketSameLine = false;\narrowParens = \"avoid\";\nrangeStart = 0;\nrangeEnd = Infinity;\nrequirePragma = false;\ninsertPragma = false;\nproseWrap = \"preserve\";\nlintStaged = true;\n```\n\n## Contributing\n\n### Getting started\n\nInstall dependencies:\n\n```shell\nyarn \u0026\u0026 cd sandbox \u0026\u0026 yarn\n```\n\nTest changes to the schematic\n\n```shell\nyarn dev\n```\n\nTest changes to the schematic AND run E2E tests in the sandbox\n\n```shell\nyarn test\n```\n\nReset the sandbox state after running the schematic locally\n\n```shell\nyarn clean\n```\n\n## Updating the Sandbox\n\n1. remove the `/sandbox` directory\n2. `npm i -g @angular/cli`\n3. `ng new sandbox`\n4. update the `package.json`\n\n```\n\"build\": \"ng build --prod --progress=false\",\n\"test\": \"ng test --watch=false\",\n```\n\n## Documentation\n\nUnsure how to do something with schematics? Check the Angular [schematics](https://github.com/angular/angular-cli/tree/master/packages/schematics/angular) for inspiration.\n\nInspiration came from this excellent article by [Aaron Frost](https://medium.com/ngconf/ultimate-prettier-angular-cheatsheet-777c9515f4fb)\n\n## Publishing\n\n- First, ensure you're authenticated with `npm login`.\n\n```shell\nnpm run release\n```\n\n## Issues \u0026 Requests 📬\n\nSubmit an [issue](https://github.com/schuchard/prettier-schematic/issues/new/choose)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fschuchard%2Fprettier-schematic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fschuchard%2Fprettier-schematic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fschuchard%2Fprettier-schematic/lists"}