prettier 生态

• prettier 官方文档
• prettier 中文文档
• prettier-plugin-tailwindcss 配合 unocss 做格式化, 目前 unocss 没有相应插件
• prettier-plugin-organize-imports 按需排序 import

安装

pnpm add prettier prettier-plugin-tailwindcss prettier-plugin-organize-imports -D

配置

• 根目录下创建 prettier.config.mjs 文件
• prettier-plugin-tailwindcss 必须放在最后, 兼容问题

/** @type {import('prettier').Config} */
export default {
  endOfLine: 'auto',
  plugins: ['prettier-plugin-organize-imports', 'prettier-plugin-tailwindcss'],
  printWidth: 160,
  proseWrap: 'never',
  semi: true,
  singleQuote: true,
  trailingComma: 'all',
}

{
  "scripts": {
    "prettier": "prettier . --write --log-level warn"
  }
}