目标
工程配置次要是为了可能在团队开发中对立代码标准，防止因为代码格调不对立或其它不统一的问题导致的整合抵触
- 编辑器格调（EditorConfig、prettier）
- 代码标准和校验（eslint、stylint）
- git提交标准（commitlint）
参考文章：我是这样搭建Typescript+React我的项目环境的
vscode 必备插件
- gitignore
- EditorConfig For vs Code
- Prettier - Code formatter
- ESLint
- stylelint
package.json
初始化package.json:
npm init -y.gitignore
ctrl+shift+p 号召命令面板，输出 Add gitignore 命令，新建 .gitignore
或者间接新建：
touch .gitignore.npmrc
对立npm依赖源
# 创立 .npmrc 文件touch .npmrc# 在该文件内输出配置registry=https://registry.npm.taobao.org/因为我的项目中会用到react和typescript，所以先装上这两个依赖包：
npm install typescript -Dnpm install react react-dom -SREADME.md
新建 README 文件
touch README.mdEditorConfig
.editorconfig是跨编辑器保护统一编码格调的配置文件vscode装置插件EditorConfig，根目录新建文件.editorconfig:
touch .editorconfig输出以下配置：
root = true[*]indent_style = tabindent_size = 2charset = utf-8trim_trailing_whitespace = trueinsert_final_newline = trueend_of_line = lf[*.md]trim_trailing_whitespace = falseindent_style缩进格调，可选配置有 tab 和 spaceindent_size缩进大小charset编码格局trim_trailing_whitespace去除多余的空格insert_final_newline在尾部插入一行end_of_line换行符
更多配置能够查看EditorConfig
Prettier
Prettier对立我的项目格调
prettier 依赖包
npm install prettier -D根目录新建文件.prettierrc:
touch .prettierrc输出以下配置：
{ "trailingComma": "none", "tabWidth": 2, "semi": true, "endOfLine": "lf", "printWidth": 120, "bracketSpacing": true, "arrowParens": "always"}trailingComma对象的最初一个属性开端增加,tabWidth缩进大小semi开端是否增加分号singleQuote是否单引号jsxSingleQuotejsx 语法是否单引号endOfLine与 .editorconfig 保持一致设置printWidth单行代码最长字符长度，超过之后会主动格式化换行bracketSpacing花括号外面有空格{a:1}=>{ a: 1}arrowParens箭头函数的参数括号包裹(a)=>{}
更多配置请查看Prettier Playground
prettier 插件
vscode 装置扩大 Prettier - Code formatter
根目录下新建文件夹.vscode，再此文件夹下新建settings.json:
mkdir .vscodetouch .vscode/settings.json该文件的配置优先于 vscode 全局的settings.json，不过要在工作区workspace的根目录下才会失效。
settings.json配置：
{ // 指定哪些文件不参加搜寻 "search.exclude": { "**/node_modules": true, "dist": true, "build": true, "yarn.lock": true, "package-lock.json": true }, "editor.formatOnSave": true, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[markdown]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[less]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[scss]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }}ESLint
装置 eslint
npm install eslint -D装置胜利后，执行以下命令：
npx eslint --init//termail1、How would you like to use ESLint?= To check syntax, find problems, and enforce code style2、What type of modules does your project use?= JavaScript modules (import/export)3、Which framework does your project use?= React4、Does your project use TypeScript?= Typescript5、Where does your code run?= Browser & Node6、How would you like to define a style for your project?= Use a popular style guide7、Which style guide do you want to follow?= Airbnb8、What format do you want your config file to be in?= JavaScript9、Would you like to install them now with npm?= Yes对生成的.eslintrc.js文件，还要做以下批改：
- 依据 eslint-config-airbnb 官网阐明，如果要开启 React Hooks 的查看，须要在 extends 中增加一项
'airbnb/hooks'。 - 依据 @typescript-eslint/eslint-plugin 官网阐明，在 extends 中增加
'plugin:@typescript-eslint/recommended'可开启针对 ts 语法举荐的规定定义。 - 须要增加一条很重要的
rule，不然在typescript中通过import导入会报错
增加以下规定到 rules ：
rules: { 'import/extensions': [ ERROR, 'ignorePackages', { ts: 'never', tsx: 'never', json: 'never', js: 'never', }, ],}增加settings配置：
settings: { 'import/resolver': { node: { extensions: ['.tsx', '.ts', '.js', '.json'], }, },},ESLint 和 Prettier 的抵触
配置完会发现，vscode始终在标红，因为eslint的配置规定跟prettier抵触了
装置 eslint-config-prettier:
npm install eslint-config-prettier -D增加以下配置到 .eslintrc.js 的 extends 中：
{ extends: [ // other configs ... 'prettier', 'prettier/@typescript-eslint', 'prettier/react', 'prettier/unicorn', ]}eslint 扩大插件
eslint-plugin-promise让你把 Promise 语法写成最佳实际eslint-plugin-unicorn提供了更多有用的配置项
npm install eslint-plugin-promise eslint-plugin-unicorn -D批改.eslintrc.js文件如下：
const OFF = 0;const WARN = 1;const ERROR = 2;module.exports = { env: { browser: true, es2020: true, node: true }, extends: [ 'airbnb', 'airbnb/hooks', 'plugin:react/recommended', 'plugin:unicorn/recommended', 'plugin:promise/recommended', 'plugin:@typescript-eslint/recommended', 'prettier', 'prettier/@typescript-eslint', 'prettier/react', 'prettier/unicorn' ], parser: '@typescript-eslint/parser', parserOptions: { ecmaFeatures: { jsx: true }, ecmaVersion: 11, sourceType: 'module' }, plugins: ['react', 'unicorn', 'promise', '@typescript-eslint'], settings: { 'import/resolver': { node: { extensions: ['.tsx', '.ts', '.js', '.json'] }, typescript: {} } }, rules: { 'import/extensions': [ ERROR, 'ignorePackages', { ts: 'never', tsx: 'never', js: 'never' } ], 'import/no-extraneous-dependencies': [ERROR, { devDependencies: true }], 'import/prefer-default-export': OFF, 'import/no-unresolved': ERROR, 'unicorn/better-regex': ERROR, 'unicorn/prevent-abbreviations': OFF, 'unicorn/filename-case': [ ERROR, { cases: { // 中划线 kebabCase: true, // 小驼峰 camelCase: true, // 下划线 snakeCase: false, // 大驼峰 pascalCase: true } } ], 'unicorn/no-array-instanceof': WARN, 'unicorn/no-for-loop': WARN, // 应用 for of 和 .entries 代替传统的 for 循环 'unicorn/prefer-add-event-listener': [ ERROR, { excludedPackages: ['koa', 'sax'] } ], 'unicorn/prefer-query-selector': ERROR, 'unicorn/no-null': OFF, 'unicorn/import-style': OFF, '@typescript-eslint/no-useless-constructor': ERROR, '@typescript-eslint/no-empty-function': WARN, '@typescript-eslint/no-var-requires': OFF, '@typescript-eslint/explicit-function-return-type': OFF, '@typescript-eslint/explicit-module-boundary-types': OFF, '@typescript-eslint/no-explicit-any': OFF, '@typescript-eslint/no-unused-vars': [OFF], 'react/jsx-filename-extension': [ERROR, { extensions: ['.tsx', 'ts', '.jsx', 'js'] }], 'react/jsx-indent-props': [ERROR, 'tab'], 'react/jsx-indent': [ERROR, 'tab'], 'react/jsx-one-expression-per-line': OFF, 'react/destructuring-assignment': OFF, 'react/state-in-constructor': OFF, 'react/jsx-props-no-spreading': OFF, 'react/prefer-stateless-function': OFF, 'jsx-a11y/click-events-have-key-events': OFF, 'jsx-a11y/no-noninteractive-element-interactions': OFF, 'lines-between-class-members': [ERROR, 'always'], indent: [ERROR, 'tab', { SwitchCase: 1 }], 'linebreak-style': [ERROR, 'unix'], semi: [ERROR, 'always'], 'no-unused-expressions': WARN, 'no-plusplus': OFF, 'no-console': OFF, 'no-unused-vars': OFF, 'no-use-before-define': OFF, 'class-methods-use-this': ERROR, 'global-require': OFF }};eslint vscode 配置
ESLint 插件能够提供编辑器主动修复性能
装置实现增加配置到 .vscode/settings.json ：
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"], "typescript.tsdk": "./node_modules/typescript/lib", // 代替 vscode 的 ts 语法智能提醒 "editor.codeActionsOnSave": { "source.fixAll.eslint": true, },.eslintignore 和 .prettierignore
新建 .eslintignore 和 .prettierignore:
touch .eslintignore .prettierignore输出以下内容：
/node_modules/build/distStyleLint
接下来对立款式格调，装置两个的依赖包包：
npm install stylelint stylelint-config-standard -D我的项目根目录新建 .stylelintrc.js 文件:
touch .stylelintrc.js输出以下内容：
module.exports = { extends: ['stylelint-config-standard'], rules: { 'comment-empty-line-before': null, 'declaration-empty-line-before': null, 'function-name-case': 'lower', 'no-descending-specificity': null, 'no-invalid-double-slash-comments': null, 'rule-empty-line-before': 'always', }, ignoreFiles: ['node_modules/**/*', 'build/**/*'],}extends预设规定扩大rules具体的规定ignoreFiles疏忽配置字段
vscode同步配套插件 stylelint.vscode/settings.json中新增以下代码：
{ // 应用 stylelint 本身的校验即可 "css.validate": false, "less.validate": false, "scss.validate": false, "editor.codeActionsOnSave": { "source.fixAll.eslint": true, "source.fixAll.stylelint": true },}stylelint extends 和 stylelint plugins
- stylelint-config-rational-order 对关联属性进行分组和排序
- stylelint-declaration-block-no-ignored-properties 矛盾款式疏忽
npm install stylelint-order stylelint-config-rational-order stylelint-declaration-block-no-ignored-properties -D批改配置文件如下：
module.exports = { extends: ['stylelint-config-standard', 'stylelint-config-rational-order'], plugins: ['stylelint-order', 'stylelint-declaration-block-no-ignored-properties'], rules: { 'plugin/declaration-block-no-ignored-properties': true, 'comment-empty-line-before': null, 'declaration-empty-line-before': null, 'function-name-case': 'lower', 'no-descending-specificity': null, 'no-invalid-double-slash-comments': null, 'rule-empty-line-before': 'always' }, ignoreFiles: ['node_modules/**/*', 'build/**/*', 'dist/**/*']};解决 Stylelint 和 Prettier 的抵触
装置 stylelint-config-prettier:
npm install stylelint-config-prettier -D增加以下配置到 .stylelintrc.js 的 extends 中：
{ extends: [ // other configs ... 'stylelint-config-prettier' ]}lint 命令
咱们在 package.json 的 scripts 中减少以下三个配置：
"scripts": { "lint": "npm run lint-eslint && npm run lint-stylelint", "lint-eslint": "eslint -c .eslintrc.js --ext .ts,.tsx,.js src", "lint-stylelint": "stylelint --config .stylelintrc.js src/**/*.{less,css,scss}" },lint-staged
只针对 git 缓存区最新改变过的文件进行 格式化 和 lint 规定校验
husky
husky能够提供一些钩子，比方执行 git commit 之前的钩子 pre-commit ，借助这个钩子咱们就能执行 lint-staged 所提供的代码文件格式化及 lint 规定校验。
如果我的项目开始前没有初始化的.git文件，要先初始化git，否则husky会装置失败:
git init装置 lint-staged 和 husky :
npm install husky lint-staged -D在 package.json 中增加以下代码:
{ "husky": { "hooks": { "pre-commit": "lint-staged", } }, "lint-staged": { "*.{ts,tsx,js}": [ "eslint --config .eslintrc.js" ], "*.{css,less,scss}": [ "stylelint --config .stylelintrc.js" ], "*.{ts,tsx,js,json,html,yml,css,less,scss,md}": [ "prettier --write" ] },}commitlint + changelog
在多人合作的我的项目中，如果 git 的提交阐明精准，在前期合作以及 bug 解决时会变得有据可查，我的项目的开发能够依据标准的提交阐明疾速生成开发日志，从而不便开发者或用户追踪我的项目的开发信息和性能个性。
倡议浏览 Commit message 和 Change log 编写指南（阮一峰）
commitlint 能够帮忙咱们在 git commit 时校验 message 格局是否符合规范，conventional-changelog 能够帮忙咱们疾速生成 changelog
commitizen 能够在命令行中进行可视化的 git commit 操作，这里不作配置
装置 commitlint 相干依赖:
npm install @commitlint/cli @commitlint/config-conventional -D@commitlint/config-conventional 相似 eslint 配置文件中的 extends ，它是官网举荐的 angular 格调的 commitlint 配置，提供了大量的 lint 规定
根目录新建文件 .commitlintrc.js :
touch .commitlintrc.js写入以下代码：
/** * build : 扭转了build工具 如 webpack * ci : 继续集成新增 * chore : 构建过程或辅助工具的变动 * feat : 新性能 * docs : 文档扭转 * fix : 修复bug * perf : 性能优化 * refactor : 某个已有性能重构 * revert : 撤销上一次的 commit * style : 代码格局扭转 * test : 减少测试 * anno: 减少正文 */module.exports = { extends: ['@commitlint/config-conventional'], rules: { 'type-enum': [ 2, 'always', ['build', 'ci', 'chore', 'docs', 'feat', 'fix', 'perf', 'refactor', 'revert', 'style', 'test', 'anno'], ], },};package.json 的 husky 配置，减少一个钩子：
{ "husky": { "hooks": { "pre-commit": "lint-staged", "commit-msg": "commitlint --config .commitlintrc.js -E HUSKY_GIT_PARAMS" } },}-E HUSKY_GIT_PARAMS 简略了解就是会拿到咱们的 message ，而后 commitlint 再去进行 lint 校验。
装置依赖changelog：
npm install conventional-changelog-cli -D在 package.json 的 scripts 下减少一个命令:
{ "scripts": { "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s", },}之后就能够通过 npm run changelog 生成 angular 格调的 changelog ，须要留神的是，下面这条命令产生的 changelog 是基于上次 tag 版本之后的变更（feat、fix 等等）所产生
测试：
# 提交所有变动到缓存区git add -A# 把暂存区的所有批改提交到分支git commit -m "chore: add commitlint to force commit style"git push origin master