如何更規範你的前端項目工程

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的使用(約束樣式)