@brickjs-fe/brick-prettier-config

适用于 Vue3 + TypeScript 项目的 Prettier 配置

📖 项目介绍

@brickjs-fe/brick-prettier-config 是 BrickJs 项目提供的 Prettier 配置包，专为 Vue3 + TypeScript 项目设计。该配置提供了统一的代码格式化标准，确保代码风格的一致性。

✨ 特性

• 🎯 Vue3 支持: 完整的 Vue3 单文件组件支持
• 🔧 TypeScript 集成: 全面的 TypeScript 代码格式化
• 🎨 统一风格: 与 ESLint 规则完美兼容
• 📝 详细注释: 每个配置项都有详细的中文注释说明
• 🚫 禁止末尾逗号: 内置禁止末尾逗号的规则
• 🔄 灵活配置: 支持覆盖和自定义规则

🛠️ 技术栈

• Prettier: 代码格式化工具
• Vue: Vue 单文件组件支持
• TypeScript: TypeScript 代码格式化

🚀 快速开始

安装

# 使用 pnpm 安装
pnpm add -D @brickjs-fe/brick-prettier-config

# 或使用 npm 安装
npm install -D @brickjs-fe/brick-prettier-config

# 或使用 yarn 安装
yarn add -D @brickjs-fe/brick-prettier-config

# 或使用 bun 安装
bun add -D @brickjs-fe/brick-prettier-config

基本使用

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

module.exports = require("@brickjs-fe/brick-prettier-config");

在 package.json 中使用

{
  "prettier": "@brickjs-fe/brick-prettier-config"
}

使用 ES 模块

// .prettierrc.mjs
import config from "@brickjs-fe/brick-prettier-config";

export default config;

📋 配置说明

基础格式化选项

• semi: 语句末尾添加分号
• singleQuote: 使用单引号而不是双引号
• quoteProps: 仅在需要时给对象属性加引号
• jsxSingleQuote: JSX 中使用单引号

代码风格

• trailingComma: 禁止末尾逗号，与 ESLint 规则保持一致
• printWidth: 每行最大字符数 (100)
• tabWidth: 缩进空格数 (2)
• useTabs: 使用空格而不是制表符
• endOfLine: 使用 LF 作为行结束符

括号和空格

• bracketSpacing: 对象括号内添加空格
• bracketSameLine: 将多行 JSX 元素的 > 放在下一行
• arrowParens: 箭头函数参数只有一个时省略括号

其他选项

• proseWrap: 不自动换行 prose
• htmlWhitespaceSensitivity: HTML 空白字符敏感度
• vueIndentScriptAndStyle: Vue 文件中不缩进 script 和 style 标签
• embeddedLanguageFormatting: 自动格式化嵌入的语言

文件特定配置

• Markdown 文件: 保持原始换行，80 字符换行
• JSON 文件: 200 字符换行
• YAML 文件: 2 个空格缩进

🔧 配置选项

环境配置

module.exports = {
  ...require("@brickjs-fe/brick-prettier-config"),
  // 可以在这里添加项目特定的配置
  printWidth: 120, // 覆盖默认的 100 字符
};

规则覆盖

module.exports = {
  ...require("@brickjs-fe/brick-prettier-config"),
  rules: {
    // 覆盖特定规则
    semi: false, // 不使用分号
    singleQuote: false, // 使用双引号
  },
};

📁 文件支持

该配置支持以下文件类型：

• .js - JavaScript 文件
• .jsx - React JSX 文件
• .ts - TypeScript 文件
• .tsx - TypeScript JSX 文件
• .vue - Vue 单文件组件
• .json - JSON 文件
• .md - Markdown 文件
• .yml - YAML 文件
• .css - CSS 文件
• .scss - SCSS 文件
• .sass - SASS 文件
• .less - Less 文件

🎯 最佳实践

1. 项目结构

project/
├── .prettierrc.js         # Prettier 配置
├── .eslintrc.js           # ESLint 配置
├── src/                   # 源代码目录
│   ├── components/        # Vue 组件
│   ├── views/            # 页面组件
│   ├── utils/            # 工具函数
│   └── types/            # 类型定义
└── package.json          # 项目配置

2. 代码示例

<template>
  <div class="example">
    <h1>{{ title }}</h1>
    <button @click="handleClick">点击我</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

// 响应式数据
const title = ref("Hello World");

// 事件处理函数
const handleClick = () => {
  console.log("按钮被点击了");
};
</script>

<style scoped>
.example {
  padding: 20px;
}
</style>

3. TypeScript 类型定义

// types/index.ts
export interface User {
  id: number;
  name: string;
  email: string;
}

export interface ApiResponse<T> {
  data: T;
  message: string;
  success: boolean;
}

🔍 故障排除

常见问题

1. 规则冲突: 确保 Prettier 配置与 ESLint 规则兼容
2. 文件格式: 检查文件扩展名是否被支持
3. 编辑器集成: 确保编辑器已安装 Prettier 插件

调试技巧

# 检查 Prettier 配置
npx prettier --print-config src/main.ts

# 检查特定文件的格式
npx prettier --check src/components/HelloWorld.vue

# 运行 Prettier 格式化
npx prettier --write src --ext .js,.ts,.vue

🤝 贡献指南

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'feat: add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开 Pull Request

📄 许可证

本项目基于 MIT 许可证开源。

👥 维护者

• brickFE - 项目维护者

🙏 致谢

感谢以下开源项目的支持：

• Prettier - 代码格式化工具
• Vue.js - 渐进式 JavaScript 框架
• TypeScript - 静态类型检查

如果这个项目对你有帮助，请给它一个 ⭐️

报告问题 · 提出建议 · 贡献代码