설치

pnpm add -D prettier
# with plugin
pnpm add -D prettier @ianvs/prettier-plugin-sort-imports prettier-plugin-sh

설정 파일

Configuration File · Prettier

• .prettierrc.yml로 사용중 (toml은 intellij 계열에서 먼가 동작이 이상함)
• 상위 디렉토리의 설정파일도 인식함

prettier.config.mjs 예시

/** @type {import("prettier").Config} */
const config = {
  // default options (explicitly set options)
  printWidth: 80,
  trailingComma: "all",
  singleQuote: false,
  semi: true,
  arrowParens: "always",

  // plugins
  plugins: ["@ianvs/prettier-plugin-sort-imports", "prettier-plugin-sh"],

  importOrder: [
    "<BUILTIN_MODULES>",
    "<THIRD_PARTY_MODULES>",
    "^@/(.*)$",
    "^@test/(.*)$",
    "^[./]",
    "^public/(.*)$",
  ],
  importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
  importOrderTypeScriptVersion: "5.0.0",
};

export default config;

• 디폴트값도 많이 포함되어있음 (가끔 상위 디렉토리에 있는 prettier가 적용되서 잘못 설정되는 경우 방지)

• arrowParens: 화살표 함수에서 단일 파라미터에 대해 괄호를 붙히는 여부 (always)

• .prettierrc.yml (old)

package.json에 format 명령어 추가

"format": "prettier --write \\"bsrc/**/*.{js,jsx,ts,tsx,md,json,css,html}\\""

"format": "prettier --write \\"{src,test}/**/*.{js,jsx,ts,tsx,md,json,css,html}\\""