[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EFXD43C7J7WSFCKV6S3TZX":3,"skill-same:01M6EFXD43C7J7WSFCKV6S3TZX":45},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":18,"linkOnly":19,"markdownContent":20,"markdownBody":20,"frontMatter":21,"refName":22,"commitSha":23,"skillDirectory":24,"forksCount":25,"repositoryHtmlUrl":26,"repositoryHomepageUrl":27,"ownerHtmlUrl":28,"ownerBlogUrl":6,"ownerDescription":29,"updatedAt":30,"install":31,"resources":44},"01M6EFXD43C7J7WSFCKV6S3TZX","prettier",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FTerminalSkills\u002Fskills\u002Fprettier\u002FSKILL.md",[],[5],"2026-11-10 10:12:30",false,"# Prettier — Code Formatting\n\nPrettier takes your code and reprints it from scratch according to a fixed set of rules. It parses your source into an AST, discards all original formatting, and outputs a consistently styled version. The result is that every developer on the team produces identically formatted code regardless of their editor or personal preferences.\n\nThis skill covers configuring Prettier, integrating it with ESLint, setting up editor support, and enforcing formatting in CI.\n\n## Installing and Configuring Prettier\n\nPrettier works with zero configuration, but most teams customize a few options to match their preferences.\n\n```bash\n# Install Prettier as a dev dependency\nnpm install --save-dev prettier\n```\n\nCreate a configuration file at the project root. Prettier supports several formats — `.prettierrc.json` is the most common.\n\n```json\n\u002F\u002F .prettierrc.json — Prettier configuration for a TypeScript project\n{\n  \"semi\": true,\n  \"trailingComma\": \"all\",\n  \"singleQuote\": true,\n  \"printWidth\": 100,\n  \"tabWidth\": 2,\n  \"useTabs\": false,\n  \"bracketSpacing\": true,\n  \"arrowParens\": \"always\",\n  \"endOfLine\": \"lf\",\n  \"jsxSingleQuote\": false\n}\n```\n\nEach option controls a specific formatting decision. Prettier intentionally keeps the option count small — there are roughly 20 options total. This is by design. Fewer options means fewer debates.\n\nThe most impactful options are `printWidth` (line length before wrapping), `singleQuote` (quote style), and `trailingComma` (helps with cleaner git diffs when set to `\"all\"`).\n\n## Ignoring Files\n\nNot every file should be formatted. Build output, generated code, and certain configuration files often need to be excluded. Create a `.prettierignore` file using the same syntax as `.gitignore`.\n\n```text\n# .prettierignore — Files and directories Prettier should skip\ndist\u002F\nbuild\u002F\ncoverage\u002F\nnode_modules\u002F\n.next\u002F\n\n# Generated files\nsrc\u002Fgenerated\u002F\n*.min.js\n*.min.css\n\n# Lock files\npackage-lock.json\npnpm-lock.yaml\n```\n\n## Editor Integration\n\nPrettier's real power comes from running on every save. When you configure your editor to format on save, you never think about formatting again — you just write code and it snaps into shape.\n\n```json\n\u002F\u002F .vscode\u002Fsettings.json — VS Code settings for Prettier format-on-save\n{\n  \"editor.defaultFormatter\": \"esbenp.prettier-vscode\",\n  \"editor.formatOnSave\": true,\n  \"[javascript]\": {\n    \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n  },\n  \"[typescript]\": {\n    \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n  },\n  \"[typescriptreact]\": {\n    \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n  },\n  \"[json]\": {\n    \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n  },\n  \"[css]\": {\n    \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n  },\n  \"[markdown]\": {\n    \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n  }\n}\n```\n\nInclude this in your project's `.vscode\u002Fsettings.json` and commit it to the repository. This way every developer who opens the project in VS Code automatically gets format-on-save without manual setup.\n\n## Integrating Prettier with ESLint\n\nPrettier and ESLint overlap on formatting rules. Running both without coordination causes conflicts — ESLint might demand semicolons while Prettier removes them, creating an endless loop.\n\nThe solution is `eslint-config-prettier`, which disables all ESLint rules that conflict with Prettier. This lets ESLint handle code quality rules while Prettier handles formatting exclusively.\n\n```bash\n# Install the ESLint-Prettier integration\nnpm install --save-dev eslint-config-prettier\n```\n\n```javascript\n\u002F\u002F eslint.config.js — Flat config with Prettier compatibility\nimport js from '@eslint\u002Fjs';\nimport tseslint from 'typescript-eslint';\nimport prettierConfig from 'eslint-config-prettier';\n\nexport default [\n  js.configs.recommended,\n  ...tseslint.configs.recommended,\n\n  \u002F\u002F Project-specific rules\n  {\n    files: ['src\u002F**\u002F*.ts', 'src\u002F**\u002F*.tsx'],\n    rules: {\n      '@typescript-eslint\u002Fno-unused-vars': ['error', { argsIgnorePattern: '^_' }],\n      'no-console': 'warn',\n    },\n  },\n\n  \u002F\u002F Prettier config MUST be last — it disables conflicting rules\n  prettierConfig,\n\n  { ignores: ['dist\u002F', 'node_modules\u002F'] },\n];\n```\n\nThe order matters. `prettierConfig` must come last in the array so it overrides any formatting rules set by earlier configs.\n\n## Running Prettier from the Command Line\n\nPrettier provides commands for formatting files, checking if files are already formatted, and listing files that would change.\n\n```bash\n# Format all supported files in the project\nnpx prettier --write .\n\n# Check if files are formatted (exits with error code if not) — use this in CI\nnpx prettier --check .\n\n# Format specific file types\nnpx prettier --write \"src\u002F**\u002F*.{ts,tsx,css,json}\"\n\n# See what would change without writing files\nnpx prettier --list-different .\n```\n\nAdd these as npm scripts for consistency across the team.\n\n```json\n\u002F\u002F package.json — Prettier scripts for team usage\n{\n  \"scripts\": {\n    \"format\": \"prettier --write .\",\n    \"format:check\": \"prettier --check .\"\n  }\n}\n```\n\n## CI Enforcement\n\nFormatting should be a required check in your CI pipeline. The `--check` flag verifies that all files are already formatted and exits with a non-zero code if any file needs changes. This catches PRs where the developer forgot to run Prettier.\n\n```yaml\n# .github\u002Fworkflows\u002Fformat.yml — Prettier check as a CI gate\nname: Format\non: [push, pull_request]\n\njobs:\n  prettier:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions\u002Fcheckout@v4\n      - uses: actions\u002Fsetup-node@v4\n        with:\n          node-version: 20\n          cache: npm\n\n      - run: npm ci\n      - run: npx prettier --check .\n```\n\nWhen this check fails, the fix is simple: run `npx prettier --write .` locally, commit the changes, and push. Some teams add a pre-commit hook with `husky` and `lint-staged` to prevent unformatted code from being committed in the first place.\n\n```bash\n# Install pre-commit tooling\nnpm install --save-dev husky lint-staged\nnpx husky init\n```\n\n```json\n\u002F\u002F package.json — lint-staged configuration for pre-commit formatting\n{\n  \"lint-staged\": {\n    \"*.{ts,tsx,js,jsx,json,css,md}\": \"prettier --write\"\n  }\n}\n```\n\nThis runs Prettier on every staged file before each commit, ensuring that formatting violations never reach the remote repository.\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002FTerminalSkills\u002Fskills\u002Fprettier",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":7,"skillName":5,"commands":32,"prompt":42,"zipAvailable":43},[33,36,39],{"tool":34,"command":35},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill prettier",{"tool":37,"command":38},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill prettier",{"tool":40,"command":41},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill prettier","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FTerminalSkills\u002Fskills\u002Fprettier\u002FSKILL.md",true,[],[46,60,70,79,85,92],{"skillNo":47,"name":48,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":49,"categories":50,"keywords":56,"publishedAt":18},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[51],{"categoryNo":52,"categoryName":53,"taxonomyType":54,"taxonomyTypeDesc":55},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[57,58,59],"model","model hierarchy","model hierarchy skill",{"skillNo":61,"name":62,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":63,"categories":64,"keywords":66,"publishedAt":18},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[65],{"categoryNo":52,"categoryName":53,"taxonomyType":54,"taxonomyTypeDesc":55},[67,68,69],"MCP","zoom","zoom mcp",{"skillNo":71,"name":72,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":73,"categories":74,"keywords":75,"publishedAt":18},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[76,77,78,68],"sdk","zoom apps sdk","apps",{"skillNo":80,"name":81,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":82,"categories":83,"keywords":84,"publishedAt":18},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[81],{"skillNo":86,"name":87,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":88,"categories":89,"keywords":91,"publishedAt":18},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[90],{"categoryNo":52,"categoryName":53,"taxonomyType":54,"taxonomyTypeDesc":55},[87],{"skillNo":93,"name":94,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":95,"categories":96,"keywords":97,"publishedAt":18},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[94]]