prettier

• prettier/prettier 是什么?
  • opinionated code formatter
  • Web/Node 开发的 gofmt - JS/TS/Flow/JSX, CSS/SCSS/LESS, Vue, Angular
  • 支持 Markdown, GraphQL, YAML, JSON
• 参考
  • plugins
    • php, pug, ruby, xml
    • 社区: go-template, java, kotlin, properties, svelte, toml, sh
  • benjie/prettier-plugin-pg PostgreSQL
  • simonhaenisch/prettier-plugin-organize-imports
  • trivago/prettier-plugin-sort-imports
• 配置
  • .prettierrc.json
  • .prettierignore

caution

• tailwindcss 插件要放在最后面
• YAML 无法调整 array 缩进
  • redhat-developer/vscode-yaml#172
  • brodybits/prettierx
• sort-imports 错误处理 use client/use server 指令 prettier-plugin-sort-imports#185
  • 可以考虑用 ESLint sorting

# 直接格式化
npx prettier --write src/**/*.{ts,tsx,css,html}
# 格式检查
npx prettier --check src/**/*.{ts,tsx,css,html}

# 项目依赖
npm add -D prettier

# 当前配置文件
prettier --find-config-path src/types.d.ts

prettier --write src --cache --cache-strategy metadata


prettier --support-info
prettier --file-info a.js

prettier.config.js

// https://prettier.io/docs/en/options.html
module.exports = {
  printWidth: 120,
  singleQuote: true,
  trailingComma: 'all',
};

package.json

{
  "prettier": {
    "bracketSameLine": false,
    "importOrder": ["^[^.]", "^[.][.]", "^[.][/]"],
    "importOrderSeparation": false,
    "trailingComma": "all",
    "printWidth": 120,
    "singleQuote": true,
    "overrides": [
      {
        "files": ["*.html", "*.css"],
        "options": {
          "singleQuote": false
        }
      }
    ]
  },
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }
}

配合 lint-staged

npm install --save-dev husky lint-staged
npx husky install
npm set-script prepare "husky install"
npx husky add .husky/pre-commit "npx lint-staged"

排序 import

• trivago/prettier-plugin-sort-imports
• IanVS/prettier-plugin-sort-imports

npm add -D @trivago/prettier-plugin-sort-imports

module.exports = {
  printWidth: 80,
  tabWidth: 4,
  trailingComma: 'all',
  singleQuote: true,
  jsxBracketSameLine: true,
  semi: true,
  importOrder: ['^@core/(.*)$', '^@server/(.*)$', '^@ui/(.*)$', '^[./]'],
};

• importOrderParserPlugins
  • BabelParserPluginsList
• https://github.com/the-guild-org/shared-config/blob/main/packages/prettier-config/index.cjs
• import with
  • babel 支持 importAttributesKeyword ， 但是无法传递
    • https://github.com/trivago/prettier-plugin-sort-imports/pull/273

plugins

• prettier-plugin-sql
• prettier-plugin-sh
• prettier-plugin-pkg
  • package.json

---

• rx-ts/prettier
  • sql,sh,pkg
• https://prettier.io/docs/en/plugins.html

ignore

• .prettierignore
• prettier-ignore 注释

// prettier-ignore

<div>
  {/* prettier-ignore */}
  <span     ugly  format=''   />
</div>

<!-- prettier-ignore -->

SyntaxError: This experimental syntax requires enabling one of the following parser plugin(s): "decorators", "decorators-legacy".

importOrderParserPlugins: ['typescript', 'decorators-legacy'],

.prettierrc.json

{
  "bracketSameLine": false,
  "trailingComma": "all",
  "printWidth": 120,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "overrides": [
    {
      "files": ["*.html", "*.css"],
      "options": {
        "singleQuote": false
      }
    },
    {
      "files": ["*.sql"],
      "options": {
        "tabWidth": 4
      }
    }
  ],
  "importOrder": [
    "^node:",
    "<BUILTIN_MODULES>",
    "[.](polyfill|shim)$",
    "reflect-metadata",
    "^react(-dom)?",
    "<THIRD_PARTY_MODULES>",
    "^@/",
    "^[.][.]",
    "^[.][/]"
  ],
  "importOrderParserPlugins": ["typescript", "jsx", "decorators-legacy", "importAttributes"],
  "plugins": ["prettier-plugin-pkg", "@ianvs/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
  "tailwindFunctions": ["clsx", "tw", "cn"],
  "tailwindConfig": "./tailwind.config.ts"
}

No parser could be inferred for file

cat abc.css | prettier --stdin-filepath abc.css