跳到主要内容

规范配置

  • js => eslint => @antfu/eslint-config
  • git => husky、lint-staged、commitlint
    • 当配置完husky和lint-staged时，提交代码时候，就会自动触发代码的检测

eslint​

  • 检测js代码、js语法、js代码风格
  • 直接使用@antfu/eslint-config，开箱即用，基本上不需要其他配置
    • 支持css格式规范、安装eslint-plugin-format、prettier
      • eslint-plugin-format 依赖prettier进行格式化

常用配置​

js
import antfu from '@antfu/eslint-config'

export default antfu({
  formatters: true,
  vue: {
    overrides: {
      'vue/block-order': [
        'error',
        {
          order: ['template', 'script', 'style'],
        },
      ],
      'vue/component-name-in-template-casing': [
        'error',
        'kebab-case',
        {
          registeredComponentsOnly: true,
          ignores: [],
        },
      ],
    },
  },
  rules: {
    'curly': 'off',
    'ts/consistent-type-definitions': ['interface' | 'type'],
  },
})

注意问题​

  • nuxt自动导入，eslint无法识别会报错
    • 需要在eslint配置的typescript中，引入tsconfig配置文件
    • 这样eslint就能正确识别到typescript的类型导入
js
import antfu from '@antfu/eslint-config'
export default antfu({
  typescript: {
    tsconfigPath: 'tsconfig.json',
  },
})

stylelint​

  • css规范
  • 使用 @antfu/eslint-config内置的css格式化即可，可以不需要stylelint

husky​

  • 在git提交或推送时，自动化检查提交信息、检查代码

配置步骤：

  • 安装
bash
# 安装
pnpm add husky -D
# 初始化husky, 生成.husky 文件夹
pnpm exec husky init

  • 当配置完lint-staged之后，在.husky配置自动化脚本

    text
    pnpm exec lint-staged

lint-staged​

  • git暂存区文件进行检测

配置步骤：

text
pnpm add lint-staged -D
  • package配置
json
"lint-staged": {
   "*.{js,jsx,vue,ts,tsx}": [
     "eslint --fix",
     "prettier --write"
   ]
 }

commitlint​

  • commit规范
  • 使用cz-git插件

配置步骤:

  • 安装
bash
pnpm add cz-git commitizen -D
  • package配置
json
"script":{
	"commit": "git-cz"
 },
"config": {
    "commitizen": {
      "path": "node_modules/cz-git"
    }
  }