Add @vue/eslint-plugin-typescript when adding @vue/cli-plugin-typescript to an existing project (that uses eslint)

[fdeitelhoff]

Version

3.0.0-beta.6

Reproduction link

https://github.com/fdeitelhoff/brickobotik.codes

Steps to reproduce

1. Setup a clean project via vue cli (e.g. "vue create tests")
2. Add the typescript plugin via "npm install -D @vue/cli-plugin-typescript"
3. Invoke the typescript plugin via "vue invoke typescript"

What is expected?

The freshly created project should compile.

What is actually happening?

Two error messages:

WARNING Compiled with 2 warnings

error: Parsing error: Unexpected character '@' at src\App.vue:
10 | import HelloWorld from './components/HelloWorld.vue';
11 |

12 | @component({
13 | components: {
14 | HelloWorld,
15 | },

1 error found.

error: Parsing error: Unexpected character '@' at src\components\HelloWorld.vue:
32 | import { Component, Prop, Vue } from 'vue-property-decorator';
33 |

34 | @component
35 | export default class HelloWorld extends Vue {
36 | @prop() private msg!: string;
37 | }

1 error found.

[LinusBorg]

The reproduction link isn't working and your instructions about reproducing it with a frsh project are lacking as you don't mention which answers to choose.

I would guess you didn't choose to use vue-class-component.

[fdeitelhoff]

Sorry @LinusBorg for the missing information.

I used this steps while creating the projects:

• default (babel, eslint)
• Use class-style component syntax? Yes
• Use Babel alongside TypeScript for auto-detected polyfills? Yes
• Use TSLint? Yes
• Pick lint features: Lint on save

If I change the second answer (class-style component syntax) to No, the hello world project is working (the @component annotations are obviously missing).

The repository was set to private. It is now public and you should be able to access it.

[LinusBorg]

I see, these seem to be eslint errors.

Since you initially created the project with defaults, @vue/cli-plugin-eslint didn't add an eslint preset to handle typescript syntax, which it does when choosing typescript intially:

https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-eslint/generator.js#L38-L43

Solution

We should probably enable the opposite way:

• the typescript plugin should check if @vue/cli-plugin-eslint is used with api.hasPlugin()
• if so, it should check if @vue/eslint-config-typescript is already in the dlist of dependencies
• if it is, do nothing
• if it isn't:
  • add it to the pkg dependencies
  • alter the existing eslint config to include this preset (if possible - if not, inform user about necessary steps)

Immediate Fix

npm i -D @vue/eslint-config-typescript

Add that preset to your eslint config in package.json:

 "eslintConfig": {
    "root": true,
    "extends": [
      "@vue/typescript",
      "plugin:vue/essential",
      "eslint:recommended"
    ]
  },

[fdeitelhoff]

Thank you @LinusBorg

I tried you immediate fix and getting the following errors:

error: 'Component' is defined but never used (no-unused-vars) at src\App.vue:9:10:

   7 |
   8 | <script lang="ts">
>  9 | import { Component, Vue } from 'vue-property-decorator';
     |          ^
  10 | import HelloWorld from './components/HelloWorld.vue';
  11 |
  12 | @Component({

error: 'HelloWorld' is defined but never used (no-unused-vars) at src\App.vue:10:8:

   8 | <script lang="ts">
   9 | import { Component, Vue } from 'vue-property-decorator';
> 10 | import HelloWorld from './components/HelloWorld.vue';
     |        ^
  11 |
  12 | @Component({
  13 |   components: {

2 errors found.

error: 'Component' is defined but never used (no-unused-vars) at src\components\HelloWorld.vue:32:10:

  30 |
  31 | <script lang="ts">
> 32 | import { Component, Prop, Vue } from 'vue-property-decorator';
     |          ^
  33 |
  34 | @Component
  35 | export default class HelloWorld extends Vue {

error: 'msg' is not defined (no-undef) at src\components\HelloWorld.vue:36:19:

  34 | @Component
  35 | export default class HelloWorld extends Vue {
> 36 |   @Prop() private msg!: string;
     |                   ^
  37 | }
  38 | </script>
  39 |

2 errors found.

If I understand you correctly, there's a way to create a project with initial TypeScript support? So I do not need to install the plugin afterwards?

[LinusBorg]

Yes. Just don't do a default install, choose the options manually.

Then you can choose typescript.

[LinusBorg]

I tried you immediate fix and getting the following errors:

About these errors - can you try with the typescript eslint preset at the end of the preset array:

"eslintConfig": {
    "root": true,
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
       "@vue/typescript"
    ]
  },

This seems necessary so the typescript eslint preset can deactivate that rule:

https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/eslint-config-typescript/index.js#L9

[fdeitelhoff]

@LinusBorg Many thanks!

I solved my problem choosing the options by myself.

But I tried your suggestion as well: Changing the order of the extends is also working!

So, the problem is solvable in both ways.

[LinusBorg]

Thanks for the feedback!