A Visual Studio Code Extension to format JavaScript and TypeScript code using the prettier-eslint package.
Please create an issue before adding a rating. Keep in mind that I work full-time. I'd LOVE to have more contributors. See the Contributing section below.
This extension requires the following NPM packages to be installed either locally or globally:
prettier@^3.1.0
eslint@^8.52.0
prettier-eslint@^16.1.2
@typescript-eslint/parser@^5.0.1
and typescript@^4.4.4
(Only for TypeScript projects)vue-eslint-parser@^8.0.0
(Only for Vue projects)Note: For earlier versions of Prettier and/or ESLint, see Support for Earlier Versions section
Download the extension if you haven't already.
Notes:
The Prettier extension is not required.
The ESLint extension is not required. However, it is needed to have lint errors show while editing your file.
First 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
yarn add -D prettier@^3.1.0 eslint@^8.52.0 prettier-eslint@^16.1.2
yarn 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
yarn add -D prettier@^3.1.0 eslint@^8.52.0 prettier-eslint@^16.1.2 vue-eslint-parser@^8.0.0
Next 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.
Open the command palette in VS Code by typing:
CMD + SHIFT + P
(Mac OS)CTRL + SHIFT + P
(Windows)In the command palette type Preferences: Open Workspace Settings (JSON)
.
In the .vscode/settings.json
file we just opened, copy and paste the following settings
{
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
"editor.formatOnType": false, // required
"editor.formatOnPaste": true, // optional
"editor.formatOnSave": true, // optional
"editor.formatOnSaveMode": "file", // required to format on save
"files.autoSave": "onFocusChange", // optional but recommended
"vs-code-prettier-eslint.prettierLast": false // set as "true" to run 'prettier' last not first
}
Restart VS Code
With 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 guide below.
The 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.
(From https://eslint.org/docs/user-guide/configuring)
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.*
file or aneslintConfig
field in apackage.json
file, both of which ESLint will look for and read automatically.
(From https://prettier.io/docs/en/configuration.html)
Prettier uses cosmiconfig for configuration file support. This means you can configure prettier via (in order of precedence):
- A
"prettier"
key in yourpackage.json
file.- A
.prettierrc
file, written in JSON or YAML, with optional extensions:.json/.yaml/.yml
(without extension takes precedence).- A
.prettierrc.js
orprettier.config.js
file that exports an object.- A
.prettierrc.toml
file, written in TOML (the.toml
extension is required).
These 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.
View
menu and click Output
Prettier ESLint
from the dropdown to the right.js
or .jsx
) or TypeScript (.ts
or .tsx
) fileCTRL + SHIFT + P
(Windows/Linux) or CMD + SHIFT + P
(macOS) to open the command paletteFormat Document With
and select Prettier ESLint
Output
to open the panelNotes:
Most issues are caused by using an unsupported ESLint version or an invalid ESLint configuration.
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 & extended configurations.
Running your files through the Prettier ESLint CLI first is a good way to determine if it's the extension, the prettier-eslint
package, or your configuration.
There are known performance issues with quad-core or slower processors. The slowness comes from the prettier-eslint
package the extension uses.
If 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.
Thanks goes to these wonderful people (emoji key):
Rebecca Vest 💬 💻 📖 🚇 🐛 🤔 👀 ⚠️ |
Thomas Bekaert 💻 |
Matt Brannon 📖 |
JounQin 💻 👀 |
Martín Rodríguez 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!