vue3项目vscode Eslint配合Prettier代码规范配置

vue3的项目和vue2的项目代码规范不同，vue3中的具体配置如下：

1.vue创建的时候选择elslint和prettier都选择。

2.vscode安装eslint插件

3.在VS code的配置增加如下自动修复代码：

{
    "workbench.colorTheme": "Default Dark Modern",
    // ESlint插件 + Vscode配置 实现自动格式化修复
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    "editor.formatOnSave": false
}

4.配置项目根目录下面.eslintrc.cjs文件下面增加rules选项：

  rules: {
    // prettier专注于代码的美观度（格式化工具）
    // 前置：
    // 1.禁用格式化插件 prettier   format on save 关闭
    // 2.安装Eslint插件,并配置保存时自动修复
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, // 单引号
        semi: false, // 无分号
        printWidth: 80, // 每行宽度至多80字符
        trailingComma: 'none', // 不加对象|数组最后逗号
        endOfLine: 'auto' // 换行符号不限制（win mac 不一致）
      }
    ],
    // ESLint关注于规范，如果不符合规范，报错
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）
      }
    ],
    'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验（props解构丢失响应式）
    // 💡 添加未定义变量错误提示，create-vue@3.6.3 关闭，这里加上是为了支持下一个章节演示。
    'no-undef': 'error'
  }

至此，代码规范配置完成，如果没有立即生效，可以尝试重启vscode。