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

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

一、为何要有.editorconfigjavascript

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

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

# 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
复制代码

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

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

一、安装方式git
- 编辑器插件安装方式(不推荐使用)
- 项目中安装
二、项目代码中安装github
```
npm install prettier -D
复制代码
```

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

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

四、执行命令就能够格式化代码json
```
prettier --write **.js
复制代码
```
五、官方安装步骤请参考,官方地址segmentfault

3、`eslint`的配置(提升代码质量)

一、安装eslint
```
npm install eslint -D
复制代码
```
二、初始化eslint配置文件,根据项目需求来选择
```
npx eslint --init
复制代码
```
三、另一种方式来配置eslint
- 直接在npm包管理仓库输入关键词搜索下载量多的
四、在react中默认安装了eslint，能够不须要再配置
五、在prettier官方上提到了，若是要使用eslint和prettier的时候须要安装一个包，官方地址
六、在package.json文件中配置,表示用prettier的部分规则覆盖eslint的规则

"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "prettier"
    ]
  },
复制代码

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

一、官网地址及安装方式

npm install --save-dev stylelint stylelint-config-standard
复制代码

二、项目的根目录下建立文件.stylelintrc

{
  "extends": ["stylelint-config-standard"],
  "rules": {
  	...
  }
}
复制代码

三、能够本身选择配置规则参考地址

四、在package.json中配置脚本

...
"scripts": {
  ...
  "stylelint:fix": "stylelint src/**/*.less --fix",
  ...
}
...
复制代码

5、另一种安装方式

一、参考地址
二、安装方式
```
npx mrm lint-staged
复制代码
```

三、在package.json中配置

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

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

6、关于`git`提交规范

一、参考地址

二、使用步骤

# 安装依赖包
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"'
复制代码

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

一、在项目中安装husky
```
npm install husky -D
复制代码
```
二、若是不想全局安装就在package.json中配置命令或者直接使用npx
```
...
"scripts": {
  "husky": "husky install"
}
...
复制代码
```

三、初始化husky

npm run husky
# 不配置第二步的操做方式
npx husky install
复制代码

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

1 directory, 1 files
复制代码

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

npm install --save-dev @commitlint/config-conventional @commitlint/cli
复制代码

五、项目根目录下建立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: 构建过程或辅助工具的变更 */
复制代码

六、生成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
复制代码

七、建议将.husky里面的.gitignore文件删除
八、安装lint-staged包
```
npm install lint-staged -D
复制代码
```

九、在package.json中配置

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

十、修改.husky/pre-commit文件内容,让他执行lint-staged

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

npm run lint-staged
复制代码

十一、每次提交的时候就会先进行代码格式化校验
```
git commit -m 'fix: 修复bug'
复制代码
```

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

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

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

3、eslint的配置(提升代码质量)

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