{"id":14155321,"url":"https://github.com/idahogurl/vs-code-prettier-eslint","last_synced_at":"2025-05-16T19:07:42.581Z","repository":{"id":37554998,"uuid":"369251908","full_name":"idahogurl/vs-code-prettier-eslint","owner":"idahogurl","description":"A Visual Studio Code Extension to format JavaScript and TypeScript code using the prettier-eslint package.","archived":false,"fork":false,"pushed_at":"2025-04-05T08:14:56.000Z","size":2829,"stargazers_count":205,"open_issues_count":18,"forks_count":49,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-12T18:47:58.026Z","etag":null,"topics":["eslint","formatter","prettier","typescript","vs-code-extenstion","vscode-extension"],"latest_commit_sha":null,"homepage":"","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/idahogurl.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.YML","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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,"zenodo":null},"funding":{"github":"idahogurl"}},"created_at":"2021-05-20T15:17:47.000Z","updated_at":"2025-04-11T22:41:08.000Z","dependencies_parsed_at":"2023-02-08T14:31:09.581Z","dependency_job_id":"b3570e44-44f6-4a4a-a429-b4d3271ed6cb","html_url":"https://github.com/idahogurl/vs-code-prettier-eslint","commit_stats":{"total_commits":261,"total_committers":16,"mean_commits":16.3125,"dds":0.6781609195402298,"last_synced_commit":"41fe336b0234bb4aead4a9b90cbdd0042ad9d448"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idahogurl%2Fvs-code-prettier-eslint","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idahogurl%2Fvs-code-prettier-eslint/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idahogurl%2Fvs-code-prettier-eslint/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idahogurl%2Fvs-code-prettier-eslint/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/idahogurl","download_url":"https://codeload.github.com/idahogurl/vs-code-prettier-eslint/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254592395,"owners_count":22097013,"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","formatter","prettier","typescript","vs-code-extenstion","vscode-extension"],"created_at":"2024-08-17T08:02:49.581Z","updated_at":"2025-05-16T19:07:42.554Z","avatar_url":"https://github.com/idahogurl.png","language":"JavaScript","funding_links":["https://github.com/sponsors/idahogurl"],"categories":["JavaScript","vscode-extension"],"sub_categories":[],"readme":"\u003cimg src=\"https://github.com/idahogurl/vs-code-prettier-eslint/blob/master/icon.png?raw=true\" width=\"150\"\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\n# [VS Code Prettier ESLint](https://marketplace.visualstudio.com/items?itemName=rvest.vs-code-prettier-eslint)\n\n- [Prerequisites](https://github.com/idahogurl/vs-code-prettier-eslint#prerequisites)\n- [Installation](https://github.com/idahogurl/vs-code-prettier-eslint#installation)\n- [Configuration](https://github.com/idahogurl/vs-code-prettier-eslint#configuration)\n- [Example Projects](https://github.com/idahogurl/vs-code-prettier-eslint#example-projects)\n- [Troubleshooting](https://github.com/idahogurl/vs-code-prettier-eslint#troubleshooting)\n\nA Visual Studio Code Extension to format JavaScript and TypeScript code using the [prettier-eslint](https://github.com/prettier/prettier-eslint) package.\n\n**Please** [create an issue](https://github.com/idahogurl/vs-code-prettier-eslint/issues) before adding a rating. Keep in mind that I work full-time. I'd LOVE to have more contributors. See the **Contributing** section below.\n\n## Prerequisites\n\nThis extension requires the following NPM packages to be installed either locally or globally:\n\n- `prettier@^3.1.0`\n- `eslint@^8.52.0`\n- `prettier-eslint@^16.1.2`\n- `@typescript-eslint/parser@^5.0.1` and `typescript@^4.4.4` **(Only for TypeScript projects)**\n- `vue-eslint-parser@^8.0.0` **(Only for Vue projects)**\n\n**Note**: For earlier versions of Prettier and/or ESLint, see [Support for Earlier Versions](https://github.com/idahogurl/vs-code-prettier-eslint#support-for-earlier-versions) section\n\n## Installation\n\n[Download the extension](https://marketplace.visualstudio.com/items?itemName=rvest.vs-code-prettier-eslint) if you haven't already.\n\n**Notes**:\n\n- The [Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) is **not** required.\n\n- The [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) is **not** required. However, it is needed to have lint errors show while editing your file.\n\n### Install Dependencies\n\nFirst we need to install `prettier`, `eslint`, and `prettier-eslint` as dev dependencies in your project. Run one of the following commands based on your project requirements. The commands listed below use `yarn` but you can also use `npm`. Just replace `yarn add` with `npm i`\n\n#### Minimum Requirements\n\n```bash\nyarn add -D prettier@^3.1.0 eslint@^8.52.0 prettier-eslint@^16.1.2\n```\n\n#### TypeScript Projects\n\n```bash\nyarn add -D prettier@^3.1.0 eslint@^8.52.0 prettier-eslint@^16.1.2 @typescript-eslint/parser@^5.0.1 typescript@^4.4.4\n```\n\n#### Vue Projects\n\n```bash\nyarn add -D prettier@^3.1.0 eslint@^8.52.0 prettier-eslint@^16.1.2 vue-eslint-parser@^8.0.0\n```\n\n### Project Settings\n\nNext we need to configure your project to use the extension. To do that, we're going to open or create a `settings.json` file at the root of your project. If you already have a `.vscode/settings.json` file in your project, you can skip the first two steps below and jump straight to step 3.\n\n1. Open the command palette in VS Code by typing:\n\n   - `CMD + SHIFT + P` (Mac OS)\n   - `CTRL + SHIFT + P` (Windows)\n\n2. In the command palette type `Preferences: Open Workspace Settings (JSON)`.\n\n3. In the `.vscode/settings.json` file we just opened, copy and paste the following settings\n\n   ```jsonc\n   {\n     \"editor.defaultFormatter\": \"rvest.vs-code-prettier-eslint\",\n     \"editor.formatOnType\": false, // required\n     \"editor.formatOnPaste\": true, // optional\n     \"editor.formatOnSave\": true, // optional\n     \"editor.formatOnSaveMode\": \"file\", // required to format on save\n     \"files.autoSave\": \"onFocusChange\", // optional but recommended\n     \"vs-code-prettier-eslint.prettierLast\": false // set as \"true\" to run 'prettier' last not first\n   }\n   ```\n\n4. **Restart VS Code**\n\nWith settings listed above, your project should now be setup to automatically format your code when you save. If you run into any problems, check the [troubleshooting](https://github.com/idahogurl/vs-code-prettier-eslint/#troubleshooting) guide below.\n\n## Configuration\n\nThe extension uses your ESLint and Prettier configuration files. These files are resolved starting from the location of the file being formatted, and searching up the file tree until a config file is (or isn't) found.\n\n### ESLint Configuration File\n\n(From https://eslint.org/docs/user-guide/configuring)\n\n\u003e Use a JavaScript, JSON or YAML file to specify configuration information for an entire directory and all of its subdirectories. This can be in the form of an [`.eslintrc.*`](https://eslint.org/docs/user-guide/configuring#configuration-file-formats) file or an `eslintConfig` field in a [`package.json`](https://docs.npmjs.com/files/package.json) file, both of which ESLint will look for and read automatically.\n\n### Prettier Configuration File\n\n(From https://prettier.io/docs/en/configuration.html)\n\n\u003e Prettier uses [cosmiconfig](https://github.com/davidtheclark/cosmiconfig) for configuration file support. This means you can configure prettier via (in order of precedence):\n\u003e\n\u003e - A `\"prettier\"` key in your `package.json` file.\n\u003e - A `.prettierrc` file, written in JSON or YAML, with optional extensions: `.json/.yaml/.yml` (without extension takes precedence).\n\u003e - A `.prettierrc.js` or `prettier.config.js` file that exports an object.\n\u003e - A `.prettierrc.toml` file, written in TOML (the `.toml` extension is _required_).\n\n## Example Projects\n\nThese projects are setup to work with the VS Code Prettier ESLint extension. Use them to help troubleshoot or as a boilerplate for your project. If you don't see an example for your tech stack, create a PR of a working example.\n\n- [JavaScript](https://github.com/idahogurl/vs-code-prettier-eslint/tree/master/examples/javascript)\n- [JavaScript with Vue](https://github.com/idahogurl/vs-code-prettier-eslint/tree/master/examples/javascript-vue)\n- [TypeScript](https://github.com/idahogurl/vs-code-prettier-eslint/tree/master/examples/typescript)\n- [TypeScript with Vue](https://github.com/idahogurl/vs-code-prettier-eslint/tree/master/examples/typescript-vue)\n\n## Troubleshooting\n\n1. Check for an error by opening the `View` menu and click `Output`\n2. Select `Prettier ESLint` from the dropdown to the right\n\n\u003cimg width=\"500\" alt=\"troubleshooting\" src=\"https://user-images.githubusercontent.com/10620169/119163604-c9a5cd80-ba18-11eb-91af-fe4d2efe8567.png\"\u003e\n\n3. Open a JavaScript (`.js` or `.jsx`) or TypeScript (`.ts` or .`tsx`) file\n4. Press `CTRL + SHIFT + P` (Windows/Linux) or `CMD + SHIFT + P` (macOS) to open the command palette\n5. Start typing `Format Document With` and select `Prettier ESLint`\n6. Click on `Output` to open the panel\n7. If you see _Error: Cannot find module_, quit and restart Visual Studio Code\n8. If restarting did not work:\n   - If you saw _Error: Cannot find module '@typescript-eslint/parser'_, view the [TypeScript project](https://github.com/idahogurl/vs-code-prettier-eslint/tree/master/examples/typescript) for a working example.\n   - Make sure you have the required packages installed locally (global installations don't work sometimes)\n\n**Notes**:\n\n- Most issues are caused by using an unsupported ESLint version or an invalid ESLint configuration.\n  You can run `npx eslint --print-config .eslintrc.js` to check your ESLint configuration. This prints out the configuration being used after it applies plugins \u0026 extended configurations.\n- Running your files through the [Prettier ESLint CLI](https://github.com/prettier/prettier-eslint-cli) first is a good way to determine if it's the extension, the `prettier-eslint` package, or your configuration.\n\n- There are known performance issues with quad-core or slower processors. The slowness comes from the `prettier-eslint` package the extension uses.\n\n## Support for Earlier Versions\n\n- Prettier 1.9 \u0026 ESLint 6.8 - Version 3.10.0 ([DOWNLOAD](https://marketplace.visualstudio.com/_apis/public/gallery/publishers/rvest/vsextensions/vs-code-prettier-eslint/3.1.0/vspackage) | [README](https://github.com/idahogurl/vs-code-prettier-eslint/tree/3.x))\n- Prettier 2.0 \u0026 ESLint 7.0 - Version 4.10.0 ([DOWNLOAD](https://marketplace.visualstudio.com/_apis/public/gallery/publishers/rvest/vsextensions/vs-code-prettier-eslint/4.1.0/vspackage) |\n  [README](https://github.com/idahogurl/vs-code-prettier-eslint/tree/4.x))\n- Prettier 2.0 \u0026 ESLint 8.0 - Version 5.1.0 ([DOWNLOAD](https://marketplace.visualstudio.com/_apis/public/gallery/publishers/rvest/vsextensions/vs-code-prettier-eslint/5.1.0/vspackage) | [README](https://github.com/idahogurl/vs-code-prettier-eslint/blob/5.x/README.md))\n\n## Contributing\n\nIf you have suggestions for how this extension could be improved, or want to report a bug, open an issue! I'd love all and any contributions. If you are interested in contributing to the project, check out the [Contributing Guide](https://github.com/idahogurl/vs-code-prettier-eslint/blob/deploy/CONTRIBUTING.md).\n\n## Current Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/idahogurl\"\u003e\u003cimg src=\"https://secure.gravatar.com/avatar/787139c4c697cfc33cc422566a4ccf78?s=80\u0026d=identicon?s=100\" width=\"100px;\" alt=\"Rebecca Vest\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRebecca Vest\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#question-idahogurl\" title=\"Answering Questions\"\u003e💬\u003c/a\u003e \u003ca href=\"https://github.com/idahogurl/vs-code-prettier-eslint/commits?author=idahogurl\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/idahogurl/vs-code-prettier-eslint/commits?author=idahogurl\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#infra-idahogurl\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e \u003ca href=\"https://github.com/idahogurl/vs-code-prettier-eslint/issues?q=author%3Aidahogurl\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"#ideas-idahogurl\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/idahogurl/vs-code-prettier-eslint/pulls?q=is%3Apr+reviewed-by%3Aidahogurl\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e \u003ca href=\"https://github.com/idahogurl/vs-code-prettier-eslint/commits?author=idahogurl\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/tbekaert\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/11920484?v=4?s=100\" width=\"100px;\" alt=\"Thomas Bekaert\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eThomas Bekaert\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/idahogurl/vs-code-prettier-eslint/commits?author=tbekaert\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://mattbrannon.dev/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/36570183?v=4?s=100\" width=\"100px;\" alt=\"Matt Brannon\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMatt Brannon\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/idahogurl/vs-code-prettier-eslint/commits?author=mattbrannon\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://www.1stg.me/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/8336744?v=4?s=100\" width=\"100px;\" alt=\"JounQin\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJounQin\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/idahogurl/vs-code-prettier-eslint/commits?author=JounQin\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/idahogurl/vs-code-prettier-eslint/pulls?q=is%3Apr+reviewed-by%3AJounQin\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://netux.site/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/6181929?v=4?s=100\" width=\"100px;\" alt=\"Martín Rodríguez\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMartín Rodríguez\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/idahogurl/vs-code-prettier-eslint/commits?author=netux\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidahogurl%2Fvs-code-prettier-eslint","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fidahogurl%2Fvs-code-prettier-eslint","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidahogurl%2Fvs-code-prettier-eslint/lists"}