如何在VSCode中针对性抑制Vue项目JavaScript装饰器的ts(1136)与vetur(1136)警告？

Hey, I've run into this exact issue before when using decorators like @debounce in Vue methods—super annoying to have to choose between fixing the warning and keeping syntax checks intact. Here are a few targeted solutions that let you have the best of both worlds:

1. Use ESLint as Your Primary Linter (Recommended) #

Instead of disabling VSCode's built-in checks entirely, replace them with ESLint, which you can configure to support decorator syntax while keeping all other validation rules.

• First, make sure your project has ESLint set up with Vue support (install eslint-plugin-vue and @babel/eslint-parser if you're using Babel to handle decorators).
• Update your VSCode settings.json to disable built-in JS/TS validation but enable ESLint for all relevant file types:

  "javascript.validate.enable": false,
  "typescript.validate.enable": false,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    "typescript",
    "typescriptreact"
  ]
  

• Configure your .eslintrc.js to recognize decorator syntax:
  If using Babel, add these settings to your parser options:

  module.exports = {
    parser: '@babel/eslint-parser',
    parserOptions: {
      ecmaFeatures: {
        legacyDecorators: true
      }
    },
    // ... other ESLint rules and plugins
  };
  

This way, ESLint will handle all syntax checking, including allowing decorators, while keeping your code clean.

2. Switch to TypeScript for Vue Components #

If your project can accommodate TypeScript, this is a clean way to resolve the warning since TS has first-class support for decorators.

• In your .vue files, set the script language to TypeScript:

  <script lang="ts">
  import { Component, Vue } from 'vue-property-decorator';
  import debounce from 'your-debounce-decorator-package';
  
  @Component
  export default class YourComponent extends Vue {
    @debounce(500)
    resizeInstant() {
      // do something
    }
  }
  </script>
  

• Create or update tsconfig.json in your project root to enable decorator support:

  {
    "compilerOptions": {
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true
    }
  }
  

Vetur will use TypeScript's language service to validate your code, which won't flag decorators as errors while keeping all TS syntax checks active.

3. Targeted Config for Pure JavaScript Projects #

If you're sticking with plain JS, you can adjust VSCode's language service settings to allow decorators without disabling all checks.

• For .js files: Create a jsconfig.json in your project root with these settings:

  {
    "compilerOptions": {
      "experimentalDecorators": true
    }
  }
  

This tells VSCode's TypeScript language service to recognize decorator syntax in JS files, eliminating the ts(1136) warning.

• For .vue files: Update your VSCode settings.json to have Vetur use ESLint for script validation instead of its built-in checker:

  "vetur.validation.script": "eslint"
  

Combine this with the ESLint config from Solution 1, and you'll get rid of the vetur(1136) warning while retaining all other syntax checks.

内容的提问来源于stack exchange，提问作者WM Wei