Eslint-plugin-vue: Unexpected no-use-before-define error dependent on preceding code and/or tags

[dmshvetsov]

Tell us about your environment

• ESLint Version: 4.8.0
• eslint-plugin-vue Version: 3.13.0
• Node Version: 7.10.1

Please show your full configuration:

// eslintrc.json
{
    "env": {
        "browser": true,
        "node": true
    },
    "plugins": [
        "vue"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:vue/recommended"
    ],
    "parserOptions": {
        "parser": "babel-eslint",
        "sourceType": "module",
        "ecmaVersion": 2017
    },
    "rules": {
        "no-use-before-define": "error"
    }
}

// babelrc
{
  "presets": [
    ["env", { "targets": { "node": "7.10" } }]
  ],
  "plugins": [
    ["transform-object-rest-spread", { "useBuiltIns": true }],
    "babel-plugin-transform-decorators-legacy",
    "transform-runtime"
  ]
}

What did you do? Please include the actual source code causing the issue.

https://github.com/shvetsovdm/eslint-plugin-vue-no-use-before-issue repo to reproduce the issue

What did you expect to happen?

expect no [Error/no-use-before-define] error

What actually happened? Please include the actual, raw output from ESLint.

$ npx eslint src/*.vue

/Users/shvetsovdm/TempProjects/eslint-plugin-vue-no-use-before-issue/src/issue.vue
  18:16  error  'a' was used before it was defined  no-use-before-define
  18:20  error  'b' was used before it was defined  no-use-before-define

/Users/shvetsovdm/TempProjects/eslint-plugin-vue-no-use-before-issue/src/issue2.vue
  13:16  error  'a' was used before it was defined  no-use-before-define
  13:20  error  'b' was used before it was defined  no-use-before-define

/Users/shvetsovdm/TempProjects/eslint-plugin-vue-no-use-before-issue/src/issue3.vue
  19:16  error  'a' was used before it was defined  no-use-before-define

/Users/shvetsovdm/TempProjects/eslint-plugin-vue-no-use-before-issue/src/issue4.vue
  18:12  error  'a' was used before it was defined  no-use-before-define
  18:16  error  'b' was used before it was defined  no-use-before-define

✖ 7 problems (7 errors, 0 warnings)

[michalsnik]

Hi @shvetsovdm ! Interesting issue. Seems to be working fine when no babel-eslint parser is used 🤔 I think it's rather an upstream issue in vue-eslint-parser that provides the AST for extra parsers like babel-eslint in this case. Can you confirm it @mysticatea? You are definitely the best person to address this matter :)

[mysticatea]

I apology that I had overlooked this issue. I will take a look.

[mysticatea]

I have published [email protected] which fixes the issue. Please re-install this plugin to upgrade vue-eslint-parser. (Or do npm install --no-save [email protected]).

The cause is that babel-eslint parser makes AST sharing Node#range and Node#location with multiple nodes. Vue-eslint-parser is checking node objects to avoid fixing location objects twice. But because the location objects are shared with multiple nodes under babel-eslint, it had fixed the same location object twice via different node objects. https://github.com/mysticatea/vue-eslint-parser/commit/de0157434c614fe6192b31da1573ebe8792d08b8 fixed vue-eslint-parser checking the location objects also to avoid fixing location objects twice.

[michalsnik]

Great job @mysticatea ! I'm closing this issue then. @shvetsovdm feel free to reopen it if you'll encounter more issues though :)

[dmshvetsov]

@mysticatea @michalsnik this solves the issue, thanks a lot!