JS Beautify formatting through ESLint

This is an effort to provide an ESLint-integrated alternative to Prettier for HTML formatting.

• eslint-plugin-js-beautify-html
  • Table of contents
  • Installation
  • Configuration
    • .jsbeautifyrc file
    • .eslintrc.js file
    • ESLint's autofix
  • Rules

Run the following command:

npm install --save-dev eslint-plugin-js-beautify-html

The configuration is divided in two parts:

• JS-Beautify formatting rules: see .jsbeautifyrc file and .eslintrc.js file
• Enabling ESLint's autofix

Simply create a .jsbeautifyrc file in the root of your project

{
  "html": {
    "indent_with_tabs": false,
    "indent_size": 2,
    "max_preserve_newlines": 1,
    "preserve_newlines": true,
    "indent_inner_html": true,
    "wrap_attributes": "force-expand-multiline",
    "wrap_line_length": 120,
    "end_with_newline": true,
    "indent_scripts": "normal"
  }
}

And set this to your eslintrc.js

module.exports = {
  ...
  overrides: [
    {
      files: ['*.html'],
      plugins: ['js-beautify-html'],
      rules: {
        ...
        'js-beautify-html/format': ['error', { useJsBeautifyRc: true }],
      },
    },
  ]
}

This could also be done using only the .eslintrc.js file by setting this into your .eslintrc.js file:

module.exports = {
  ...
  overrides: [
    {
      files: ['*.html'],
      plugins: ['js-beautify-html'],
      rules: {
        ...
        'js-beautify-html/format': [
          'error',
          {
            'indent_with_tabs': false,
            'indent_size': 2,
            'max_preserve_newlines': 1,
            'preserve_newlines': true,
            'indent_inner_html': true,
            'wrap_attributes': 'force-expand-multiline',
            'wrap_line_length': 120,
            'end_with_newline': true,
            'indent_scripts': 'normal'
          },
        ],
      },
    },
  ]
}

Insert the following configurations into your VSCode's settings.json file:

{
  ...
  "eslint.options": {
    "extensions": [
        ".ts",
        ".html"
    ]
  },
  "eslint.validate": [
    "html",
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact"
  ],
  "[html]": {
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    }
  },
}

The only available rule is: js-beautify-html/format and it is only a placeholder rule in order for JS-Beautify to format the HTML code on source fix.

Please bear in mind, that while the code is not formatted, an error will be displayed in the first character of the file (also in the problems tab if you're using ESLint's VSCode extension), with the description: Code not formatted.