Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rohit-gohri/vscode-format-code-action
A simple vscode extension that allows you to run Prettier and ESLint in order
https://github.com/rohit-gohri/vscode-format-code-action
eslint formatter formatter-plugin hacktoberfest prettier vscode vscode-extension
Last synced: about 2 months ago
JSON representation
A simple vscode extension that allows you to run Prettier and ESLint in order
- Host: GitHub
- URL: https://github.com/rohit-gohri/vscode-format-code-action
- Owner: rohit-gohri
- License: mit
- Created: 2020-04-29T11:07:02.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-09-07T22:59:31.000Z (over 1 year ago)
- Last Synced: 2024-10-04T11:57:52.009Z (3 months ago)
- Topics: eslint, formatter, formatter-plugin, hacktoberfest, prettier, vscode, vscode-extension
- Language: TypeScript
- Homepage: https://rohit.page/blog/posts/how-to-get-prettier-eslint-play-nicely-with-vscode/?utm_source=github&utm_medium=repo&utm_campaign=hf
- Size: 44.9 KB
- Stars: 73
- Watchers: 2
- Forks: 3
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Format Code Action
[](https://marketplace.visualstudio.com/items?itemName=rohit-gohri.format-code-action) [](https://marketplace.visualstudio.com/items?itemName=rohit-gohri.format-code-action) [](https://marketplace.visualstudio.com/items?itemName=rohit-gohri.format-code-action)
Run eslint extension after the prettier extension in VS Code. Or the other way around, whatever way you want.
## Installation
> Requires VS Code 1.44+
Install through VS Code extensions: [Visual Studio Code Market Place: Format Code Action](https://marketplace.visualstudio.com/items?itemName=rohit-gohri.format-code-action)
Or install from within VS Code: Launch VS Code Quick Open (Ctrl+P or cmd+P), paste the following command, and press enter.
ext install rohit-gohri.format-code-action
Or on the command line:
code --install-extension rohit-gohri.format-code-action
## Usage
Disable `formatOnSave` and use the `source.formatDocument` codeAction in whatever order you want with VS Code settings:
```json
"editor.formatOnSave": false,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": [
"source.formatDocument",
"source.fixAll.eslint"
]
```
> NOTE: This was first released with `source.fixAll.format` as the codeAction, that still works for legacy purposes.
This runs 'Format Document' with the default formatter (in this case prettier).
Or for specific lanuage only:
```json
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.formatOnSave": false,
"editor.codeActionsOnSave": ["source.formatDocument", "source.fixAll.eslint"]
},
```
This would run prettier by default, but for javascript files would run prettier and then eslint. If you want to reverse the order then just reverse the array.
### Format Modified (EXPERIMENTAL)
Alternatively you may want to format only the modified part of the file, in that case use `source.formatModified`:
```json
"editor.formatOnSave": false,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": [
"source.formatModified",
"source.fixAll.eslint"
]
```
This is experimentally supported right now, if you face any problems please report them at:
## Motivation
I created this so I could use prettier and eslint together in the editor, in a specific order (eslint after prettier). Earlier prettier was setup to run on save and eslint as a codeAction with:
```json
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
```
This would often lead to prettier being run after eslint and eslint errors still being present.
Since the [March 2020 (v1.44)](https://code.visualstudio.com/updates/v1_44#_explicit-ordering-for-code-actions-on-save) update, VS Code allows setting `codeActionsOnSave` as an array. This allows setting the order of the codeActions.
The extension uses the [`CodeActionProvider`](https://code.visualstudio.com/api/references/vscode-api#CodeActionProvider) api to implement a simple code action that runs 'Format Document' on the current file. This allows us to disable `formatOnSave` and use it as a codeAction instead in a specific order with other extensions.
Read More on my blog: [How to get ESlint and Prettier to play nicely in VS Code?](https://rohit.page/blog/posts/how-to-get-prettier-eslint-play-nicely-with-vscode/?utm_source=github&utm_medium=repo&utm_campaign=hf)
## VS Code API
### `vscode` module
- [`languages.registerCodeActionsProvider`](https://code.visualstudio.com/api/references/vscode-api#languages.registerCodeActionsProvider)
## Credits
Based on [Microsoft's code-actions-sample](https://github.com/microsoft/vscode-extension-samples/tree/master/code-actions-sample)
### Icon
[formatting by Danil Polshin from the Noun Project](https://thenounproject.com/search/?q=format&i=627383).