Prettier 配置生成器

可视化配置 Prettier 代码格式化选项,实时预览效果并生成配置文件

生成的 .prettierrc

{
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "arrowParens": "always",
  "printWidth": 80,
  "useTabs": false
}

格式化预览

import { ref, computed } from 'vue'

const greeting = 'Hello'
const items = [ 'a', 'b', 'c', ]

const fn = (x) => {
  return items.filter((x) => (x) !== '')
}

Prettier 配置生成器使用说明

主要功能

  • 可视化配置所有 Prettier 选项
  • 实时预览代码格式化效果
  • 生成 .prettierrc 配置文件
  • 支持 JSON 格式输出

常用配置

  • Vue/React 项目通常使用 2 空格缩进
  • 推荐启用尾逗号(trailingComma: all)
  • 中文项目可适当增大行宽到 100-120