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 is project/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 is project/.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.
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 for eslint.probe
and add json
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
:
{
"plugins": [
"json-format"
]
}
Now craft a JSON with some comments or disalligned and run:
eslint --fix yourfile.json
To see it in action.