html-indent causes eslint to fail when fixing only layout issues

[fvhockney]

I am editing this because I have installed a project with @vue/cli: 3.5.5 and am still getting issues. Since we are integrating vue into a legacy code base, we cannot just run npx eslint --fix file.vue. This command runs and fixes all issues, but npx eslint --fix --fix-type layout file.vue should also work. Especially since the vue/html-indent plugin is specifically marked at layout and fixable

Tell us about your environment

• **ESLint version:5.16.0
• **eslint-plugin-vue version:5.2.2
• **Node version:11.9.0

Please show your full configuration:

{
  "name": "eslint-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.6"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.5.0",
    "@vue/cli-plugin-eslint": "^3.5.0",
    "@vue/cli-service": "^3.5.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.5.21"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {
        "quotes": [ 2, "single" ],
         "vue/component-name-in-template-casing": [
         1,
         "PascalCase",
         {
            "registeredComponentsOnly": true
         }
      ],
      "vue/html-indent": [
         1,
         "tab",
         {
            "attribute": 1,
            "baseIndent": 1,
            "closeBracket": 1,
            "alignAttributesVertically": true
         }
      ]
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

What did you do?

<template>
    <div id="app">
        <img :alt="Vue logo" src="./assets/logo.png">
        <HelloWorld msg="Welcome to Your Vue.js App"/>
    </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: { HelloWorld, },
    data () {
        return { allum:3,row:'hi',jelly:8 }
    }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

What did you expect to happen?
npx eslint --fix --fix-type layout src/App.vue shoud run and fix only items marked at layout

What actually happened?
Eslint fails to run due to meta of undefined. I have tracked the issue down to the vue/html-indent rule being present. Removing it allows the linter to run and fix issues. npx eslint --fix src/App.vue works, but fixes all issues and is not suitable for legacy code bases. vue/html-indent is marked as fixable and layout, so it should work.

./node_modules/eslint/bin/eslint.js --debug --fix --fix-type layout src/App.vue
  eslint:cli CLI args: [ '--debug', '--fix', '--fix-type', 'layout', 'src/App.vue' ] +0ms
  eslint:cli Running on files +4ms
  eslint:cli-engine Using fix types layout +0ms
  eslint:glob-utils Creating list of files to process. +0ms
  eslint:ignored-paths baseDir = "/home/fvhockney/laut/eslint-test" +0ms
  eslint:ignored-paths addPatternRelativeToCwd:
  eslint:ignored-paths   original = "/node_modules/*"
  eslint:ignored-paths   cooked   = "/node_modules/*" +1ms
  eslint:ignored-paths addPatternRelativeToCwd:
  eslint:ignored-paths   original = "/bower_components/*"
  eslint:ignored-paths   cooked   = "/bower_components/*" +0ms
  eslint:ignored-paths addPatternRelativeToCwd:
  eslint:ignored-paths   original = ".*"
  eslint:ignored-paths   cooked   = ".*" +0ms
  eslint:ignored-paths addPatternRelativeToCwd:
  eslint:ignored-paths   original = "!../"
  eslint:ignored-paths   cooked   = "!../" +0ms
  eslint:ignored-paths Looking for ignore file in /home/fvhockney/laut/eslint-test +0ms
  eslint:ignored-paths Could not find ignore file in cwd +0ms
  eslint:ignored-paths contains: +1ms
  eslint:ignored-paths   target = "/home/fvhockney/laut/eslint-test/src/App.vue" +0ms
  eslint:ignored-paths   result = false +0ms
  eslint:ignored-paths contains: +0ms
  eslint:ignored-paths   target = "/home/fvhockney/laut/eslint-test/src/App.vue" +0ms
  eslint:ignored-paths   result = false +0ms
  eslint:cli-engine Processing /home/fvhockney/laut/eslint-test/src/App.vue +5ms
  eslint:cli-engine Linting /home/fvhockney/laut/eslint-test/src/App.vue +0ms
  eslint:config Constructing config file hierarchy for /home/fvhockney/laut/eslint-test/src +0ms
  eslint:config Using .eslintrc and package.json files +0ms
  eslint:config Loading /home/fvhockney/laut/eslint-test/package.json +1ms
  eslint:config-file Loading package.json config file: /home/fvhockney/laut/eslint-test/package.json +0ms
  eslint:config-file Loading JSON config file: /home/fvhockney/laut/eslint-test/package.json +0ms
  eslint:config-file Loading /home/fvhockney/laut/eslint-test/node_modules/eslint/conf/eslint-recommended.js +8ms
  eslint:config-file Loading JS config file: /home/fvhockney/laut/eslint-test/node_modules/eslint/conf/eslint-recommended.js +1ms
  eslint:config-file Loading plugin:vue/essential +11ms
  eslint:config-file Attempting to resolve eslint-plugin-vue +0ms
  eslint:config-file Loading JS config file: /home/fvhockney/laut/eslint-test/node_modules/eslint-plugin-vue/lib/index.js +1ms
  eslint:config-file Loading /home/fvhockney/laut/eslint-test/node_modules/eslint-plugin-vue/lib/configs/base.js +45ms
  eslint:config-file Loading JS config file: /home/fvhockney/laut/eslint-test/node_modules/eslint-plugin-vue/lib/configs/base.js +0ms
  eslint:plugins Loaded plugin vue (eslint-plugin-vue@5.2.2) (from /home/fvhockney/laut/eslint-test/node_modules/eslint-plugin-vue/lib/index.js) +0ms
  eslint:config Using /home/fvhockney/laut/eslint-test/package.json +68ms
  eslint:config-ops Using config from partial cache +0ms
  eslint:config-ops Apply environment settings to config +0ms
  eslint:config-ops Creating config for environment browser +0ms
  eslint:config-ops Creating config for environment es6 +0ms
  eslint:config-ops Creating config for environment node +0ms
  eslint:linter Linting code for /home/fvhockney/laut/eslint-test/src/App.vue (pass 1) +0ms
  eslint:linter Generating fixed text for /home/fvhockney/laut/eslint-test/src/App.vue (pass 1) +119ms
  eslint:source-code-fixer Applying fixes +0ms
  eslint:source-code-fixer Found fixes to apply +0ms
TypeError: Cannot read property 'meta' of undefined
    at CLIEngine.options.fix.lintResult (/home/fvhockney/laut/eslint-test/node_modules/eslint/lib/cli-engine.js:499:38)
    at Function.SourceCodeFixer.applyFixes (/home/fvhockney/laut/eslint-test/node_modules/eslint/lib/util/source-code-fixer.js:122:52)
    at Linter.verifyAndFix (/home/fvhockney/laut/eslint-test/node_modules/eslint/lib/linter.js:1050:43)
    at processText (/home/fvhockney/laut/eslint-test/node_modules/eslint/lib/cli-engine.js:197:32)
    at processFile (/home/fvhockney/laut/eslint-test/node_modules/eslint/lib/cli-engine.js:241:12)
    at fileList.map.fileInfo (/home/fvhockney/laut/eslint-test/node_modules/eslint/lib/cli-engine.js:616:40)
    at Array.map (<anonymous>)
    at CLIEngine.executeOnFiles (/home/fvhockney/laut/eslint-test/node_modules/eslint/lib/cli-engine.js:588:34)
    at Object.execute (/home/fvhockney/laut/eslint-test/node_modules/eslint/lib/cli.js:205:111)
    at Object.<anonymous> (/home/fvhockney/laut/eslint-test/node_modules/eslint/bin/eslint.js:78:28)

[fvhockney]

Bump

[fvhockney]

It seems that the problem is that in eslint/lib/cli-engine.js from the eslint package, the rule the rule is not being put into the _rulesCache and so the function failes when it tries to read the meta from the rule to find out if it is fixable. making the function bail by forcing a return on no rule works and fixes the issue. At this point I'm not sure if this is something that can be fixed in the vue plugin or if it is something that needs to be addressed by eslint

eslint/lib/cli-engine.js line 497

this.options.fix = lintResult => {
  const rule = this._rulesCache.get(lintResult.ruleId);
  // line I added to bail if no rule found
  if (!rule) return
  const matches = rule.meta && fixTypes.has(rule.meta.type);
  
  return matches && originalFix(lintResult);
}

[fvhockney]

After looking at the eslint repo and seaching through their issues, I see that this is actually seems like an issue with the order configs are loaded. They are working on a fix. I have pulled down the branch into the VueCli project and confirmed that this seems to fix the issue.

link to issue

eslint/eslint#11559

link to issue which introduces fix

eslint/eslint#11546

[mysticatea]

Hi. I apologize for my overlooking.

As your investigation, The current implementation of --fix-type option doesn't look like to support plugin rules because it caches rules before finding any configs. 😕

We cannot do something in the plugin side...

[fvhockney]

No worries. I am just disabling the offending rule when running --fix-type as a temporary work around until eslint/eslint#11546 is merged and released with eslint6

[ota-meshi]

It looks like it's already resolved, so I close this issue.
If your issue is not resolved, please open a issue.