JavaScript：ESLint+Prettier 规范代码格式

ESLint + Prettier 配置示例

以下是一个结合 ESLint 和 Prettier 的 JavaScript 配置示例，包含 .eslintrc.js 和 .prettierrc 文件配置，以及如何在项目中集成两者的说明。

ESLint 配置文件 (.eslintrc.js)

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended', // 集成 Prettier 规则
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  rules: {
    'no-console': 'warn',
    'no-unused-vars': 'error',
    'prettier/prettier': 'error', // 启用 Prettier 规则检查
  },
};

Prettier 配置文件 (.prettierrc)

{
  "semi": true,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "arrowParens": "always"
}

安装依赖

确保安装以下依赖包：

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

VSCode 集成

1. 安装 VSCode 插件：ESLint 和 Prettier - Code formatter。
2. 在项目根目录创建 .vscode/settings.json：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "eslint.validate": ["javascript"]
}

运行检查

在 package.json 中添加脚本：

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint --fix .",
    "format": "prettier --write ."
  }
}

通过以上配置，可以实现代码的自动化格式检查和修复。运行 npm run lint 检查问题，npm run lint:fix 自动修复 ESLint 问题，npm run format 应用 Prettier 格式化。