{"id":14978312,"url":"https://github.com/codennnn/prefer-code-style","last_synced_at":"2025-06-25T19:02:35.531Z","repository":{"id":43899190,"uuid":"364601077","full_name":"Codennnn/prefer-code-style","owner":"Codennnn","description":"💫 🌟 ESLint + Stylelint + Prettier 的代码风格配置集合，为多个项目提供统一的格式化配置，让你远离枯燥的配置步骤，极速完成复杂易错的配置工作。","archived":false,"fork":false,"pushed_at":"2025-06-14T14:41:23.000Z","size":4233,"stargazers_count":43,"open_issues_count":0,"forks_count":3,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-06-25T19:02:16.540Z","etag":null,"topics":["eslint","eslint-config","eslint-plugin","eslint-shareable-configs","prettier","prettier-config","stylelint","stylelint-config","stylelint-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Codennnn.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-05-05T14:18:12.000Z","updated_at":"2025-06-14T14:41:27.000Z","dependencies_parsed_at":"2023-02-16T20:16:06.354Z","dependency_job_id":"1dd28871-d208-490a-9801-6ae0ba05b11c","html_url":"https://github.com/Codennnn/prefer-code-style","commit_stats":{"total_commits":199,"total_committers":4,"mean_commits":49.75,"dds":"0.26633165829145733","last_synced_commit":"aa74d66e641d4804578a7635412588a8e8dc2330"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/Codennnn/prefer-code-style","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codennnn%2Fprefer-code-style","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codennnn%2Fprefer-code-style/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codennnn%2Fprefer-code-style/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codennnn%2Fprefer-code-style/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Codennnn","download_url":"https://codeload.github.com/Codennnn/prefer-code-style/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codennnn%2Fprefer-code-style/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261937022,"owners_count":23232843,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["eslint","eslint-config","eslint-plugin","eslint-shareable-configs","prettier","prettier-config","stylelint","stylelint-config","stylelint-plugin"],"created_at":"2024-09-24T13:57:21.883Z","updated_at":"2025-06-25T19:02:35.520Z","avatar_url":"https://github.com/Codennnn.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n\n# Prefer Code Style\n\n**别让重复的代码风格配置工作占用你的时间**\n\n\u003c/div\u003e\n\n![看不到图片？你可能需要开 VPN 加速。](/social-preview.png)\n\n## 💡 想法起源\n\n在许多项目中，我们都希望保持统一的代码风格。一般情况下，新建一个项目时我们会从零开始安装 ESLint、Stylelint、Prettier 的依赖和它们的插件，然后再加入自己的个性化配置。但是，为什么要一遍又一遍地重复这些恼人的工作呢？！🤔 显然，如果我们要从中解放自己，那就需要一个工具来帮助完成这些固定的工作，这就是 `prefer-code-style` 的职责所在了。\n\n## 📜 介绍\n\n`prefer-code-style` 适用于 React 项目，它集成了常用的 ESLint、Stylelint、Prettier 配置，并且内置了一些**主观偏好**的格式配置，帮助你节省构建新项目时配置代码风格的时间，同时约定了各个项目统一的格式规范。\n\n\u003e **Warning**  \n\u003e 这个项目并不适合所有人，它集成了我的编码风格习惯和偏好，专门服务于我的个人项目，很长一段时间中，它们配合得很好。我真心希望你喜欢它、使用它，并且鼓励你也创建属于自己的格式化配置集合。\n\n## 📥 安装\n\n```bash\nyarn add -D prefer-code-style\n```\n\n\u003e **Note**  \n\u003e prefer-code-style 内部已经集成了 eslint、prettier、stylelint，所以你无需重复安装。如果你事先安装了他们，为了防止版本冲突，请在安装 prefer-code-style 前把他们移除掉。\n\n## ⚙ 用法\n\n### ESLint:\n\nESLint 已经升级到采用新的 flat config 格式，配置更加简洁直观。\n\n以下是可用的配置模块：\n\n- prefer-code-style/eslint/base\n- prefer-code-style/eslint/browser\n- prefer-code-style/eslint/node\n- prefer-code-style/eslint/typescript\n- prefer-code-style/eslint/typescript-strict\n- prefer-code-style/eslint/react\n- prefer-code-style/eslint/jsx\n- prefer-code-style/eslint/jsx-a11y\n- prefer-code-style/eslint/next\n- prefer-code-style/eslint/vue\n- prefer-code-style/eslint/tailwindcss\n\n添加 `eslint.config.mjs`，配置示例如下：\n\n```js\n// 假设你的项目使用了 TypeScript + React：\nimport base from 'prefer-code-style/eslint/base'\nimport typescript from 'prefer-code-style/eslint/typescript'\nimport react from 'prefer-code-style/eslint/react'\n\nexport default [\n  ...base,\n  ...typescript,\n  ...react,\n  {\n    // 你仍然可以在这里添加自定义规则\n    rules: {\n      // 自定义规则\n    },\n  },\n]\n```\n\n为了简化配置，我们也提供了适用于特定类型项目的预设配置：\n\n```js\n// 适用于 Next.js 项目\nimport nextPreset from 'prefer-code-style/eslint/preset/next'\n\nexport default [\n  ...nextPreset,\n]\n\n// 适用于 Umi.js 项目\nimport umiPreset from 'prefer-code-style/eslint/preset/umi'\n\nexport default [\n  ...umiPreset,\n]\n\n// 适用于标准项目\nimport normalPreset from 'prefer-code-style/eslint/preset/normal'\n\nexport default [\n  ...normalPreset,\n]\n```\n\n### Stylelint:\n\n添加 `stylelint.config.mjs`，配置如下：\n\n```js\nimport stylelintPreset from 'prefer-code-style/stylelint'\n\nexport default {\n  extends: [stylelintPreset],\n}\n```\n\n## ⚔️ 搭配 VS Code 使用更佳\n\n### 1. 集成配置\n\n在该项目的根目录中找到并下载 [`/prefer-code-style.code-profile`](./prefer-code-style.code-profile)，然后在导入进 VS Code，该 Profile 文件集成了让 `prefer-code-style` 生效所需的最简化配置。\n\n### 2. 手动配置\n\n安装插件 [VS Code ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) 和 [vscode-stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)。\n\n```bash\n# 可以执行以下命令来快速安装 VS Code 插件：\ncode --install-extension dbaeumer.vscode-eslint\ncode --install-extension esbenp.prettier-vscode\ncode --install-extension stylelint.vscode-stylelint\n\n# 可选，如果你使用 tailwindcss 的话：\ncode --install-extension bradlc.vscode-tailwindcss\n```\n\n然后在 `settings.json` 中加入以下配置：\n\n```json\n{\n  \"editor.formatOnSave\": true,\n  \"editor.codeActionsOnSave\": {\n    \"source.fixAll.eslint\": \"explicit\",\n    \"source.fixAll.stylelint\": \"explicit\"\n  }\n}\n```\n\n使用以上这些插件，你将能够获得更好的格式提示，并在保存文件时自动格式化你的代码，享受工具带来的便利吧 😎 ～\n\n## 📦 内置的插件/配置\n\n`prefer-code-style` 内置了如下常用插件，让你免于安装和导入大量独立的包。如果这里面缺少你需要的，你仍然可以自行安装。\n\n### ESLint: [查看代码](./src/eslint)\n\n\u003cdetails\u003e\n\u003csummary\u003e查看插件\u003c/summary\u003e\n\n- [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier#readme)\n- [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier#readme)\n- [eslint-plugin-import](https://github.com/import-js/eslint-plugin-import#readme)\n- [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react#readme)\n- [eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks)\n- [eslint-plugin-tailwindcss](https://github.com/francoismassart/eslint-plugin-tailwindcss#readme)\n\n\u003c/details\u003e\n\n### Prettier: [查看代码](./src/prettier.js)\n\n\u003cdetails\u003e\n\u003csummary\u003e查看插件\u003c/summary\u003e\n\n- [prettier-plugin-packagejson](https://github.com/matzkoh/prettier-plugin-packagejson#readme)\n\n\u003c/details\u003e\n\n### Stylelint: [查看代码](./src/stylelint.js)\n\n\u003cdetails\u003e\n\u003csummary\u003e查看插件\u003c/summary\u003e\n\n- [stylelint-config-prettier](https://github.com/prettier/stylelint-config-prettier#readme)\n- [stylelint-config-clean-order](https://github.com/kutsan/stylelint-config-clean-order#readme)\n- [stylelint-config-standard](https://github.com/stylelint/stylelint-config-standard#readme)\n- [stylelint-order](https://github.com/hudochenkov/stylelint-order#readme)\n- [stylelint-prettier](https://github.com/prettier/stylelint-prettier#readme)\n- [stylelint-scss](https://github.com/stylelint-scss/stylelint-scss#readme)\n\n\u003c/details\u003e\n\n## ⚖ 相似项目\n\n如果你对类似的项目感兴趣，还可以参考：\n\n- [umijs/fabric](https://github.com/umijs/fabric)\n- [beskar-co/harmony](https://github.com/beskar-co/harmony)\n- [vercel/style-guide](https://github.com/vercel/style-guide)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodennnn%2Fprefer-code-style","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodennnn%2Fprefer-code-style","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodennnn%2Fprefer-code-style/lists"}