1、检查node版本

node > 14.18

npm > 6.14

2、项目创建

cn.vuejs.org/guide/quick…

根据vue官网新建项目

npm init vue@latest

package.json限制node版本

{
  ...
  "engines": {
    "node": ">= 14.18.0",
    "npm": ">= 6.14.0"
  }
}

3、插件安装

1、vue2和vue3代码同时开发时，将vue3另存为工作区

1）、安装vue3配套插件，并且将vue3插件设置为工作区启用，vue2插件设置为工作区禁用

2、安装通用插件，并启用

prettier、eslint、git history、auto close tag

插件安装无效时可以重新安装vscode

4、prettier，eslint设置代码风格

设置默认格式化方式为prettier

.prettierrc.json

{
  "singleQuote": true,
  "semi": false,
  "tabWidth": 2,
  "bracketSpacing": true,
  "trailingComma": "none"
}

.eslintrc.cjs

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  rules: {
    // 禁止末尾逗号
    'comma-dangle': [2, 'never'],
    // 强制在 JSX 属性中一致地使用双引号或单引号
    'jsx-quotes': [2, 'prefer-single'],
    // 强制使用一致的反勾号、双引号或单引号
    quotes: [
      2,
      'single',
      {
        avoidEscape: true,
        allowTemplateLiterals: true
      }
    ]
  }
}

设置完成后，有时不会立马生效，重启vscode使其生效