I hate Prettier because they have taken off my freedom to use my favourite brace style.
I use CSSComb, PHP CS Fixer and SCSS Allman Formatter. They support Allman style. VSCode comes with native JavaScript and TypeScript brace style settings:
{
"javascript.format.placeOpenBraceOnNewLineForControlBlocks": true,
"javascript.format.placeOpenBraceOnNewLineForFunctions": true,
"typescript.format.placeOpenBraceOnNewLineForControlBlocks": true,
"typescript.format.placeOpenBraceOnNewLineForFunctions": true,
}
The problem is that these settings are only for few languages. I want to format all database, data format, markup and programming languages, including JSON, except Python, with Allman style.
I have seen they have recommended ESLint to replace Prettier and the discontinued JS Beautifier.
I trained myself with ESLint documentation articles Getting started and Configuring ESLint.
-
I created
package.json
and I saved ESLint development dependencies on the project. Here isproject/package.json
:{ "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.format.enable": true, "eslint.alwaysShowStatus": true, "eslint.validate": [ "css", "javascript", "json", "jsonc", "markdown", "scss", "typescript" ], }
-
I created
.eslintrc
file in YAML format on project folder. Here isproject/.eslintrc.yml
:env: browser: true es2021: true node: true overrides: [] parserOptions: ecmaVersion: latest rules: brace-style: - error - allman
-
And I configured
project/.vscode/settings.json
:{ "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.format.enable": true, "eslint.alwaysShowStatus": true, "eslint.validate": [ "css", "javascript", "json", "jsonc", "markdown", "scss", "typescript" ], }
I also have run ESLint. I have open Command Palette and chose Format Document. But it didn’t give effect. It didn’t format.
I also have tested, creating eslintrc.json
and it almost worked, but it didn’t format JSON files with Allman styles.
I really miss Atom, that allowed me to use Allman style for almost all languages.
2
Answers
Unfortunately, eslint-plugin-json does not support auto fixing by now. Thankfully, another completely separate dependency eslint-plugin-json-format does.
Firstly, make sure you have
eslint
installed either global or local. Secondly, Ctrl+Shift+P > Open UI Settings, and search foreslint.probe
and addjson
if it’s not added. Then, issue either:npm install eslint-plugin-json-format --save-dev
yarn add -D eslint-plugin-json-format
Next, include this in your
.eslintrc.json
:Now craft a JSON with some comments or disalligned and run:
To see it in action.
Maybe you need to set json file default formatter, add this to your vscode settings.json, it will make vscode use your default editor formatter for json file, such as ESLint.