I have currently started using Typescript and I have been using it for a couple days, everything works fine (Emmet, linting etc...), but when I open up my old projects which are written in JavaScript, vs code is giving me warnings and errors about typing and stuff related to typescript. somehow Vs Code can't recognize that I am using JavaScript.

PS. i am working on a vue (nuxt) project and Vetur Plugin is handling syntax highlighting, linting etc...

error examples: 'modifyHtml' is declared but its value is never read.ts(6133)

Property '$store' does not exist on type 'CombinedVueInstance<Record<never, any> & Vue, object, object, object, Record<never, any>>'.Vetur(2339)

This is my settings.js:

    {
  "workbench.iconTheme": "material-icon-theme",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "editor.linkedEditing": true,
  "liveServer.settings.donotVerifyTags": true,
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "eslint.format.enable": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html",
    "vue-css": "css",
    "razor": "html",
    "plaintext": "jade"
  },
  "emmet.excludeLanguages": ["markdown"],
  "[dart]": {
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "editor.selectionHighlight": false,
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    "editor.suggestSelection": "first",
    "editor.tabCompletion": "onlySnippets",
    "editor.wordBasedSuggestions": false
  },
  "git.confirmSync": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "nativescript.analytics.enabled": true,
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "java.configuration.checkProjectSettingsExclusions": false,
  "sonarlint.rules": {
    "java:S106": {
      "level": "off"
    },
    "javascript:S1117": {
      "level": "off"
    }
  },
  "workbench.preferredDarkColorTheme": "GitHub Dark",
  "workbench.preferredHighContrastColorTheme": "GitHub Dark",
  "workbench.preferredLightColorTheme": "Visual Studio Dark",
  "[json]": {
    "editor.quickSuggestions": {
      "strings": true
    },
    "editor.suggest.insertMode": "replace"
  },
  "files.autoSave": "afterDelay",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "vetur.experimental.templateInterpolationService": true,
  "cSpell.userWords": ["vuex"],
  "workbench.colorTheme": "GitHub Dark",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-expand-multiline"
    },
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": false
    }
  },
  "files.associations": {
    "*.vue": "vue"
  },
  "eslint.validate": ["javascript", "javascriptreact", "vue"],
  "vetur.grammar.customBlocks": {
    "docs": "md",
    "i18n": "json"
  },
  "window.zoomLevel": -1,
  "json.schemas": []
}

I have currently started using Typescript and I have been using it for a couple days, everything works fine (Emmet, linting etc...), but when I open up my old projects which are written in JavaScript, vs code is giving me warnings and errors about typing and stuff related to typescript. somehow Vs Code can't recognize that I am using JavaScript.

PS. i am working on a vue (nuxt) project and Vetur Plugin is handling syntax highlighting, linting etc...

error examples: 'modifyHtml' is declared but its value is never read.ts(6133)

Property '$store' does not exist on type 'CombinedVueInstance<Record<never, any> & Vue, object, object, object, Record<never, any>>'.Vetur(2339)

This is my settings.js:

    {
  "workbench.iconTheme": "material-icon-theme",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "editor.linkedEditing": true,
  "liveServer.settings.donotVerifyTags": true,
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "eslint.format.enable": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html",
    "vue-css": "css",
    "razor": "html",
    "plaintext": "jade"
  },
  "emmet.excludeLanguages": ["markdown"],
  "[dart]": {
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "editor.selectionHighlight": false,
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    "editor.suggestSelection": "first",
    "editor.tabCompletion": "onlySnippets",
    "editor.wordBasedSuggestions": false
  },
  "git.confirmSync": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "nativescript.analytics.enabled": true,
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "java.configuration.checkProjectSettingsExclusions": false,
  "sonarlint.rules": {
    "java:S106": {
      "level": "off"
    },
    "javascript:S1117": {
      "level": "off"
    }
  },
  "workbench.preferredDarkColorTheme": "GitHub Dark",
  "workbench.preferredHighContrastColorTheme": "GitHub Dark",
  "workbench.preferredLightColorTheme": "Visual Studio Dark",
  "[json]": {
    "editor.quickSuggestions": {
      "strings": true
    },
    "editor.suggest.insertMode": "replace"
  },
  "files.autoSave": "afterDelay",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "vetur.experimental.templateInterpolationService": true,
  "cSpell.userWords": ["vuex"],
  "workbench.colorTheme": "GitHub Dark",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-expand-multiline"
    },
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": false
    }
  },
  "files.associations": {
    "*.vue": "vue"
  },
  "eslint.validate": ["javascript", "javascriptreact", "vue"],
  "vetur.grammar.customBlocks": {
    "docs": "md",
    "i18n": "json"
  },
  "window.zoomLevel": -1,
  "json.schemas": []
}

• javascript
• typescript
• vue.js
• nuxt.js
• vetur

• Are you using SFC for your old Vue project? – Terry Commented Jun 7, 2021 at 8:37
• Can you show us a screenshot of your VScode? – kissu Commented Jun 7, 2021 at 8:56
• @kissu just uploaded a screenshot – Peshang Hiwa Commented Jun 7, 2021 at 10:19
• It's Vetur who's generating the error, you should disable the TS options in the Vetur options. There is one for the templates and another one for scripts, and you shouldn't have these errors anymore. – Zakaria Sahmane Commented Jun 7, 2021 at 12:16
• 1 Thanks @ZakariaSahmane, it solved the problem... – Peshang Hiwa Commented Jun 7, 2021 at 13:19

4 Answers 4

I think I had the same problem. This took my a while to figure out but I think I have it. To disable type-checking for JavaScript files, add checkJs: false to the pilerOptions section of your jsconfig.json in the project root directory.

This is my jsconfig.json:

{
    "include": ["./src/**/*"],
    "pilerOptions": {
        "checkJs": false
    }
}

if you have tslint, try disabling it. That might solve the issue, sometimes these errors e in eslint too, though

This is what has worked for me. In my workspace settings.json:

{
  "vetur.validation.interpolation": false
}

This is my jsonfig.json settings:

{
  "include": ["./src/**/*"]
}

This enabled TypeScript errors in JS files for me:

{
    "js/ts.implicitProjectConfig.checkJs": true
}