npm package: @mx-design/config
Description: config solution
Latest version: 0.1.3

<div align="center" style="margin-top: 12px">
  <picture>
      <source media="(prefers-color-scheme: dark)" srcset="https://assets.vercel.com/image/upload/v1662130559/nextjs/Icon_dark_background.png">
      <img alt="mx-design logo" src="./assets/logo.png" height="108">
    </picture>
  <h2>mx-config</h2>
</div>

<div align="center">
  <img src="./assets/process.gif"  />
</div>

## Target

[English](./README.md) | 中文

当我们创建一个新的前端项目时往往伴随着创建大量的配置文件。 
 
甚至这些配置相关的 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

![alt text](./assets/image.png)

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

### 选择是否需要 eslint

![alt text](./assets/image-1.png)

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

![alt text](./assets/image-2.png)

### 其它配置

![alt text](./assets/image-3.png)

- prettier
  - 会创建 .prettierrc.js
  - 在 package.json 中添加对应依赖
- husky
  - 使用 npx husky init 命令初始化 husky
  - 在 package.json 中添加对应依赖
- lintStaged
  - 在 package.json 中设置 lint-staged 配置（与是否你选择 eslint 和 prettier 有关）
  - 在 package.json 中添加对应依赖
```js
  "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 文件，用来自动化格式你的代码，包含的内容如下 :
```javascript
{
  /**
   * @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 编辑器有效）
```Javascript
{
  "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
```