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 :)
isTypescriptFile check to not only check the .tsx? extension but also check for .vue files which include a <script lang="ts"> tag. isTypescriptFile. Repro
.eslintrc.js file. Which includes @typescript-eslint in its plugins and '@typescript-eslint/explicit-function-return-type': 'error'` in its rules.vue file with <script lang="ts"></script>{
"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 |
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.
Most helpful comment
isTypescriptFilewas 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.