前端 Vue3 项目开发—— ESLint & prettier 配置代码风格

ESLint & prettier 介绍

如果你用的是 pnpm create vue 来创建项目，那么创建项目时就会让你选择是否添加 ESLint 和 prettier

我们在上一篇博客中详细介绍过 ESLint，可以说上一篇博客是这篇博客的先修知识，所以各位小伙伴们请先去看看我的上一篇博客，博客指路：前端 ESlint 代码规范及修复代码规范错误-CSDN博客

如果说 ESLint 是为了使代码更加规范，那 prettier 的引入则是为了使代码更加美观

ESLint & prettier 配置代码风格

在这之前，请先确保自己已经根据我上一篇博客完成了如下步骤

1. 安装了插件 ESlint，开启保存自动修复

2. 禁用了插件 Prettier，并关闭保存自动格式化

接下来我们将完成如下配置

配置文件 .eslintrc.cjs

1. prettier 风格配置 https://prettier.io

   1. 单引号

   2. 不使用分号

   3. 每行宽度至多80字符

   4. 对象 / 数组的最后一个元素的后面不加逗号

   5. 换行符号不限制（win mac 不一致）

2. vue 组件名称多单词组成（忽略index.vue）：vue 组件名称要求由多个单词组成，若不是多个单词会报错，但倘若 index.vue 也报错就不太合理了，所以我们手动配置来忽略index.vue

3. 关闭 props 解构的校验：props 解构时会丧失响应式，所以 props 解构时会报错。但其实我们有办法让props 解构时不丢失响应式，所以我们手动关闭props 解构时的报错

具体的配置代码如下

rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, // 单引号
        semi: false, // 无分号
        printWidth: 80, // 每行宽度至多80字符
        trailingComma: 'none', // 不加对象|数组最后逗号
        endOfLine: 'auto' // 换行符号不限制（win mac 不一致）
      }
    ],
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）
      }
    ],
    'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验
    // 💡 添加未定义变量错误提示，create-vue@3.6.3 关闭，这里加上是为了支持下一个章节演示。
    'no-undef': 'error'
  }

复制上述代码粘贴至文件中即可，如下图所示