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.

1. 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"
    ],
   }
   

2. 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
   

3. 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.

CodePudding user response：

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.