ESLint + Prettier 在 Vue2 异步代码（async/await）中的校验要点

在 Vue2 项目中，使用 ESLint 和 Prettier 校验异步代码（如 async/await）时，需确保代码质量、格式一致性和兼容性。以下是关键要点，分步说明：

1. ESLint 校验要点

ESLint 负责语法检查和错误预防，重点针对 async/await 的常见陷阱：

• 解析器配置：
  • 使用 @babel/eslint-parser 支持 ES2017+ 语法（async/await 是 ES2017 特性）。
  • 在 .eslintrc.js 中设置：

    module.exports = {
      parser: '@babel/eslint-parser',
      parserOptions: {
        ecmaVersion: 2018, // 支持 async/await
        sourceType: 'module'
      }
    };
    

• 核心规则：
  • require-await: 确保 async 函数内实际使用 await，避免冗余异步声明。
    • 规则值：'error'（强制启用）。
  • no-await-in-loop: 限制在循环中使用 await，防止性能问题。
    • 规则值：'warn'（警告，但允许合理场景）。
  • no-async-promise-executor: 禁止在 Promise 构造函数中使用 async 函数，避免潜在错误。
    • 规则值：'error'。
• Vue 特定规则（需 eslint-plugin-vue）：
  • vue/no-async-in-computed-properties: 计算属性（computed）不能异步，强制使用同步逻辑。
    • 规则值：'error'。
  • vue/require-await-in-methods: 确保 methods 中的 async 函数使用 await，提升可维护性。
    • 规则值：'warn'。
• 错误处理：
  • 启用 no-unused-vars 捕获未处理的 Promise 错误（如缺少 try/catch）。
  • 建议添加自定义规则：如强制使用 try/catch 包裹 await 调用，需通过 ESLint 插件实现。

2. Prettier 校验要点

Prettier 专注于代码格式化，确保 async/await 代码风格统一：

• 基本配置：
  • Prettier 自动处理 async/await 的缩进和换行，无需特殊规则。
  • 在 .prettierrc 中设置通用格式：

    {
      "printWidth": 80,
      "tabWidth": 2,
      "useTabs": false,
      "semi": true,
      "singleQuote": true
    }
    

• 与 ESLint 集成：
  • 使用 eslint-config-prettier 关闭 ESLint 中与 Prettier 冲突的格式规则（如 indent 或 quotes）。
  • 使用 eslint-plugin-prettier 将 Prettier 作为 ESLint 规则运行：

    // .eslintrc.js
    module.exports = {
      extends: ['plugin:vue/recommended', 'prettier'],
      plugins: ['prettier'],
      rules: {
        'prettier/prettier': 'error'
      }
    };
    

• 异步代码格式化：
  • Prettier 自动优化 async 函数结构，例如：
    • 将 async function foo() { ... } 格式化为一致缩进。
    • 处理多行 await 表达式时，保持可读性。

3. 常见问题与解决方案

• 解析错误（如 "Parsing error: Unexpected token async"）：
  • 原因：ESLint 未配置 ES2017+ 解析器。
  • 解决：确认 parser 和 ecmaVersion 设置正确。
• Vue 单文件组件问题：
  • 在 .vue 文件的 <script> 部分，async/await 需在 methods 或生命周期钩子（如 mounted）中使用。
  • 避免在模板（template）或计算属性（computed）中直接调用异步函数。
• 性能警告：
  • ESLint 规则如 no-await-in-loop 可能触发；评估是否需重构为并行处理（如 Promise.all）。
• 依赖管理：
  • 确保安装必要包：

    npm install eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier @babel/eslint-parser --save-dev
    

4. 示例：Vue2 组件集成

以下是一个 Vue2 单文件组件示例，展示 async/await 使用及 ESLint + Prettier 校验：

<template>
  <div>
    <button @click="fetchData">Load Data</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  methods: {
    async fetchData() { // ESLint 检查 require-await
      try {
        const response = await fetch('https://api.example.com/data'); // Prettier 格式化缩进
        this.message = await response.json();
      } catch (error) {
        this.message = 'Error: ' + error.message; // ESLint 检查 no-unused-vars
      }
    }
  }
};
</script>

• 校验流程：
  1. ESLint 检测：确保 fetchData 是 async 且有 await，避免计算属性中使用异步。
  2. Prettier 格式化：自动调整缩进和分号，保持代码整洁。
  3. 运行命令：eslint --fix . 和 prettier --write . 自动修复问题。

通过以上要点，可确保 Vue2 异步代码的健壮性和可维护性。定期检查 ESLint 报告和 Prettier 输出，以适配项目需求。