Typescript-Eslint conflict

[essenmitsosse]

Version

3.0.0-rc.3

Reproduction link

https://github.com/marcus-blaettermann-ventoro/vue-cli-bug/tree/master

Steps to reproduce

Clone the given repo, npm install and then npm run lint

Alternative: Run vue create with those settings:

Vue CLI v3.0.0-rc.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Linter
? Use class-style component syntax? No
? Use Babel alongside TypeScript for auto-detected polyfills? No
? Pick a linter / formatter config: Airbnb
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)

Then add this to the src/components/Hello-World.vue:

enum Direction {
Up,
Down,
}

const foo: Direction = Direction.Up;

What is expected?

The linter should not find any errors, or at least should fix the errors it finds.

What is actually happening?

The linter adds a space before one of the commas in the enum Direction and then complains about it. Removing the space has no effect because the linter adds it the next time again. When using lint on save in an editor, the comma jumps between the first and second line.

---

• This has been reproduced on both Mac and Windows.
• The problem doesn`t occure with the same code in a regular .ts file
• The problem only occurs, when an enum (something regular JavaScript doesn`t have) followed by something with a type declaration.
• The problem also occurs, when the enum is in a single line. enum Direction { Up, Down }
• If the const foo : Direction = Direction.Up; is removed the linter doesn`t mind the enum anymore.
• I think the linter somehow chokes on the type declaration colon.

[essenmitsosse]

This also happens when you replace the enum with a simple array declaration - the problem seems to be the type declaration. So the minimal thing to reproduce is just to add something like this in a .vue file:

const bar = [1, 2];
const foo : string = 'hi';

[LinusBorg]

There's a related issue open in the eslint repo: eslint/eslint#10260

Also, in the repo of typescript-eslint-parser, there seem to be a coupe of issues over time concerning the that same rule, tow of which are still open and likely related:

eslint/typescript-eslint-parser#449
eslint/typescript-eslint-parser#486

So in that context, I would suspect this to be an upstream issue with typescript-eslint-parser for now.

But since this only happens in .vue files (added a .ts file with the same enum, this was linted fine), it's somehow still related to us - possibly vue-loader?

Triage with normal .ts file:

// test.js
enum Direction {
  Up,
  Down,
}

export function dummy() { return null }

importing from this file doesn't raise any linting errors, but it does in a .vue file

Workaround

Adding this entry to the rules in eslintrc is a workaround:

  rules: {
    'space-infix-ops': 'off', // WORKAROUND
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }

[LinusBorg]

/ping @michalsnik @mysticatea any ideas?

[mario-d-s]

This also happens when importing multiple classes from a module:

// Component.vue
<script lang="ts">
import { Foo, Bar } from "Foobar"
...
</script>

produces:

error: Infix operators must be spaced (space-infix-ops)

on the comma between Foo and Bar. Then change it to:

import { Foo , Bar } from "Foobar"

To get:

error: There should be no space before ',' (comma-spacing)

It does not complain on the same style of imports in .ts files.

[mario-d-s]

I just noticed there must be other problems with typescript in SFC, indentation also doesn't work:

@Component({
    props: {
    info: Object
    }
    })
export default class MyComponent extends Vue { }

I want 4 spaces, but it doesn't indent the info: Object part within props and wants the closing }) to be indented.

[yyx990803]

Looks like there are some parser related problem when using eslint-plugin-vue in combination with typescript-eslint-parser. I pushed a temporary fix disabling the space-infix-ops rule when using that setup.