Frontend Bootcamp前端代码格式化：Prettier与EditorConfig配置

Frontend Bootcamp前端代码格式化：Prettier与EditorConfig配置

【免费下载链接】frontend-bootcamp Frontend Workshop from HTML/CSS/JS to TypeScript/React/Redux 项目地址: https://gitcode.com/gh_mirrors/fr/frontend-bootcamp

在多人协作的前端项目中，代码格式化不一致常常导致团队成员间的沟通成本增加，甚至引发代码审查冲突。本文将详细介绍如何在Frontend Bootcamp项目中配置Prettier与EditorConfig，通过自动化工具统一代码风格，提升开发效率。

Prettier配置详解

Prettier是一款专注于代码格式化的工具，能够自动调整代码的缩进、换行、引号等格式，确保团队代码风格一致。

项目Prettier配置文件

项目根目录下的prettier.config.js文件定义了格式化规则：

module.exports = {
  singleQuote: true,
  tabWidth: 2,
  printWidth: 140
};

上述配置指定了三个核心规则：

• singleQuote: true：使用单引号而非双引号
• tabWidth: 2：缩进使用2个空格
• printWidth: 140：每行代码最大长度为140个字符

集成到开发流程

虽然项目中未直接配置prettier脚本，但可通过以下方式运行：

npx prettier --write "**/*.{js,jsx,ts,tsx,css,md}"

该命令会递归格式化项目中所有指定类型的文件。

EditorConfig配置

EditorConfig是一个跨编辑器的代码风格统一工具，通过配置文件.editorconfig定义缩进风格、换行符等基础格式。

典型配置示例

尽管当前项目未包含.editorconfig文件，但根据项目结构和TypeScript特性，推荐以下配置：

# EditorConfig is awesome: https://EditorConfig.org

# 根目录配置，停止向上查找
root = true

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

[*.md]
trim_trailing_whitespace = false

配置说明

配置项	含义	项目推荐值
indent_style	缩进风格	space（空格）
indent_size	缩进大小	2（与Prettier保持一致）
end_of_line	换行符	lf（Unix风格）
charset	字符集	utf-8
trim_trailing_whitespace	移除行尾空格	true（Markdown文件设为false）
insert_final_newline	文件末尾添加空行	true

格式化工具集成方案

VS Code配置

为确保所有团队成员使用一致的格式化工具，推荐在VS Code中安装以下插件：

1. Prettier - Code formatter
2. EditorConfig for VS Code

并在工作区设置中添加：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.insertSpaces": true,
  "editor.tabSize": 2
}

代码格式化效果对比

以下是格式化前后的代码对比：

格式化前：

function   add(a ,b){
return a+b;
}

格式化后：

function add(a, b) {
  return a + b;
}

项目中的格式化实践

与TypeScript集成

项目中使用TypeScript作为主要开发语言，Prettier能很好地支持TS/TSX文件格式化。以step2-01/demo/src/interfaces/index.ts为例，格式化后的代码：

interface Todo {
  id: string;
  title: string;
  completed: boolean;
}

function createTodo(title: string): Todo {
  return {
    id: '1',
    title,
    completed: false
  };
}

组件文件格式化

React组件文件（如step1-04/final/src/components/Button.tsx）格式化后：

import * as React from 'react';
import './Button.css';

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

export const Button: React.FC<ButtonProps> = ({ label, onClick, disabled = false }) => {
  return (
    <button className="button" onClick={onClick} disabled={disabled}>
      {label}
    </button>
  );
};

总结与最佳实践

1. 工具选择：Prettier负责代码风格美化，EditorConfig处理基础格式，两者配合使用
2. 自动化：配置编辑器在保存时自动格式化，减少手动操作
3. 团队协作：将格式化配置文件纳入版本控制，确保所有成员使用相同规则
4. 渐进式集成：新项目可直接配置，老项目可分模块逐步应用格式化

通过本文介绍的配置方案，团队可以消除代码格式争议，专注于功能开发，提高协作效率。建议将这些配置应用到step1-03至step2-06等包含JavaScript/TypeScript代码的模块中，保持整个项目代码风格的一致性。

【免费下载链接】frontend-bootcamp Frontend Workshop from HTML/CSS/JS to TypeScript/React/Redux 项目地址: https://gitcode.com/gh_mirrors/fr/frontend-bootcamp