Does the html/indent option report anything?

trusktr commented 5 years ago

Description

Setup configuration

ESLint version: 5.2.0
eslint-plugin-html version: 4.0.5
NodeJS version: 10.9.0
Operating System name and version: macOS Mojave
ESLint configuration (.eslintrc):

module.exports = {
    root: true,
    extends: ['prettier'],
    parser: 'babel-eslint',
    parserOptions: {
        sourceType: 'module',
    },

    env: {
        browser: true,
        node: true,
        es6: true,
    },
    plugins: [
        'json',
        'promise', // https://github.com/xjamundx/eslint-plugin-promise
        'html',
    ],
    // add your custom rules here
    rules: {
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV.startsWith('dev') ? 0 : 2,

        'prefer-const': 'error',
        'one-var': ['error', 'never'],
        'no-var': 'error',
        'no-return-assign': ['error', 'except-parens'],
        'brace-style': ['error', '1tbs', { allowSingleLine: false }],
        'quote-props': ['error', 'as-needed'],
        curly: ['error', 'multi-or-nest', 'consistent'],

        'padding-line-between-statements': [
            'error',

            {
                blankLine: 'always',
                prev: '*',
                next: ['block', 'const', 'let', 'var', 'import', 'export'],
            },
            {
                blankLine: 'always',
                next: '*',
                prev: ['block', 'const', 'let', 'var', 'import', 'export'],
            },

            { blankLine: 'never', prev: 'const', next: 'const' },
            { blankLine: 'never', prev: 'let', next: 'let' },
            { blankLine: 'never', prev: 'var', next: 'var' },
            { blankLine: 'never', prev: 'import', next: 'import' },
            { blankLine: 'never', prev: 'export', next: 'export' },

            {
                blankLine: 'always',
                prev: '*',
                next: [
                    'multiline-block-like',
                    'multiline-expression',
                    'class',
                    'function',
                ],
            },
            {
                blankLine: 'always',
                next: '*',
                prev: [
                    'multiline-block-like',
                    'multiline-expression',
                    'class',
                    'function',
                ],
            },
        ],

        // from https://github.com/xjamundx/eslint-plugin-promise
        'promise/always-return': 'error',
        'promise/no-return-wrap': 'error',
        'promise/param-names': 'error',
        'promise/catch-or-return': 'error',
        'promise/no-new-statics': 'error',
        'promise/no-return-in-finally': 'error',

        // from https://www.npmjs.com/package/eslint-plugin-html
        'html/html-extensions': ['.html'],
        'html/indent': 'tab',
        'html/report-bad-indent': 'error',
    },

    overrides: [
        {
            files: ['*.ts', '*.tsx'],
            parser: 'typescript-eslint-parser',
            parserOptions: {
                ecmaFeatures: {
                    jsx: true,
                },
            },
        },
    ],
}

Editor name and version: same result as following output
Plugin name and version: linter-eslint (Atom)

Aditional context

output:

❯ ./node_modules/.bin/eslint -c ./.eslintrc.js "./**/BrowserEntry.html"

/Users/trusktr/project/BrowserEntry.html
  29:1  error  Definition for rule 'html/report-bad-indent' was not found  html/report-bad-indent
  30:5  error  Expected blank line before this statement                   padding-line-between-statements
  30:5  error  Split 'const' declarations into multiple statements         one-var

BrowserEntry.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset='utf-8' />
        <title>Project</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <style>
            html,body,#root {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
                border: 0;
            }

            * {
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <div id="root">
        </div>

        <script>
if (true) console.log('hello')
          const
                  $ = require("jquery"),
                  _ = require("lodash")

          require("./").start()
        </script>
    </body>
</html>

No matter what I try (f.e. that ugly code format in the script tag, and the options 0, +2, or tab), I don't see any output regarding the indent option. Should I see something?

Also notice the message Definition for rule 'html/report-bad-indent' was not found html/report-bad-indent. Is that related?

trusktr commented 5 years ago

Doesn't seem to make a difference what indent I use, I still get the same message. For example, the same message for the following two samples (and same for the above sample):

        <script>
        if (true) console.log('hello')

        const
            $ = require("jquery"),
            _ = require("lodash")

        require("./").start()
        </script>

        <script>
            if (true) console.log('hello')

            const
                $ = require("jquery"),
                _ = require("lodash")

            require("./").start()
        </script>

trusktr commented 5 years ago

Regardless of the issues with those rules, just enabling the html plugin enables all my other linting rules in the script tags, so I'm enjoying that! :)

BenoitZugmeyer commented 5 years ago

Thanks for the detailed report. Even if html/report-bad-indent looks like a rule name, this plugin does not define any rules: you should move your 'html/...' entries in "settings", like so:

{
    "plugins": [ "html" ],
    "rules": { ... },
    "settings": {
        "html/indent": "0",
        "html/report-bad-indent": "error"
    }
}

trusktr commented 5 years ago

Oooooh. What's the difference? Why are they in "settings"?

BenoitZugmeyer / eslint-plugin-html