skip to Main Content

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.

2

Answers


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

    Login or Signup to reply.
  2. 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.

      "[json]": {
        "editor.defaultFormatter": "vscode.json-language-features"
      }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search