{"id":20825824,"url":"https://github.com/upstatement/prettier-config","last_synced_at":"2025-05-07T20:35:12.953Z","repository":{"id":52604362,"uuid":"138649287","full_name":"Upstatement/prettier-config","owner":"Upstatement","description":"Upstatement's Prettier Config","archived":false,"fork":false,"pushed_at":"2023-05-01T16:46:17.000Z","size":38,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":17,"default_branch":"main","last_synced_at":"2025-05-07T20:35:06.844Z","etag":null,"topics":["prettier","prettier-config"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@upstatement/prettier-config","language":"Shell","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/Upstatement.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":"2018-06-25T20:56:53.000Z","updated_at":"2023-05-09T11:09:47.000Z","dependencies_parsed_at":"2024-06-18T20:14:31.968Z","dependency_job_id":null,"html_url":"https://github.com/Upstatement/prettier-config","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Upstatement%2Fprettier-config","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Upstatement%2Fprettier-config/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Upstatement%2Fprettier-config/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Upstatement%2Fprettier-config/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Upstatement","download_url":"https://codeload.github.com/Upstatement/prettier-config/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252953829,"owners_count":21830892,"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":["prettier","prettier-config"],"created_at":"2024-11-17T23:06:53.707Z","updated_at":"2025-05-07T20:35:12.924Z","avatar_url":"https://github.com/Upstatement.png","language":"Shell","readme":"# Upstatement Prettier Config\n\n[![npm version](https://badge.fury.io/js/%40upstatement%2Fprettier-config.svg)](https://badge.fury.io/js/%40upstatement%2Fprettier-config)\n\nPairs well with our [ESLint config](https://www.npmjs.com/package/@upstatement/eslint-config).\n\n## Table of Contents\n\n- [Upstatement Prettier Config](#upstatement-prettier-config)\n  - [Table of Contents](#table-of-contents)\n  - [Installation](#installation)\n  - [Configurations](#configurations)\n    - [Default Config](#default-config)\n    - [Four Spaces Config](#four-spaces-config)\n  - [Editor Integration \u0026 Autoformatting](#editor-integration--autoformatting)\n    - [VS Code](#vs-code)\n    - [Sublime Text 3](#sublime-text-3)\n    - [Atom](#atom)\n  - [Pre-commit Hooks](#pre-commit-hooks)\n  - [Publishing to npm](#publishing-to-npm)\n  - [Enforced Rules](#enforced-rules)\n\n## Installation\n\n1. Make sure your project is using a Node version \u003e= `10`\n\n2. Install dependencies\n\n    ```sh\n    npm install --save-dev @upstatement/prettier-config prettier@2.x.x\n\n    # or\n\n    yarn add --dev @upstatement/prettier-config prettier@2.x.x\n    ```\n\n3. Create a `prettier.config.js` file at the root of your project with the following:\n\n    ```js\n    module.exports = require('@upstatement/prettier-config');\n    ```\n\n## Configurations\n\nWe export two ESLint configurations for your usage:\n\n1. [Default (2 space)](#default-config)\n2. [Four Spaces](#four-spaces-config)\n\n### Default Config\n\nIn your `prettier.config.js`:\n\n```js\nmodule.exports = require('@upstatement/prettier-config');\n```\n\n### Four Spaces Config\n\nIncludes everything in the default config, but replaces the `tabWidth` rule with 4 spaces instead of 2 spaces.\n\nIn your `prettier.config.js`:\n\n```js\nmodule.exports = require('@upstatement/prettier-config/four-spaces');\n```\n\n## [Editor Integration](https://prettier.io/docs/en/editors.html) \u0026 Autoformatting\n\n### VS Code\n\n1. Install the [Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode): `View → Extensions` then find and install `Prettier - Code formatter`\n2. Reload the editor\n3. Open your [settings JSON file](https://code.visualstudio.com/docs/getstarted/settings#_settings-file-locations) and add the following\n\n    ```json\n    // Format on save with Prettier rules\n    \"editor.formatOnSave\": true,\n    // Tell the ESLint plugin to run on save\n    \"editor.codeActionsOnSave\": {\n      \"source.fixAll.eslint\": true\n    },\n    // Turn off Prettier format on save, use ESLint to format instead\n    \"[javascript]\": {\n      \"editor.formatOnSave\": false\n    },\n    \"[vue]\": {\n      \"editor.formatOnSave\": false\n    },\n    \"eslint.alwaysShowStatus\": true,\n    // An array of language identifiers specify the files to be validated\n    \"eslint.options\": {\n      \"extensions\": [\".html\", \".js\", \".vue\", \".jsx\"]\n    },\n    ```\n\n### Sublime Text 3\n\n[https://packagecontrol.io/packages/JsPrettier](https://packagecontrol.io/packages/JsPrettier)\n\n### Atom\n\n[https://atom.io/packages/prettier-atom](https://atom.io/packages/prettier-atom)\n\n## Pre-commit Hooks\n\nAs another line of defense, if you want Prettier to automatically fix your errors on commit, you can use [lint-staged](https://github.com/okonet/lint-staged) with [husky](https://github.com/typicode/husky).\n\n1. Make sure your `npm` version is \u003e= 7.0.0\n\n   ```shell\n   npm install -g npm@latest\n   ```\n\n2. Make sure your repo has been initialized with git\n\n   ```shell\n   git init --initial-branch=main\n   ```\n\n3. Install the npm packages\n\n   ```shell\n   npm install --save-dev lint-staged husky\n   ```\n\n4. Set up the `package.json` stuff\n\n   ```shell\n   npm set-script prepare \"husky install\" \u0026\u0026 npm run prepare \\\n     \u0026\u0026 npm set-script lint-staged \"lint-staged\" \\\n     \u0026\u0026 npx husky add .husky/pre-commit \"npm run lint-staged\"\n   ```\n\n5. Then in your `package.json` add\n\n   ```json\n    \"lint-staged\": {\n      \"*.{js,css,json,md}\": [\n        \"prettier --write\",\n        \"git add\"\n      ]\n    }\n   ```\n\n   If you already have `lint-staged` running [ESLint](https://github.com/Upstatement/eslint-config#pre-commit-hook), just add the prettier step on top of it:\n\n   ```json\n   \"lint-staged\": {\n     \"*.{js,css,json,md}\": [\n       \"prettier --write\",\n       \"git add\"\n     ],\n     \"*.js\": [\n       \"eslint --fix\",\n       \"git add\"\n     ]\n   }\n   ```\n\n## Publishing to npm\n\nRead npm's docs on [How to Update a Package](https://docs.npmjs.com/getting-started/publishing-npm-packages#how-to-update-a-package).\n\n1. Checkout and pull the `main` branch\n\n2. Run the release script to bump the version numbers (the script will create a commit and push up the release branch to GitHub for you)\n\n    ```shell\n    ./scripts/release\n    ```\n\n    Use [semantic versioning](https://docs.npmjs.com/about-semantic-versioning/) to choose the appropriate version number.\n\n3. Submit and merge a PR from the release branch into `main`\n\n4. Make sure you're logged into npm from the command line using `npm whoami`. If you're not logged in, `npm login` with the credentials in 1pass\n\n5. `npm publish`\n\n## Enforced Rules\n\nCheck out all of Prettier's [configuration options](https://prettier.io/docs/en/options.html).\n\n\u003cdetails\u003e\n  \u003csummary\u003ePrint Width\u003c/summary\u003e\n\n  Line wrap at 100 characters.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eTab Width\u003c/summary\u003e\n\n  2 spaces per indentation-level (or 4 spaces if you choose).\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eTabs\u003c/summary\u003e\n\n  Indent lines with spaces, not tabs.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eSemicolons\u003c/summary\u003e\n\n  Always print semicolons at the ends of statements.\n\n  ```js\n  const greeting = 'hi';\n  ```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eQuote\u003c/summary\u003e\n\n  Use single quotes instead of double quotes.\n\n  ```js\n  const quote = 'single quotes are better';\n  ```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eTrailing Commas\u003c/summary\u003e\n\n  Use trailing commas wherever possible.\n\n  ```js\n  const obj = {\n    a: 'hi',\n    b: 'hey',\n  };\n  ```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eBracket Spacing\u003c/summary\u003e\n\n  Print spaces between brackets in object literals.\n\n  ```js\n  { foo: bar }\n  ```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eJSX Brackets\u003c/summary\u003e\n\n  Put the `\u003e` of a multi-line JSX element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).\n\n  ```jsx\n  \u003cbutton\n    className=\"prettier-class\"\n    id=\"prettier-id\"\n    onClick={this.handleClick}\u003e\n    Click Here\n  \u003c/button\u003e\n  ```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eArrow Function Parentheses\u003c/summary\u003e\n\n  Omit parens when possible.\n\n  ```js\n  x =\u003e x;\n  ```\n\n\u003c/details\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fupstatement%2Fprettier-config","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fupstatement%2Fprettier-config","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fupstatement%2Fprettier-config/lists"}