prettier 配置选项

// .prettierrc.js
module.exports = {
  semi: true,
  singleQuote: true,
  printWidth: 100,
  // 可以添加注释
  overrides: [
    {
      files: "*.test.js",
      options: { printWidth: 120 }
    }
  ]
};

// .prettierrc.cjs
module.exports = {
  semi: true,
  singleQuote: true,
  printWidth: 100
};

// .prettierrc.mjs
export default {
  semi: true,
  singleQuote: true,
  printWidth: 100
};

// .prettierrc.mjs
import baseConfig from './prettier.base.mjs';

export default {
  ...baseConfig,
  printWidth: 120
};

// prettier.config.js
module.exports = {
  semi: true
};

// .prettierrc.js
module.exports = {
  semi: true
};

// ❌ .prettierrc.js - 错误！会被当作 ES Module
module.exports = {
  semi: true
};
// 报错：SyntaxError: Unexpected token 'export'

// ✅ .prettierrc.cjs - 正确！明确使用 CommonJS
module.exports = {
  semi: true
};

// ✅ .prettierrc.mjs - 也可以，使用 ES Module
export default {
  semi: true
};

// ✅ .prettierrc.js - 使用 CommonJS
module.exports = {
  semi: true
};

// ✅ .prettierrc.cjs - 也可以
module.exports = {
  semi: true
};

// ✅ .prettierrc.mjs - 使用 ES Module
export default {
  semi: true
};

// .prettierrc.js
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  semi: true,
  singleQuote: true,
  // 生产环境移除注释，开发环境保留
  printWidth: isProduction ? 80 : 120
};

// printWidth: 80 (默认)
const user = {
  firstName: "John",
  lastName: "Doe",
  email: "john.doe@example.com",
  address: "123 Main Street"
};

function calculateTotal(price, quantity, discount) {
  return price * quantity - discount;
}

// printWidth: 120
const user = { firstName: "John", lastName: "Doe", email: "john.doe@example.com", address: "123 Main Street" };

function calculateTotal(price, quantity, discount) { return price * quantity - discount; }

// printWidth: 40
const user = {
  firstName: "John",
  lastName: "Doe",
  email:
    "john.doe@example.com",
  address:
    "123 Main Street"
};

function calculateTotal(
  price,
  quantity,
  discount
) {
  return (
    price * quantity -
    discount
  );
}

// tabWidth: 2
function greet(name) {
  if (name) {
    console.log(`Hello ${name}`);
  }
}

// tabWidth: 4
function greet(name) {
    if (name) {
        console.log(`Hello ${name}`);
    }
}

// useTabs: false（空格）
function calculate() {
··return 42;  // 2个空格
}

// useTabs: true（Tab）
function calculate() {
→ return 42;  // 1个Tab字符
}

// semi: true
const name = "John";
const age = 30;

function greet() {
  console.log("Hello");
}

export default App;

// semi: false
const name = "John"
const age = 30

function greet() {
  console.log("Hello")
}

export default App

// ❌ 可能出现的问题
const result = getData()
[1, 2, 3].forEach(n => console.log(n))
// 实际执行：const result = getData()[1, 2, 3].forEach(...)

// ✅ 需要手动添加分号
const result = getData()
;[1, 2, 3].forEach(n => console.log(n))

// singleQuote: false（双引号）
const message = "Hello World";
const template = "User: John";
import Button from "./components/Button";

// singleQuote: true（单引号）
const message = 'Hello World';
const template = 'User: John';
import Button from './components/Button';

// 注意：字符串内包含引号时会自动选择
const text1 = "It's a beautiful day";  // 包含单引号，使用双引号
const text2 = 'He said "Hello"';       // 包含双引号，使用单引号

// quoteProps: "as-needed"（默认）
const obj = {
  name: "John",
  age: 30,
  "first-name": "John",  // 必须用引号（包含特殊字符）
  "123": "number"        // 必须用引号（数字开头）
};

// quoteProps: "consistent"
const obj = {
  "name": "John",
  "age": 30,
  "first-name": "John",
  "123": "number"
};

// quoteProps: "preserve"（保持原样）
const obj = {
  "name": "John",  // 如果原来有引号，保留
  age: 30,         // 如果原来没有，不加
  "first-name": "John"
};

// trailingComma: "none"
const arr = [
  1,
  2,
  3
];

const obj = {
  name: "John",
  age: 30
};

function greet(
  firstName,
  lastName
) {}

// trailingComma: "es5"（推荐）
const arr = [
  1,
  2,
  3,  // ✅ 数组添加
];

const obj = {
  name: "John",
  age: 30,  // ✅ 对象添加
};

function greet(
  firstName,
  lastName  // ❌ 函数参数不添加（ES5 不支持）
) {}

// trailingComma: "all"
const arr = [
  1,
  2,
  3,
];

const obj = {
  name: "John",
  age: 30,
};

function greet(
  firstName,
  lastName,  // ✅ 函数参数也添加（ES2017+）
) {}

// ✅ 使用尾随逗号 - Git diff 更清晰
const user = {
  name: "John",
  age: 30,
+ email: "john@example.com",  // 只显示这一行变更
};

// ❌ 不使用尾随逗号 - Git diff 有两行变更
const user = {
  name: "John",
- age: 30
+ age: 30,
+ email: "john@example.com"
};

// bracketSpacing: true（默认）
const obj = { name: "John", age: 30 };
import { useState, useEffect } from 'react';

// bracketSpacing: false
const obj = {name: "John", age: 30};
import {useState, useEffect} from 'react';

// arrowParens: "always"
const greet = (name) => console.log(name);
const double = (x) => x * 2;
const log = (msg) => {
  console.log(msg);
};

// async 函数
const fetchData = async (url) => {
  const res = await fetch(url);
  return res.json();
};

// arrowParens: "avoid"
const greet = name => console.log(name);
const double = x => x * 2;
const log = msg => {
  console.log(msg);
};

// async 仍需要括号（语法要求）
const fetchData = async (url) => {
  const res = await fetch(url);
  return res.json();
};

// 多个参数必须用括号
const add = (a, b) => a + b;

// 使用解构必须用括号
const getName = ({ name }) => name;

// endOfLine: "lf" (Unix/Linux/macOS)
const name = "John";\n
const age = 30;\n

// endOfLine: "crlf" (Windows)
const name = "John";\r\n
const age = 30;\r\n

// eslint.config.js (ESLint 9+)
import prettier from 'eslint-plugin-prettier';
import prettierConfig from 'eslint-config-prettier';

export default [
  prettierConfig,
  {
    plugins: {
      prettier
    },
    rules: {
      'prettier/prettier': 'error'
    }
  }
];

// .eslintrc.js (ESLint 8)
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended'  // 必须放在最后
  ],
  rules: {
    'prettier/prettier': 'error'
  }
};

// 如果某段代码不想被格式化
// prettier-ignore
const matrix = [
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
];

// prettier-ignore
function test() { return 'not formatted'; }