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

一、关于.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'