Typescript-eslint: Make typescript-eslint rules compatible with .vue files

Created on 13 May 2019  路  1Comment  路  Source: typescript-eslint/typescript-eslint


My team and I are writing a Vue app using typescript. We have started making extensive use of vue single file components. The single file components end with a .vue file extension. Inside the components there are three possible sections:

  • <template></template>
  • <script lang="ts"></script>
  • `

The problem we are seeing is that some of the eslint plugin rules (explicit-function-return-types and explicit-member-accessibility) use a function in utils called isTypescriptFile. This check ensures that the rules are run only on .ts or .tsx files. This means that we are not getting some of our linting rules run in our .vue files.

I can think of a couple good ways to fix this and would like some feedback on which is preferred :)

  1. change the isTypescriptFile check to not only check the .tsx? extension but also check for .vue files which include a <script lang="ts"> tag.
  2. Make the linter configurable on what files it should include as typescript files (run time variables, env variables, config file, etc). These variables would then replace the static file extension checker logic in isTypescriptFile.

Repro

  • Create a repo with a .eslintrc.js file. Which includes @typescript-eslint in its plugins and '@typescript-eslint/explicit-function-return-type': 'error'` in its rules
  • create a .vue file with <script lang="ts"></script>
  • In that script tag create a function with no return type
  • Linter will not catch the error
{
  "rules": {
    "typescript/<rule>": ["<setting>"]
  }
}
// your repro code case

Expected Result
Linting of .vue files for all typescript-eslint rules.

Actual Result
explicit-function-return-types and explicit-member-accessibility are not linting in .vue files.

Versions

| package | version |
| ---------------------------------- | ------- |
| @typescript-eslint/eslint-plugin | 1.9.0 |
| @typescript-eslint/parser | 1.9.0 |
| TypeScript | 3.3.4 |
| ESLint | 5.15.3 |
| node | 11.9.0 |
| npm | 6.9.1 |

breaking change enhancement has pr eslint-plugin

Most helpful comment

isTypescriptFile was added as a hack to help people with mixed codebases.
I think we should probably kill it because people can use overrides to disable the rules where appropriate.

>All comments

isTypescriptFile was added as a hack to help people with mixed codebases.
I think we should probably kill it because people can use overrides to disable the rules where appropriate.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jwldnr picture jwldnr  路  3Comments

golopot picture golopot  路  3Comments

kimamula picture kimamula  路  3Comments

kmdrGroch picture kmdrGroch  路  3Comments

G-Rath picture G-Rath  路  3Comments