![\"Version\"](\"https://img.shields.io/visual-studio-marketplace/v/rohit-gohri.format-code-action\")
![\"Ratings\"](\"https://img.shields.io/visual-studio-marketplace/r/rohit-gohri.format-code-action\")
Do you have your project setup with both Prettier and Eslint? Do you want them to run in a specific order instead of using ESLint to run prettier? Here's how to set your own order in VS Code with this extension:
\n
This extension will register a new \"codeAction\" which will run 'Format Document' using the default formatter (prettier in our case) in VS Code.
\nsource.formatDocument\nUsing this and the editor.codeActionsOnSave setting in VS Code you can specify the order in which to run the eslint codeAction, source.fixAll.eslint, and format document.
Requires: VS Code 1.44+
\nInstall through VS Code extensions:
\nVisual Studio Code Market Place: Format Code Action
\nCan also be installed in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
\next install rohit-gohri.format-code-action\nYou will need both the prettier-vscode and vscode-eslint extensions installed for this config to work.\nDisbale formatOnSave and use the source.formatDocument codeAction in whatever order you want with VS Code settings:
\"editor.formatOnSave\": false,\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\",\n \"editor.codeActionsOnSave\": [\n \"source.formatDocument\",\n \"source.fixAll.eslint\"\n ]\nThis runs 'Format Document' with the default formatter (in this case prettier) and then eslint --fix for all document types.
\"editor.formatOnSave\": true,\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\",\n \"[javascript]\": {\n \"editor.formatOnSave\": false,\n \"editor.codeActionsOnSave\": [\n \"source.formatDocument\",\n \"source.fixAll.eslint\"\n ]\n },\nThis 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.
\nI wanted to use prettier and eslint together, to override some of prettier's mpre opinionated style rules with a eslint config (particularly brace-style).
\nInstead of using workarounds like prettier-eslint which don't work for all eslint configurations as it hasn't been updated to work with eslint v6 properly. We can simply run prettier and eslint one by one like one would do on the command line. Here is how that looks like in my package.json:
\"scripts\": {\n \"format\": \"npm run prettier:fix && npm run lint:fix\",\n \"lint\": \"eslint src --ext=js\",\n \"lint:fix\": \"npm run lint -- --fix\",\n \"prettier\": \"prettier -c\",\n \"prettier:fix\": \"npm run prettier -- --write\"\n }\nThe npm run format command allows me to fix some of the prettier formatting with eslint by running them both in an order. I wanted to replicate this same behavior with my editor's \"Format on Save\" functionality.
VS Code only allows setting one default formatter. So I could either run Prettier or run ESLint on save. That was until it introduced \"codeActionsOnSave\". This separated formatters and \"Source\" fixers like vscode-eslint. This is how one would enable both prettier and eslint in VS Code:
\"editor.formatOnSave\": true,\n\"editor.defaultFormatter\": \"esbenp.prettier-vscode\",\n\"editor.codeActionsOnSave\": {\n \"source.fixAll.eslint\": true\n}\nBut this would often lead to prettier being run after eslint, and eslint errors still being present as this defined no order for formatters and coder actions.
\nSince the March 2020 (v1.44) update, VS Code allows setting codeActionsOnSave as an array. This allows setting the order of the code actions.
This extension uses the 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.