如何在 webpack 中使用 ESLint 和 Prettier 进行代码格式化-JavaScript中文网-JavaScript教程资源分享门户

如何在 webpack 中使用 ESLint 和 Prettier 进行代码格式化

在前端开发过程中，一个整洁的代码是很重要的，因为它能够提高代码的可维护性并减少编写错误的数量。为了实现这一目标，我们可以使用一些自动化工具来帮助我们自动格式化代码。本文将介绍如何在 webpack 中使用两个工具 ESLint 和 Prettier 来格式化你的 JavaScript 代码。

安装所需的依赖

首先，我们需要在本地安装一些 Node.js 模块，包括 webpack、eslint、eslint-config-prettier 和 prettier。可以使用 npm 或者 yarn 来安装这些模块：

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

# 或者

yarn add webpack eslint eslint-config-prettier prettier --dev

配置 ESLint

接下来，我们需要配置 ESLint。我们可以在项目根目录下创建一个 .eslintrc.js 文件来设置规则和其他配置。例如，以下是一个常见的 .eslintrc.js 文件：

// www.javascriptcn.com code example
module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "prettier/@typescript-eslint",
    "prettier/react",
  ],
  plugins: ["react", "@typescript-eslint"],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2021,
    sourceType: "module",
  },
  rules: {
    semi: ["error", "never"],
    "react/react-in-jsx-scope": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/ban-types": [
      "error",
      {
        extendDefaults: true,
        types: {
          '{}': false,
        },
      },
    ],
  },
};

此文件中，我们使用 extends 属性来扩展已有的规则，这些规则是从 eslint-plugin-react、eslint-plugin-import、@typescript-eslint/eslint-plugin 和 prettier 中继承而来的。我们还使用了 plugins 属性来指定需要加载的插件，这里我们指定了 eslint-plugin-react 和 @typescript-eslint。parser 属性指定我们使用的解析器是 @typescript-eslint/parser，parserOptions 属性指定我们需要启用的一些语言特性，例如支持 JSX。

在上面的规则中，我们禁用了 react/react-in-jsx-scope 规则，重新设置了一些禁用的规则，例如禁用了 @typescript-eslint/explicit-module-boundary-types 和 @typescript-eslint/no-explicit-any 等规则。同时，我们还添加了一些新的规则，例如 @typescript-eslint/ban-types，以进一步加强类型安全。

配置 Prettier

现在，我们需要配置 Prettier。我们可以在项目根目录下创建一个 .prettierrc.js 文件来设置规则和其他配置。例如，以下是一个常见的 .prettierrc.js 文件配置：

module.exports = {
  semi: false,
  tabWidth: 2,
  printWidth: 100,
  singleQuote: true,
  trailingComma: "es5",
};

在这个文件中，我们将一些通用的 Prettier 选项导出。这些选项包括 semi、tabWidth、printWidth、singleQuote 和 trailingComma。

配置 webpack

安装好模块并配置好 ESLint 和 Prettier 后，我们需要将它们集成到 webpack 中。我们需要使用相应的 loader 将代码传递给它们。以下是一个示例 webpack.config.js 文件的配置：

// www.javascriptcn.com code example
const path = require("path");
const ESLintPlugin = require("eslint-webpack-plugin");
const PrettierPlugin = require("prettier-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
          },
          {
            loader: "eslint-loader",
            options: {
              fix: true,
            },
          },
          {
            loader: "prettier-loader",
            options: {
              parser: "babel",
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new ESLintPlugin(),
    new PrettierPlugin(),
  ],
};

在该文件的 module.rules 部分内，使用了 eslint-loader 和 prettier-loader。其中，eslint-loader 将代码传递给 ESLint 进行检查，并在有必要时自动修复语法错误。prettier-loader 在 eslint-loader 之后运行，利用 Prettier 进行格式化，使代码的风格更加一致。同时，我们使用了 PrettierPlugin 和 ESLintPlugin 两个插件，使 webpack 在打包时可以运行 eslint 验证和 Prettier 格式化。

运行代码

现在，我们已经完成了所有必要的设置并安装了必要的依赖项。可以运行 webpack 命令构建应用程序，并启用自动格式化功能。如以下命令：

npx webpack

如果你希望通过自动修复语法错误来格式化代码，可以使用 --fix 选项，如以下示例：

npx eslint --fix src/index.js

这可以在 src/index.js 中使用 eslint 进行代码检查和自动修复，从而自动格式化你的代码。

本文介绍了如何使用 webpack 中的 ESLint 和 Prettier 自动格式化你的 JavaScript 代码。通过配置 ESLint 和 Prettier，然后使用 eslint-loader 和 prettier-loader 在 webpack 中强制执行这些规则，可以改善代码的清晰度和可读性。这种自动化的风格规范将使开发人员能够更容易地编写和维护代码，减少了在编写和共享代码时的潜在错误。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67cfea3ce46428fe9ec37011

如何在 webpack 中使用 ESLint 和 Prettier 进行代码格式化

接着读