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>
• `<style></style>

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