Target

English | 中文

当我们创建一个新的前端项目时往往伴随着创建大量的配置文件。

甚至这些配置相关的 npm 包的版本号，都难以记忆，而且每个配置文件的配置细节也比较复杂。常常需要配置:

• eslint
  • 用于识别和修复 JavaScript 代码中的问题以维护代码质量的工具。
• prettier
  • 一个代码格式化工具，可确保整个项目的代码风格一致。
• commitlint
  • 根据指定规则强制执行一致提交消息格式的工具。
• husky
  • 用于运行 Git 钩子以自动执行提交前 linting、测试或格式化等任务的工具。
• lintStaged
  • 在提交之前对 Git 中暂存的文件运行 linters，改进提交前检查。
• changelog
  • 通常是生成的日志，用于跟踪项目随时间推移所做的更改、改进和修复。
• tsconfig
  • 用于指定 TypeScript 编译器选项和项目设置的配置文件。
• gitignore
  • 指定 Git 应在项目中忽略的的文件或文件夹。
• vscodeSetting
  • vscode 配置文件（保存文件自动格式化代码）

这个 cli 工具将帮助你快速配置以上工具，并且你可以基于这些文件自定义配置。

使用简介

安装依赖

npm i @mx-design/config -D

yarn add @mx-design/config -D

pnpm add @mx-design/config -D

添加命令到 package.json 的 scripts 中

npm pkg set scripts.config="mx-config config"

运行命令

npm run config

yarn run config

pnpm run config

命令运行效果

选择 javascript 或者 typescript

• 如果选择 typescript
  • 创建 tsconfig.json 文件
  • 在 package.json 中添加对应依赖

选择是否需要 eslint

• 如果选择 yes
  • 创建 .eslintrc.js 文件(基于 8.x 版本的 eslint)
  • 在 package.json 中添加对应依赖
  • 然后选择 eslint 中是否配置 prettier 或者 react 相关内容

其它配置

• prettier
  • 会创建 .prettierrc.js
  • 在 package.json 中添加对应依赖
• husky
  • 使用 npx husky init 命令初始化 husky
  • 在 package.json 中添加对应依赖
• lintStaged
  • 在 package.json 中设置 lint-staged 配置（与是否你选择 eslint 和 prettier 有关）
  • 在 package.json 中添加对应依赖

  "lint-staged": {
    "*.{js,ts,jsx,tsx": [
      "eslint --fix",
      "prettier -w"
    ],
    "*.{md,json}": [
      "prettier -w"
    ]
  }

• commitLint

  • 如果你之前选择了 husky
    • 增加 commitlint 用来校验 git commit 是否符合规范
    • 增加 npm run commit 命令来替代 git commit 从而可视化 angular 提交规范。
  • 在 package.json 中添加对应依赖

• changelog

  • 在 package.json 的 scripts 中增加 change-log 命令，你可以运行 npm run change-log 来创建 CHANGELOG.md 文件
  • 在 package.json 中添加对应依赖

• gitignore

  • 创建 .gitignore 文件

• vscodeSetting

  • 创建 vscode 的 settings.json 文件，用来自动化格式你的代码，包含的内容如下 :

{
  /**
   * @zh 括号对着色
   * @en Parentheses coloring
   */
  "editor.guides.bracketPairs": true,
  "editor.bracketPairColorization.enabled": true,
  /**
   * @zh 根据文件内容进行缩进替换为 4 个空格
   * @en Indent replace with 4 Spaces according to the contents of the file
   */
  "editor.detectIndentation": false,
  "editor.tabSize": 2,
  /**
   * @zh 代码单词拼写检查
   * @en Code Spell Checker
   */
  "cSpell.words": ["codemirror", "esbenp"],
  "cSpell.enabled": true,
  // eslint
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.organizeImports": "explicit",
    "source.fixAll.eslint": "never"
  },
  // prettier
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

• 创建 extensions.json 文件，用来提示你应该安装让 settings.json 文件生效的 vscode 插件（只在 vscode 编辑器有效）

{
  "recommendations": [
    "dbaeumer.vscode-eslint", // eslint plugin 插件
    "esbenp.prettier-vscode", // prettier plugin 插件
    "stylelint.vscode-stylelint", // stylelint plugin 插件
    "shardulm94.trailing-spaces" // editorConfig plugin 插件
  ]
}

最后

你需要对应的命令，安装所有依赖

npm i

yarn i

pnpm i