vscodevue3代码提示分析

一、Vue3项目配置自动提示

在Vue2中，我们经常会使用Vue CLI创建工程，Vue CLI可以自动在项目根目录下创建.eslintrc.js文件，将文件里的”plugin:vue/essential”改为”plugin:vue/recommended”，可以开启Vue2项目代码提示。在Vue3中，如果我们需要让VSCode自动提示Vue3中的语法，需要进行一些额外的配置。

首先，在项目的根目录下，使用npm安装”@vue/compiler-sfc”和”eslint-config-vue”：

npm install --save-dev @vue/compiler-sfc eslint-config-vue

然后，在项目根目录下的.eslintrc.js文件中添加以下配置：

module.exports = {
  extends: [
    'plugin:vue/vue3-recommended',
    'eslint:recommended', 
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    parser: '@typescript-eslint/parser',
    extraFileExtensions: ['.vue']
  },
  plugins: ['@typescript-eslint', 'vue'], 
  rules: {
    "quotes": [2, "single"],
    "semi": [2, "always"],
    "no-console": "off",
    "vue/valid-v-slot": ["error", {"allowModifiers": true}]
  },
  globals: {
    defineProps: true,
    defineEmits: true,
    defineExpose: true,
  },
  settings: {
    "vue": {
      "version": "3.0.0"
    }
  },
};

这里我们需要配置”plugin:vue/vue3-recommended”，下面还可以添加其他的插件和规则。需要注意的是，这里的vue版本号需要和我们项目中使用的Vue版本号一致。

二、VSCode的Vetur插件

我们可以使用Vetur插件，来提高Vue3项目的开发效率。Vetur插件提供了很多对Vue3项目开发有用的功能，包括：

• 语法高亮
• 自动完成
• 错误提示
• 快速跳转到定义
• 格式化代码

需要注意的是，在使用Vetur插件之前，我们需要安装Vue3的解析器。我们可以在VSCode的设置中，搜索”vetur.experimental.templateInterpolationService”，将其设置为true。这样Vetur插件就可以支持Vue3中的模板语法了。

三、自定义组件的代码提示

在Vue3中，我们可以使用defineComponent()函数来定义自己的组件。要让VSCode可以自动提示自己定义的组件，在组件文件中，需要添加@Component()装饰器，并且指定组件的name和props（如果有props的话）：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

@Component({
  name: 'MyComponent',
  props: {
    message: {
      type: String,
      default: '',
    },
  },
})
export default defineComponent({
  name: 'MyComponent',
  props: {
    message: {
      type: String,
      default: '',
    },
  },
});
</script>

这样，我们就可以在其他文件中使用<MyComponent />的形式来引用组件，并且可以自动提示组件的props。

四、Vue3中的TypeScript支持

在Vue3中，我们可以使用TypeScript来进行开发。要在VSCode中开启对TypeScript的支持，我们需要安装”@vue/cli-plugin-typescript”插件：

vue add @vue/typescript

这条命令会自动在项目中安装TypeScript相关的依赖和配置文件。然后，在VSCode中，我们需要安装一些TypeScript相关的插件，包括”TypeScript Hero”、”Bracket Pair Colorizer”和”ESLint”插件。

这样，在Vue3项目中使用TypeScript时，我们可以获得更加精细的代码提示、类型检查和错误提示。

五、在Vue3中使用Composition API

Composition API是Vue3中的新特性，它提供了一种新的组织组件逻辑的方式。如果我们想要使用Composition API来编写组件，需要先在组件文件中引入”defineComponent”、”reactive”和”toRefs”等函数：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';

export default defineComponent({
  setup() {
    const state = reactive({
      message: 'Hello, Vue3!',
    });
    return {
      ...toRefs(state),
    };
  },
});
</script>

这样，我们就可以使用Composition API来编写组件逻辑，同时获得代码提示和类型检查。

六、Vue3中的单文件组件

在Vue3中，我们可以使用单文件组件来组织我们的代码，并且可以自动获得代码提示和语法高亮。一个典型的单文件组件包括模板、脚本和样式三个部分：

<template>
  <div class="container">
    <h1>{{title}}</h1>
    <p>{{message}}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  props: {
    title: {
      type: String,
      default: 'Vue3单文件组件',
    },
    message: {
      type: String,
      default: 'Hello, Vue3!',
    },
  },
});
</script>

<style scoped>
.container {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ccc;
}
</style>

在单文件组件中，我们可以使用”scoped”修饰符来限制组件样式只作用于当前组件。这样可以避免全局样式的污染，更加方便地组织和维护代码。