linter-config

v1.0.2

Published

2 years ago

> 项目开发规范配置，包含代码规范、Git 提交规范、样式规范、流程规范

Downloads

0High
0Medium
0Low

zhanping

Linter config

项目开发规范配置，包含代码规范、Git 提交规范、样式规范、流程规范

🔥 集成了项目开发规范相关的配置：eslint、prettier、stylelint、commitlint 等，简易、快速配置，无需安装相关依赖。

代码规范

推荐使用 AlloyTeam 的eslint-config-alloy配置规范，内置支持了 typescript/vue/react。

其设计理念：

样式相关的规则交于 prettier 管理
eslint 负责它更擅长的代码逻辑

Prettier

在项目目录下创建.prettierrc.js：

module.exports = require('linter-config/prettier.js')

Eslint

在项目目录下创建.eslintrc.js：

// 内置规则
module.exports = {
  extends: ['./node_modules/linter-config/base'],
}
// Typescript
module.exports = {
  extends: ['./node_modules/linter-config/typescript'],
}
// Vue
module.exports = {
  extends: ['./node_modules/linter-config/vue'],
}
// React
module.exports = {
  extends: ['./node_modules/linter-config/react'],
}

vscode 格式化

结合 vscode 实现在保存文件时自动修复 eslint 和 prettier 错误。

通过配置 .vscode/settings.json ：

{
  "files.eol": "\n",
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.validate": ["javascript", "javascriptreact", "vue", "typescript", "typescriptreact"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Git 提交规范

这里使用 commitlint 来规范提交信息，通过配置.commitlintrc.js：

module.export = require('linter-config/commitlint')

完成了配置还不够，还需要利用husky通过git hooks来校验提交信息，在package.json中配置：

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

Angular 规范

推荐使用Angular 规范，提交格式如下：

<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>

每次提交可以包含header、body、footer，并且必须包含header，提交的信息不能超过 100 字符。

header的格式包含提交类型(type)、作用用(scope)和主题(subject)。

提交类型

feat：增加新功能
fix：修复 bug
docs：对文档进行了修改
refactor：既不是修复 bug 也不是添加特征的代码重构
style：不影响代码运行的修改，比如空格、格式化、缺失的分号等
test：增加确实的测试或者矫正已存在的测试
chore：构建过程或辅助工具的变动

作用域

范围可以是任何指定提交更改位置的内容

主题

主题包括了对本次修改的简洁描述，有以下准则：

使用命令式，现在时态：change不是changed也不是changes
首字母不要大写
不在末尾添加句号.或。

引用提交的问题

如果本次提交目的是修改 issue 的话，需要在页脚引用该 issue

以关键字Closes、Fixes或Resolves开头，比如

Closes #234

如果修改了多个 bug，以逗号隔开

Closes #123, #245, #992

样式规范

这里使用 stylelint 来规范样式，通过配置.stylelintrc.js：

module.exports = require('linter-config/stylelint')

lint-staged

使用lint-staged在每次提交 commit 信息之前自动修复stylelint错误。在package.json中配置：

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": ["eslint --fix"],
    "*.[c|sc|le]ss": ["stylelint"]
  }
}