前端项目同时配置ESlint和Prettier

在前端项目中同时使用 ESlint(代码检查)Prettier(代码格式化) 可以确保代码既符合规范又风格统一。以下是详细配置步骤:


1. 安装依赖

arduino 复制代码
npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier
  • eslint:JavaScript/TypeScript 代码检查工具。
  • prettier:代码格式化工具。
  • eslint-config-prettier:关闭 ESLint 中与 Prettier 冲突的规则。
  • eslint-plugin-prettier:将 Prettier 作为 ESLint 规则运行。

2. 配置 ESLint

.eslintrc.js(示例)

java 复制代码
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    "eslint:recommended", // ESLint 推荐规则
    "plugin:react/recommended", // React 推荐规则(可选)
    "plugin:@typescript-eslint/recommended", // TS 推荐规则(可选)
    "plugin:prettier/recommended", // 必须放在最后,避免冲突
  ],
  parser: "@typescript-eslint/parser", // 解析 TS(可选)
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  rules: {
    "prettier/prettier": "error", // 让 Prettier 的错误以 ESLint 错误显示
    "no-console": "warn", // 自定义规则示例
    "react/prop-types": "off", // 关闭 React prop-types 检查(可选)
  },
};

关键点

  • "plugin:prettier/recommended" 必须放在 extends 的最后,确保覆盖冲突的 ESLint 规则。
  • "prettier/prettier": "error" 让 Prettier 的格式化问题以 ESLint 错误显示。

3. 配置 Prettier

.prettierrc(示例)

json 复制代码
{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxSingleQuote": false,
  "arrowParens": "always",
  "endOfLine": "lf"
}

说明

  • 这些规则可根据团队风格调整,如 singleQuote: true(使用单引号)。
  • 文件支持 .prettierrc / .prettierrc.json / prettier.config.js 等格式。

4. 配置 VS Code 自动格式化

.vscode/settings.json

json 复制代码
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]
}

作用

  • 保存时自动运行 Prettier 格式化 + ESLint 修复。
  • 确保 ESLint 和 Prettier 插件已安装。

5. 添加 Git 提交检查(可选)

使用 husky + lint-staged 在提交前自动检查和修复代码:

csharp 复制代码
npm install --save-dev husky lint-staged
npx husky init

package.json 配置

json 复制代码
{
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}

.husky/pre-commit

bash 复制代码
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged

效果 :提交代码前自动执行 eslint --fixprettier --write


6. 运行检查

  • 手动检查 ESLint

    css 复制代码
    npx eslint src --fix
  • 手动运行 Prettier

    css 复制代码
    npx prettier --write src/**/*.{js,jsx,ts,tsx}

常见问题

Q1: ESLint 和 Prettier 冲突了怎么办?

  • 确保 eslint-config-prettier 已正确配置(extends 中放在最后)。
  • 检查 .eslintrc 是否包含与 Prettier 冲突的规则(如 quotessemi)。

Q2: 保存时没有自动格式化?

  • 检查 VS Code 是否安装了 ESLintPrettier 插件。
  • 确保 .vscode/settings.json 配置正确。

总结

工具 作用 配置文件
ESLint 代码质量检查(语法、逻辑错误) .eslintrc.js
Prettier 代码风格格式化(缩进、引号等) .prettierrc

通过以上配置,ESLint 和 Prettier 可以完美协作,既保证代码质量,又统一代码风格。 🚀

相关推荐
San303 分钟前
CSS3 星球大战:用前端技术打造震撼的3D动画效果
前端·css·html
用户12039112947263 分钟前
从零构建一个HTML5敲击乐Web应用:前端开发最佳实践指南
前端
Violet_YSWY7 分钟前
将axios、async、Promise联系在一起讲一下&讲一下.then 与其关系
开发语言·前端·javascript
San3011 分钟前
扩展卡片效果:用 Flexbox 和 CSS 过渡打造惊艳交互体验
前端·javascript·css
写代码的皮筏艇13 分钟前
JS数据类型转换
前端·javascript
Qinana14 分钟前
🌟 从 CSS 到 Stylus:打造更优雅、高效的样式开发体验
前端·javascript·css
AAA阿giao15 分钟前
弹性布局:CSS 布局的“变形金刚”来了!
前端·css
烟袅15 分钟前
🧱 从 inline-block 到 Flexbox:告别“空白符陷阱”,拥抱现代布局
前端·css
程序员Sunday18 分钟前
还在用 setTimeout?试试 requestIdleCallback 吧!
前端·javascript
非凡ghost19 分钟前
Flameshot(开源免费的截图工具) 中文绿色版
前端·javascript·后端