前端工程化革命：pig-ui ESLint+Prettier双剑合璧配置指南

【免费下载链接】pig 项目地址: https://gitcode.com/gh_mirrors/pig/pig

在现代前端开发中，代码质量和开发效率是项目成功的关键因素。GitHub 加速计划下的 pig 项目作为一款优秀的开源解决方案，通过 ESLint 与 Prettier 的强强联合，为开发者打造了高效、规范的前端开发环境。本文将详细介绍如何在 pig 项目中配置这两个强大工具，让你的代码既规范又美观，轻松应对复杂的前端工程化挑战。

为什么选择 ESLint+Prettier 组合？

ESLint 和 Prettier 是前端工程化中不可或缺的两款工具，它们各自有着独特的优势：

• ESLint：作为一款代码检查工具，它能够帮助开发者发现代码中的潜在问题，如语法错误、未使用的变量、不符合最佳实践的代码等。通过配置规则，ESLint 可以强制团队遵循一致的编码规范，提高代码质量。

• Prettier：则专注于代码格式化，它能够自动调整代码的缩进、换行、空格等格式，确保代码风格的统一。Prettier 不关心代码的逻辑错误，只负责代码的美观度，让开发者可以专注于业务逻辑的实现。

将 ESLint 和 Prettier 结合使用，可以充分发挥两者的优势，实现代码质量和代码风格的双重保障。

配置前的准备工作

在开始配置 ESLint 和 Prettier 之前，需要确保你的开发环境中已经安装了 Node.js 和 npm。如果你还没有安装，可以访问 Node.js 官网下载并安装。

接下来，你需要克隆 pig 项目的代码仓库。打开终端，执行以下命令：

git clone https://gitcode.com/gh_mirrors/pig/pig

克隆完成后，进入项目目录：

cd pig

ESLint 的配置步骤

安装 ESLint 相关依赖

在项目根目录下，打开终端，执行以下命令安装 ESLint 及其相关插件：

npm install eslint --save-dev

创建 ESLint 配置文件

在项目根目录下创建 .eslintrc.js 文件，这是 ESLint 的配置文件。你可以根据项目的需求自定义规则，以下是一个基本的配置示例：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react', 'react-hooks'],
  rules: {
    'react/prop-types': 'off',
    'no-console': 'warn',
    'no-unused-vars': 'error',
  },
};

在这个配置中，我们指定了环境（browser、es2021、node）、继承的规则集（eslint:recommended、plugin:react/recommended 等）、解析器选项以及自定义的规则。你可以根据项目的实际情况修改这些配置。

Prettier 的配置步骤

安装 Prettier 相关依赖

同样在项目根目录下，执行以下命令安装 Prettier：

npm install prettier --save-dev

创建 Prettier 配置文件

在项目根目录下创建 .prettierrc 文件，用于配置 Prettier 的格式化规则。以下是一个常见的配置示例：

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always",
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "vueIndentScriptAndStyle": false,
  "endOfLine": "lf",
  "embeddedLanguageFormatting": "auto"
}

你可以根据自己的喜好和项目的要求调整这些配置项。

解决 ESLint 和 Prettier 的冲突

由于 ESLint 和 Prettier 都有自己的代码格式化规则，可能会出现冲突。为了解决这个问题，我们需要安装 eslint-config-prettier 和 eslint-plugin-prettier 这两个插件。

执行以下命令安装：

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

然后，修改 .eslintrc.js 文件，在 extends 数组中添加 prettier 和 plugin:prettier/recommended：

extends: [
  'eslint:recommended',
  'plugin:react/recommended',
  'plugin:react-hooks/recommended',
  'prettier',
  'plugin:prettier/recommended',
],

这样，ESLint 就会禁用与 Prettier 冲突的规则，确保两者能够和谐共处。

在项目中集成 ESLint 和 Prettier

添加脚本命令

在 package.json 文件中添加以下脚本命令，方便我们运行 ESLint 和 Prettier：

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

• npm run lint：检查项目中的代码是否符合 ESLint 规则。
• npm run lint:fix：自动修复部分 ESLint 可以修复的问题。
• npm run format：使用 Prettier 格式化项目中的所有文件。

在编辑器中集成

为了提高开发效率，我们可以在编辑器中集成 ESLint 和 Prettier 插件，实现实时检查和自动格式化。以 VS Code 为例，你可以安装以下插件：

• ESLint
• Prettier - Code formatter

安装完成后，在 VS Code 的设置中添加以下配置：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.prettier": true
  },
  "prettier.requireConfig": true
}

这样，当你保存文件时，VS Code 会自动使用 ESLint 和 Prettier 对代码进行修复和格式化。

总结

通过本文的介绍，相信你已经了解了如何在 pig 项目中配置 ESLint 和 Prettier。这两个工具的结合使用，能够极大地提高代码质量和开发效率，让你的前端开发工作更加轻松愉快。赶快行动起来，为你的项目配置 ESLint 和 Prettier 吧！

【免费下载链接】pig 项目地址: https://gitcode.com/gh_mirrors/pig/pig