@easyv/prettier-config

一个开箱即用的 Prettier 配置，集成了自动排序导入和 Tailwind CSS 类名排序功能。

特性

• ✨ 开箱即用，无需额外配置
• 📦 自动排序导入语句
• 🎨 自动排序 Tailwind CSS 类名
• 🔧 统一的代码格式化规范

安装

# 使用 pnpm
pnpm add -D @easyv/prettier-config prettier

# 使用 npm
npm install -D @easyv/prettier-config prettier

# 使用 yarn
yarn add -D @easyv/prettier-config prettier

使用方法

方式一：在 package.json 中引用

在你的 package.json 文件中添加：

{
  "prettier": "@easyv/prettier-config"
}

方式二：创建 prettier.config.js 文件

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

export { default } from '@easyv/prettier-config';

方式三：扩展配置

如果你需要覆盖某些配置项，可以这样做：

import baseConfig from '@easyv/prettier-config';

export default {
  ...baseConfig,
  printWidth: 120, // 覆盖默认的 100
  semi: false,     // 添加其他配置
};

配置详情

基础配置

| 配置项 | 值 | 说明 | |--------|-----|------| | printWidth | 100 | 每行代码的最大长度 |

插件

本配置集成了以下插件：

1. @ianvs/prettier-plugin-sort-imports

自动按照以下顺序排序导入语句：

1. React 核心库 (react)
2. Node.js 内置模块 (fs, path 等)
3. 第三方依赖包
4. 项目内部模块 (@/ 别名)
5. 相对路径导入 (./ , ../)
6. 样式文件 (.css, .less, .scss)

示例：

// 格式化前
import './styles.css';
import { Button } from '@/components';
import fs from 'fs';
import { useState } from 'react';
import axios from 'axios';

// 格式化后
import { useState } from 'react';
import fs from 'fs';
import axios from 'axios';
import { Button } from '@/components';
import './styles.css';

2. prettier-plugin-tailwindcss

自动排序 Tailwind CSS 类名，使其符合推荐的顺序。

示例：

// 格式化前
<div className="text-center p-4 bg-blue-500 hover:bg-blue-600">

// 格式化后
<div className="bg-blue-500 p-4 text-center hover:bg-blue-600">

添加格式化脚本

在 package.json 中添加以下脚本：

{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

编辑器集成

VS Code

1. 安装 Prettier - Code formatter 扩展

2. 在 .vscode/settings.json 中添加：

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

WebStorm / IntelliJ IDEA

1. 前往 Settings/Preferences → Languages & Frameworks → JavaScript → Prettier
2. 选择 Prettier 包位置
3. 勾选 On save 和 On 'Reformat Code' action

配合其他工具使用

与 ESLint 一起使用

确保安装 eslint-config-prettier 以避免与 ESLint 的格式化规则冲突：

pnpm add -D eslint-config-prettier

在 .eslintrc 中添加：

{
  "extends": [
    "other-config",
    "prettier" // 确保放在最后
  ]
}