在前端项目中实现代码格式化与规范化的工程化配置

SQ有空就喝水
586 阅读5分钟

在前端开发中，保持代码的一致性和规范性是提高团队协作效率的重要手段之一。本文将详细介绍如何使用 .editorconfig、Prettier 和 ESLint 等工具，在 VS Code 中实现代码的自动格式化与规范化，并最终将这些配置工程化。

一、前置知识

配置文件概念

在 Unix 系统中，配置文件通常以 . 开头，这使得它们在文件系统中默认处于隐藏状态。通常，配置文件中的 "rc" 是 "run commands" 的缩写，表示运行命令的配置文件。.eslintrc.js 和 .prettierrc.js 就是这种配置文件的典型示例。

配置文件优先级

在 VS Code 中，配置文件的优先级如下：

  1. 独立配置文件
  2. VS Code 工作区配置
  3. VS Code 用户配置

在进行配置文件类型切换时，建议重启 VS Code 以确保新配置生效。

二、EditorConfig: 统一编辑器配置

EditorConfig 通过在项目根目录中增加一个 .editorconfig 文件，帮助团队统一编辑器的配置。

配置示例

root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.js]
quote_type = single

[*.{html,less,css,json}]
quote_type = double

[package.json]
indent_size = 2

安装插件

在 VS Code 中安装 EditorConfig for VS Code 插件。虽然 .editorconfig 支持很多属性，但在 VS Code 中仅支持以下属性：

image.png

  • indent_style
  • indent_size
  • tab_width
  • end_of_line (on save)
  • insert_final_newline (on save)
  • trim_trailing_whitespace (on save)

使用

配置完成后，可以通过右键选择“格式化文档”或使用快捷键 Shift + Alt + F 调用 VS Code 默认的代码格式化工具，按 .editorconfig 的配置进行格式化。

三、Prettier: 强大的代码格式化工具

Prettier 是一个更强大的格式化工具，适合于需要更复杂的代码格式化规则的场景。

配置 .prettierrc.js

在项目根目录创建 .prettierrc.js 文件：

module.exports = {
    printWidth: 120,
    tabWidth: 4,
    semi: true,
    singleQuote: true,
    quoteProps: "consistent",
    trailingComma: "es5",
    htmlWhitespaceSensitivity: "ignore",
};

安装插件

安装 Prettier 的 VS Code 插件，并启用。在右键菜单中选择“使用...格式化文档”时，确认上方弹出的选择框中有 Prettier 选项，表示插件已成功安装。

image.png

使用

推荐将 Prettier 设置为默认格式化程序。右键选择“使用...格式化文档”，然后配置默认格式化程序为 Prettier。以后即可直接使用快捷键或右键菜单进行格式化。

使用命令行格式化

通过命令行检查和格式化代码：

# 检查当前文件夹的文件是否已经格式化
npx prettier --check .

# 按设置的格式对当前文件夹的文件进行格式化
npx prettier --write .

常见问题

如遇到 Prettier 不生效的情况，检查配置文件是否与项目的模块系统冲突。例如，.prettierrc.js 与 ES Module 项目可能不兼容，解决方案是新建 .prettierignore 文件忽略 .prettierrc.js，或将 .prettierrc.js 改为 JSON 格式。

四、ESLint: 代码规范化工具

ESLint 专注于代码质量和代码规范，能够与 Prettier 配合使用，实现代码的全面规范化。

配置 .eslintrc.js

在项目根目录创建 .eslintrc.js 文件：

module.exports = {
    parserOptions: {
        ecmaVersion: 2020,
        sourceType: 'module',
    },
    rules: {
        'no-unused-vars': 'warn',
        'operator-linebreak': ['error', 'before'],
        'quotes': ['error', 'single'],
    },
};

安装插件

安装 ESLint 的 VS Code 插件，并启用。打开 JS 文件时，ESLint 会标记出代码中的错误并给出详细提示。

image.png

解决 ESLint 和 Prettier 的冲突

ESLint 和 Prettier 之间可能存在冲突，尤其是在代码格式相关的规则上。可以通过以下方式解决：

  1. 使用 eslint-config-prettier 和 eslint-plugin-prettier 插件：

    • eslint-config-prettier 关闭 ESLint 中与 Prettier 冲突的规则。
    • eslint-plugin-prettier 使 ESLint 能够使用 Prettier 格式化代码。

    安装命令：

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

  2. 使用 prettier-eslint 插件： 先执行 Prettier 格式化，再执行 ESLint 修复。这种方式适合需要严格控制代码规范的团队。

image.png

安装命令：

   npm install --save-dev prettier-eslint

五、自动格式化与工程化

自动格式化

在 VS Code 设置中勾选保存时格式化选项（Format On Save），并关闭粘贴和输入时格式化的选项。这会在项目的 .vscode 文件夹中生成 settings.json 文件，保存了相关配置。

配置保存到 Git

将 .vscode 配置文件夹提交到 Git 仓库，使每个开发者在克隆项目后都能自动加载这些设置。

六、总结

实现代码自动格式化与规范化的流程如下：

  1. 配置 .editorconfig 并安装相关插件。
  2. 配置 Prettier 并安装相关插件（可选）。
  3. 配置 ESLint 并安装相关插件。
  4. 处理 ESLint 和 Prettier 的冲突。
  5. 启用保存时自动格式化。
  6. 将配置提交到 Git 仓库，供团队共享。

通过以上步骤，前端项目的代码格式化和规范化得以实现工程化，让每个开发者都能专注于业务逻辑的实现，而无需担心代码风格的统一问题。v

参考

eslint-plugin-prettier

eslint-config-prettier

prettier-eslint

.editorconfig配置统一编辑器配置

代码美化神器——Prettier使用详解

用Prettier和ESLint自动格式化修复JavaScript代码

解决Eslint 和 Prettier 之间的冲突 - 掘金 (juejin.cn)

前端工程化：VS Code 代码自动格式化配置

avatar
文章
阅读
粉丝