Vue-cli: Allow selecting TSLint + ESLint for .vue files

[NicoCevallos]

What problem does this feature solve?

If I would like to work on a project using TypeScript and also I would like to lint templates of .vue files, I need to start a new project selecting TypeScript and TSLint, and then install and invoke the @vue/cli-plugin-eslint plugin to add the required packages and the .eslintrc file.

What does the proposed API look like?

Allow selecting TSLint + ESLint (with the same config as ESLint with error prevention only) to generate .eslintrc and tslint.json files, when I create a new Vue project.
Maybe would be better to add a question after Pick a linter / formatter config to ask if I would like to lint templates in .vue files

[DrSensor]

As a side note for this feature

the prompt choice will be long

? Pick a linter / formatter config:
❯ TSLint
  TSLint + Airbnb ESLint config
  TSLint + Standard ESLint config
  TSLint + Prettier
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

If it's implemented, the prompt choices need to be trimmed (merge ESLint choice)

? Pick a linter / formatter config:
❯ TSLint
  TSLint + Airbnb ESLint config
  TSLint + Standard ESLint config
  TSLint + Prettier

using tslint-eslint-rules maybe can help to implement this feature

[ChristianStornowski]

In my opinion removing ESLint as a prompt choice would be bad because with ESLint i can use https://github.com/vuejs/eslint-plugin-vue. :-)

[IlCallo]

+1 for an automatic setup with both TSLint, ESLint and eslint-plugin-vue

[ffxsam]

Anyone know how to manually configure this currently? I have tslint, eslint, and eslint-plugin-vue, but eslint is not always happy with my TS code:

Module Warning (from ./node_modules/eslint-loader/index.js):
error: Duplicate param 'prop' (no-dupe-args) at src/components/TrackList.vue:125:15:
  123 |     },
  124 |
> 125 |     changeSort({ prop, order }: { prop: string; order: SortOrder }) {
      |               ^
  126 |       this.sortBy = prop;
  127 |       this.order = order;
  128 |     },

I could just turn off the no-dupe-args and no-redeclare rules, but I'm wondering if there's a better way. Namely, to have eslint ignore <script lang="ts"> blocks.

[NicoCevallos]

Hi @ffxsam,

TL;DR;
Looks like it's an error of the typescript-eslint-parser fo the interface type checking. I could reproduce the issue and fix it creating an interface for { prop: string; order: SortOrder; } and using that instead "inline interface".

In deep:
TS code into the .vue files is linted by ESLint thanks to the typescript-eslint-parser which translate the TS code to a tree code, so in that case for console linting, TSLint is useless.
TSLint is good for .ts files only, because it could not extract the <script lang="ts"> tag from the .vue files.
Also typescript-eslint-parser has a bug related to @Component decorator (https://github.com/eslint/typescript-eslint-parser/issues/438)
One more thing... if you lint TS code in .vue files with ESLint and .ts files with TSLint... you'll need to maintain 2 configuration, there are rules in ESLint that doesn't exists for TSLint and vice versa.
So, IMHO, you need to select one listing tool for TS Code, in order to allow you to use the pre-commit CLI scripts:
If you selected ESLint, you should familiarize with typescript-eslint-parser, and you could continue working with <script lang="ts"> tags, and configure ESLint to also lint .ts files.
But, if you selected TSLint, would be better to change the <script lang="ts"> tag to something like that <script lang="ts" src="./script.ts">, so you could use ESLint to lint the HTML content of the .vue files, and TSLint for .ts files

I would like to hear about other opinions about that, and I just found wotam (https://github.com/fimbullinter/wotan) somebody experienced that?

[summercn]

hi, any best practice for this feature?

[NicoCevallos]

Hi @summercn, hope it didn't block you and find a way to deal with it.

I just backed to Vue.js after some months without using it, and checking this for a new project with the latest version of vue-cli (3.5.1) I found a solution that may will be useful for this case.

First I ran vue create command adding TS and enabling TSLint in the listing step. This step will create the tslint.json file only.
Then I ran vue add @vue/eslint with the option Error prevention only, to create the eslintrc.js with the basic configuration to lint html in vue files.

There are 2 little things to review (I'll try to update soon on this)
1.- I guess in this case won't need the @vue/eslint-config-typescript package and the reference to @typescript-eslint/parser in the eslintrc.js file
2.- The lint-staged property in the package.json file is duplicating .vue linting

"lint-staged": {
    "*.ts": [
      "vue-cli-service lint",
      "git add"
    ],
    "*.vue": [
      "vue-cli-service lint",
      "git add"
    ],
    "*.{js,vue}": [
      "vue-cli-service lint",
      "git add"
    ]
  }

Maybe it could be changed to a single instruction, like

    "*.{ts,js,vue}": [
      "vue-cli-service lint",
      "git add"
    ]

[lianzhao]

AFAIK, vue-cli recommended eslint over tslint for ts projects now? Is that true?

[IlCallo]

TSLint will be deprecated and all efforts will converge into ESLint, so I guess this issue will solve itself more or less when 2019 ends: the standard will be ESLint.

Source

[NicoCevallos]

Thanks @IlCallo for that info, I was disconnected of any news about the JS/TS ecosystem LOL
I researched a bit about that and checked the roadmap, and looks like the plan is to implement TS linting into ESLint in June 2019, so... so I think far ESLint + TSLint would be a good approach to cover things in TS that doesn't exists in ESLint like the conflict between new-cap rule and the decorators

[sodatea]

Now that TSLint is officially deprecated, I think we should no longer consider putting energy into TSLint-related features. So I'm closing this issue.

[vegerot]

@sodatea how can I migrate my existing TSLint project to ESlint? For example, making vue-cli-service lint using ESLint instead of TSLint?

[sodatea]

@vegerot Just run vue add eslint in the project.

[vegerot]

Trying to do that in my project gives an error:

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save

🚀  Invoking generator for @vue/cli-plugin-eslint...
 WARN  conflicting versions for project dependency "eslint":

- ^5.16.0 injected by generator "undefined"
- ^6.7.2 injected by generator "@vue/cli-plugin-eslint"

Using newer version (^6.7.2), but this may cause build errors.
 ERROR  SyntaxError: Unexpected token / in JSON at position 652
SyntaxError: Unexpected token / in JSON at position 652
    at JSON.parse (<anonymous>)
    at Object.read (/usr/local/lib/node_modules/@vue/cli/lib/util/configTransforms.js:44:30)
    at ConfigTransform.transform (/usr/local/lib/node_modules/@vue/cli/lib/ConfigTransform.js:25:30)
    at extract (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:198:37)
    at Generator.extractConfigFiles (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:211:9)
    at Generator.generate (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:173:10)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async runGenerator (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:109:3)
    at async invoke (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:90:3)