在许多项目中，我们都希望保持统一的代码风格。一般情况下，新建一个项目时我们会从零开始安装 ESLint、Stylelint、Prettier 的依赖和它们的插件，然后再加入自己的个性化配置。但是，为什么要一遍又一遍地重复这些恼人的工作呢？！🤔 显然，如果我们要从中解放自己，那就需要一个工具来帮助完成这些固定的工作，这就是 prefer-code-style 的职责所在了。
prefer-code-style 适用于 React 项目，它集成了常用的 ESLint、Stylelint、Prettier 配置，并且内置了一些主观偏好的格式配置，帮助你节省构建新项目时配置代码风格的时间，同时约定了各个项目统一的格式规范。
Warning
这个项目并不适合所有人，它集成了我的编码风格习惯和偏好，专门服务于我的个人项目，很长一段时间中，它们配合得很好。我真心希望你喜欢它、使用它，并且鼓励你也创建属于自己的格式化配置集合。
yarn add -D prefer-code-styleNote
prefer-code-style 内部已经集成了 eslint、prettier、stylelint，所以你无需重复安装。如果你事先安装了他们，为了防止版本冲突，请在安装 prefer-code-style 前把他们移除掉。
ESLint 已经升级到采用新的 flat config 格式，配置更加简洁直观。
以下是可用的配置模块：
- prefer-code-style/eslint/base
- prefer-code-style/eslint/browser
- prefer-code-style/eslint/node
- prefer-code-style/eslint/typescript
- prefer-code-style/eslint/typescript-strict
- prefer-code-style/eslint/react
- prefer-code-style/eslint/jsx
- prefer-code-style/eslint/jsx-a11y
- prefer-code-style/eslint/next
- prefer-code-style/eslint/vue
- prefer-code-style/eslint/tailwindcss
添加 eslint.config.mjs，配置示例如下：
// 假设你的项目使用了 TypeScript + React：
import base from 'prefer-code-style/eslint/base'
import typescript from 'prefer-code-style/eslint/typescript'
import react from 'prefer-code-style/eslint/react'
export default [
...base,
...typescript,
...react,
{
// 你仍然可以在这里添加自定义规则
rules: {
// 自定义规则
},
},
]为了简化配置，我们也提供了适用于特定类型项目的预设配置：
// 适用于 Next.js 项目
import nextPreset from 'prefer-code-style/eslint/preset/next'
export default [
...nextPreset,
]
// 适用于 Umi.js 项目
import umiPreset from 'prefer-code-style/eslint/preset/umi'
export default [
...umiPreset,
]
// 适用于标准项目
import normalPreset from 'prefer-code-style/eslint/preset/normal'
export default [
...normalPreset,
]添加 stylelint.config.mjs，配置如下：
import stylelintPreset from 'prefer-code-style/stylelint'
export default {
extends: [stylelintPreset],
}在该项目的根目录中找到并下载 /prefer-code-style.code-profile，然后在导入进 VS Code，该 Profile 文件集成了让 prefer-code-style 生效所需的最简化配置。
安装插件 VS Code ESLint 和 vscode-stylelint。
# 可以执行以下命令来快速安装 VS Code 插件：
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension stylelint.vscode-stylelint
# 可选，如果你使用 tailwindcss 的话：
code --install-extension bradlc.vscode-tailwindcss然后在 settings.json 中加入以下配置：
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
"source.fixAll.stylelint": "explicit"
}
}使用以上这些插件，你将能够获得更好的格式提示，并在保存文件时自动格式化你的代码，享受工具带来的便利吧 😎 ～
prefer-code-style 内置了如下常用插件，让你免于安装和导入大量独立的包。如果这里面缺少你需要的，你仍然可以自行安装。
ESLint: 查看代码
查看插件
Prettier: 查看代码
Stylelint: 查看代码
查看插件
如果你对类似的项目感兴趣，还可以参考：