如何更规范你的前端项目工程一、关于.editorconfig的配置(统一编辑器风格) 1、为什么要有.editorcon

一、关于`.editorconfig`的配置(统一编辑器风格)

1、为什么要有.editorconfig

用于跨编辑器保持同一份代码风格,打个比方,你开发的编辑器是vscode设置的缩进是2个字符,你同事开发的编辑器也是vscode但是他设置的是4个字符缩进,你们在一起开发同一个项目,就会出现空格缩进不一样的

2、项目根目录下创建一个.editorconfig文件，参考配置代码更多配置点击这里

# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

3、当你在项目下有了.editorconfig文件,那么你回车自动是以2个字符缩进换行
4、vscode也有editorconfig这个插件,当你项目中配置了这个,就会根据就近原则,直接用项目中的配置,不会用编辑器的配置

二、`Prettier`的配置(统一项目风格)

1、安装方式
- 编辑器插件安装方式(不推荐使用)
- 项目中安装
2、项目代码中安装
```
npm install prettier -D
```

3、项目根目录下创建一个文件.prettierrc更多配置参考或者参考

{
	"prettier.semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 100,
  "tabWidth": 2,
  "endOfLine": "auto",
  "arrowParens": "avoid"
}

4、执行命令就可以格式化代码
```
prettier --write **.js
```
5、官方安装步骤请参考,官方地址

三、`eslint`的配置(提高代码质量)

1、安装eslint
```
npm install eslint -D
```
2、初始化eslint配置文件,根据项目需求来选择
```
npx eslint --init
```
3、另外一种方式来配置eslint
- 直接在npm包管理仓库输入关键词搜索下载量多的
4、在react中默认安装了eslint，可以不需要再配置
5、在prettier官方上提到了，如果要使用eslint和prettier的时候需要安装一个包，官方地址
6、在package.json文件中配置,表示用prettier的部分规则覆盖eslint的规则

"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "prettier"
    ]
  },

四、关于`stylelint`的使用(约束样式)

1、官网地址及安装方式

npm install --save-dev stylelint stylelint-config-standard

2、项目的根目录下创建文件.stylelintrc

{
  "extends": ["stylelint-config-standard"],
  "rules": {
  	...
  }
}

3、可以自己选择配置规则参考地址

4、在package.json中配置脚本

...
"scripts": {
  ...
  "stylelint:fix": "stylelint src/**/*.less --fix",
  ...
}
...

五、另外一种安装方式

1、参考地址
2、安装方式
```
npx mrm lint-staged
```

3、在package.json中配置

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,css,md,ts,tsx}": "prettier --write"
  }

4、提交测试是否使用了代码格式化

六、关于`git`提交规范

1、参考地址

2、使用步骤

# 安装依赖包
npm install --save-dev @commitlint/config-conventional @commitlint/cli

# Configure commitlint to use conventional config
# 生成一个文件
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
# 自动生成错误提示
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

七、补充一点关于`husky`的另外一种安装步骤

1、在项目中安装husky
```
npm install husky -D
```
2、如果不想全局安装就在package.json中配置命令或者直接使用npx
```
...
"scripts": {
  "husky": "husky install"
}
...
```

3、初始化husky

npm run husky
# 不配置第二步的操作方式
npx husky install

.husky
├── _
│   └── husky.sh
└── pre-commit

1 directory, 1 files

4、配置提交的钩子参考文档或官网

npm install --save-dev @commitlint/config-conventional @commitlint/cli

5、项目根目录下创建commitlint.config.js文件

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      ['upd', 'feat', 'fix', 'docs', 'style', 'refactor', 'test', 'chore'],
    ],
  },
};
/**
 * https://segmentfault.com/a/1190000017790694
 * upd: 更新
 * feat: 新增
 * fix: 修复
 * docs: 文档
 * style: 样式
 * refactor: 重构代码
 * test: 单元测试
 * chore: 构建过程或辅助工具的变动
 */

6、生成commit-msg文件

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit $1

7、建议将.husky里面的.gitignore文件删除
8、安装lint-staged包
```
npm install lint-staged -D
```

9、在package.json中配置

"scripts": {
  ...
  "lint-staged": "lint-staged",
  ...
},
"lint-staged": {
  "**/*.{ts,tsx}": [
    "prettier --write",
    "npm run eslint",
    "git add"
  ],
  "**/*.less": "npm run stylelint:fix"
},

10、修改.husky/pre-commit文件内容,让他执行lint-staged
```
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run lint-staged
```
11、每次提交的时候就会先进行代码格式化校验
```
git commit -m 'fix: 修复bug'
```

如何更规范你的前端项目工程

一、关于.editorconfig的配置(统一编辑器风格)

二、Prettier的配置(统一项目风格)

三、eslint的配置(提高代码质量)

四、关于stylelint的使用(约束样式)