Javascript_TypeScript - Package - Prettier

,

Quick Chat

Prettier 是一個代碼格式化工具，用於保持代碼風格一致。

Guide

Notice

Install

pnpm add -D prettier

Extension

.vscode/extension.json

{
  "recommendations": ["esbenp.prettier-vscode"]
}

.vscode/setting.json

{
  "editor.formatOnSave": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Plugin

  • prettier-plugin-organize-imports : 排序/合併/移除未使用的 import 聲明

Integration - ESlint

Config

package.json

{
  "scripts": {
    "format": "prettier --write --cache .",
    "format-check": "prettier --check --cache ."
  }
}

.prettierrc

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 150,
  "endOfLine": "auto",
  "singleAttributePerLine": true,
  "vueIndentScriptAndStyle": true,
  "htmlWhitespaceSensitivity": "ignore",
  "plugins": ["prettier-plugin-organize-imports"],
  "overrides": [
    {
      "files": ".prettierrc",
      "options": {
        "parser": "json"
      }
    }
  ]
}

.prettierignore

dist
pnpm-lock.yaml
CHANGELOG*.md

eslint.config.js

import eslintConfigPrettier from 'eslint-config-prettier';

export default [
  eslintConfigPrettier,
];