@faktion-com/ prettier-config (英语)

Faktion 项目共享的 Pretier 配置包 。 这个包为所有Faktion寄存器和项目提供了一致的代码格式化规则.

特征

• 统一格式:确保所有代码遵循相同的格式标准
• 尾风 CSS 支持页:1 prettier-plugin-tailwindcss 用于优化尾风类排序
• 现代默认: 配置了现代 JavaScript/ TypeScript 开发的合理默认
• 简单整合: 任何项目的简单设置程序

安装

将软件包安装为 dev 依赖 :

npm install --save-dev @faktion-com/prettier-config
# or
yarn add --dev @faktion-com/prettier-config
# or
pnpm add --save-dev @faktion-com/prettier-config

使用量

基本设置

创建一个 .prettierrc.js 在工程根中的文件 :

module.exports = require("@faktion-com/prettier-config/base");

或者如果你在使用ES模块, 创建一个 .prettierrc.mjs数字 :

import baseConfig from "@faktion-com/prettier-config/base";
export default baseConfig;

Tailwind css 特定设置

对于带有自定义尾风配置的项目,您需要在指向尾风的配置中添加属性 . config.js 文件,这样在添加自定义类时,它们也会被尾风插件命令

import reactConfig from "@faktion-com/prettier-config/react";
export default {
    ...reactConfig,
    "tailwindConfig": "./apps/frontend/tailwind.config.js"
} as const

软件包.json 配置

或者,您可以直接将配置添加到您的 package.json数字 :

{
  "prettier": "@faktion-com/prettier-config/base"
}

配置

基础配置包括以下设置:

• 轨迹逗号: ES5样式
• 标签宽度: 2 个空格
• 分号: 永远
• 引号单引号
• JSX引述单引号
• 标签: 仅空格
• 打印宽度: 80个字符
• 括号间距已启用
• 括号同行已启用
• 箭头函数括号: 永远
• 每行单属性已启用
• 结束: LF (Unix 样式)
• 插件: 包含 Tailwind CSS 插件

IDE 整合

VS 代码

1. 安装 Pretier 扩展
2. 将 Pretier 设置为默认物质
3. 保存时启用格式( 可选)

添加到您的 VS 代码设置 :

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

其他编辑器

大多数现代编辑器都自动支持Pretier配置文件. 配置将在您有 .prettierrc.js 或者说 package.json 配置您的项目 .

脚本

将这些脚本添加到您的 package.json 用于方便的格式 :

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

忽略文件

创建一个 .prettierignore 用于排除格式化文件的文件 :

node_modules
dist
build