前端项目中配置自动格式化的方法

前端项目中配置自动格式化的方法

husky

https://www.npmjs.com/package/husky

Requires Node >= 10 and Git >= 2.13.0

husky 是用来设置 git hooks 的工具，可以用来在 commit、push 之前执行某些动作。

安装

npm install husky --save-dev

配置

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "npm test",
      "pre-push": "npm test",
      "...": "..."
    }
  }
}

pre-commit 对应命令将在 git commit 前执行，若命令返回值不为0，则将会阻止此次提交。

commitlint

commitlint 用来规范化提交信息，提交格式（注意冒号后面有空格）如下：

<type>: <subject>

常用的type类别有：

• feat：新功能
• fix：修补bug
• docs：文档
• style： 格式（不影响代码运行的变动）
• refactor：重构（即不是新增功能，也不是修改bug的代码变动）
• test：增加测试
• chore：构建过程或辅助工具的变动

安装

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

# 生成配置文件 .commitlintrc.js 或 commitlint.config.js
echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlintrc.js

配置

"husky": {
    "hooks": {
        "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"
    }
}

lint-staged

https://www.npmjs.com/package/lint-staged

编写代码时常需要格式化代码或其他操作以确保代码无误，但是若在编写代码过程中实时的进行又会占用资源且十分缓慢，实际上我们只要在提交前完成这些操作即可，lint-staged 正好就提供了这种能力。

lint-staged 可以在 commit 前，对暂存区的指定的文件进行特定操作。可以使用 glob 模式指定文件，然后设置可执行的命令或 shell 任务。注意 lint-staged 仅提供了过滤文件执行脚本的功能，其中过滤方法与命令脚本需要自行提供，并且只会对 commit 前加到暂存区的文件有效。

安装

npm install lint-staged --save-dev

配置

// package.json
{
   "lint-staged": {
     "*": " your-cmd "    
  }
}

假如你提交了 file1.ext，上述的配置就会执行 your-cmd file.ext

文件过滤

# 不包含 / 的，将忽略目录并在所有文件中进行匹配 
"*.js"			将匹配所有 js 文件
"!(*test).js"	将匹配所有 js 文件，除了以 test.js 结尾的

# 包含 / 的，将会匹配目录
"./*.js" 		将匹配根目录中的所有 js 文件
"foo/**/\*.js"	将匹配 foo 目录下的所有 js 文件

命令

可以执行 npm 安装的本地或全局命令，也可以执行环境中的命令。

"*.js": "eslint --fix"  // 执行一条命令
"*.js": ["eslint", "prettier --write"] // 执行多条命令

注意：版本10以后不需要在命令中加 git add 了，lint-staged 已经默认集成了

example

{
  "*.{js,jsx}": "eslint",
  "*.js": "eslint --fix",
  "*.js": "npm run my-custom-script --",
  "*.{js,jsx,ts,tsx,md,html,css}": "prettier --write",
  "*.css": "stylelint",
  "*.scss": "stylelint --syntax=scss"
}

esLint

搞懂 ESLint 和 Prettierhttps://zhuanlan.zhihu.com/p/80574300

https://eslint.bootcss.com

安装

npm i -g eslint

配置

# 可使用 init 通过选择几个问题即可配置一个配置
eslint --init

eslint [options] files

prettier

https://prettier.io/

安装

npm install --save-dev prettier

配置

可参考以上内容如下配置，将会在commit前，将代码格式化。

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,json,css,md}": "prettier --write"
  }
}