VSCode初始化VueJS后@路径识别失败及TS语法报错问题求助

我来帮你搞定这两个Vue开发里的VSCode配置问题，都是很常见的小坑，一步步来就行：

一、让VSCode认出@别名 #

VSCode本身不会自动识别自定义的路径别名，得靠TypeScript的配置文件（或者JS项目的jsconfig.json）来告诉它怎么解析。具体操作：

• 先在项目根目录找到tsconfig.json（TypeScript项目），如果是纯JS项目就创建jsconfig.json
• 在文件里的compilerOptions节点下，加上baseUrl和paths配置，把@映射到src目录：

  {
    "compilerOptions": {
      "baseUrl": ".", // 把项目根目录设为基础路径
      "paths": {
        "@/*": ["src/*"] // 告诉VSCode，@/xxx就对应src/xxx
      }
    },
    "include": ["src/**/*"] // 确保src下所有文件都被纳入解析范围
  }
  

• 保存之后，重启VSCode或者按Ctrl+Shift+P输入"Reload Window"重载窗口，VSCode就能正确识别@开头的路径了。

二、搞定Vue组件里的两个TS报错 #

你的代码其实能正常编译，但VSCode报错，是因为TS服务没正确识别Vue装饰器和非空断言语法，按下面的步骤来：

1. 解决!:的"Expression expected"报错 #

!:是TypeScript的非空断言操作符，需要确保你的TS配置支持它：

• 打开tsconfig.json，在compilerOptions里加上或者确认这两项：

  {
    "compilerOptions": {
      "strictNullChecks": true, // 必须开启严格空检查，非空断言才会被TS识别
      "noImplicitAny": false // 如果项目不需要强制检查隐式any，可以设为false，按需调整
    }
  }
  

2. 解决@Prop和string相关的报错 #

@Prop是vue-property-decorator提供的装饰器，得确保配置和依赖都到位：

• 先安装必要的依赖（如果还没装的话）：

  npm install vue-property-decorator vue-class-component --save
  npm install @types/vue-property-decorator @types/vue-class-component --save-dev
  

• 然后在tsconfig.json里启用装饰器支持：

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

• 最后确认你的组件script标签声明了TS类型，比如：

  <script lang="ts">
  import { Vue, Prop } from 'vue-property-decorator';
  
  export default class HelloWorld extends Vue {
    @Prop() private msg!: string;
  }
  </script>
  

做完这些配置，重启VSCode，那两个红色下划线就应该消失啦。

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