搭建规范的前端项目工程，husky eslint prettier stylelint commitlint commitizen

Vue 3 + TypeScript + Vite

搭建 husky eslint prettier commitlint commitizen 规范的项目

一、安装 eslint

npm i eslint -D
执行初始化
npx eslint --init
按步骤走完
[图片上传失败...(image-a6e2-1680267204631)]

会生成.eslintrc 文件

生成的 eslintrc 配置需要改一下，不然 vue 文件会报 Parsing error: ‘＞‘ expected

修改

// before
// parser: '@typescript-eslint/parser',
// parserOptions: {
//   ecmaVersion: 'latest',
//   sourceType: 'module'
// },

// now
"parser": "vue-eslint-parser",
  "parserOptions":{
  "parser":"@typescript-eslint/parser",
},

二、安装 prettier

npm i prettier -D
手动新建 .prettierrc，写点基础配置，如下

{
  "semi": true,
  "tabWidth": 2,
  "trailingComma": "none",
  "singleQuote": true,
  "arrowParens": "avoid"
}

eslint 与 prettier 结合使用
安装依赖
npm i eslint-config-prettier eslint-plugin-prettier -D
配置.eslintrc 文件
把插件使用上

module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
+    'plugin:prettier/recommended'
  ],
}

三、安装 stylelint

安装 14 版本

相关依赖

    "postcss": "8.4.12",
    "postcss-html": "1.3.0",
    "stylelint": "14.10.0",
    "stylelint-config-html": "1.0.0",
    "stylelint-config-prettier": "9.0.3",
    "stylelint-config-recommended": "7.0.0",
    "stylelint-config-recommended-scss": "8.0.0",
    "stylelint-config-recommended-vue": "1.4.0",
    "stylelint-config-standard": "25.0.0",
    "stylelint-config-standard-scss": "4.0.0",
    "stylelint-order": "6.0.3",

命令

npm i [email protected] [email protected] [email protected] [email protected] [email protected]

配置文件 stylelint.config.js

module.exports = {
  defaultSeverity: 'error',
  extends: [
    'stylelint-config-standard-scss',
    'stylelint-config-recommended-vue',
    'stylelint-config-prettier'
  ],
  plugins: ['stylelint-order'],
  rules: {
    'max-empty-lines': 1,
    'order/properties-order': [
      'position',
      'top',
      'right',
      'bottom',
      'left',
      'z-index',
      'display',
      'justify-content',
      'align-items',
      'float',
      'clear',
      'overflow',
      'overflow-x',
      'overflow-y',
      'margin',
      'margin-top',
      'margin-right',
      'margin-bottom',
      'margin-left',
      'padding',
      'padding-top',
      'padding-right',
      'padding-bottom',
      'padding-left',
      'width',
      'min-width',
      'max-width',
      'height',
      'min-height',
      'max-height',
      'font-size',
      'font-family',
      'font-weight',
      'border',
      'border-style',
      'border-width',
      'border-color',
      'border-top',
      'border-top-style',
      'border-top-width',
      'border-top-color',
      'border-right',
      'border-right-style',
      'border-right-width',
      'border-right-color',
      'border-bottom',
      'border-bottom-style',
      'border-bottom-width',
      'border-bottom-color',
      'border-left',
      'border-left-style',
      'border-left-width',
      'border-left-color',
      'border-radius',
      'text-align',
      'text-justify',
      'text-indent',
      'text-overflow',
      'text-decoration',
      'white-space',
      'color',
      'background',
      'background-position',
      'background-repeat',
      'background-size',
      'background-color',
      'background-clip',
      'opacity',
      'filter',
      'list-style',
      'outline',
      'visibility',
      'box-shadow',
      'text-shadow',
      'resize',
      'transition'
    ]
  },
  // 指定需要忽略的文件
  ignoreFiles: [
    '**/*.js',
    '**/*.jsx',
    '**/*.ts',
    '**/*.tsx',
    '**/*.png',
    '**/*.ttf',
    '**/*.woff',
    '**/*.json',
    '**/*.md',
    '**/*.html'
  ]
};

文件忽略校验方法

// 忽略整個檔案
/* stylelint-disable */

// 忽略下一行
/* stylelint-disable-next-line */

package.json 命令

stylelint-check 命令中的 stylelint-config-prettier-check 为 stylelint-config-prettier 附带一个小 CLI 工具，可帮助您检查您的配置是否包含任何与 Prettier 冲突的规则。

{
  "scripts": {
    "lint:style": "stylelint \"**/*.{css,scss,vue}\"",
    "fix:style": "stylelint \"**/*.{css,scss,vue}\" --fix",
    "stylelint:check": "stylelint-config-prettier-check"
  }
}

安装 15 版本（会警告）

装 15 的话会警告，因为移除了很多规则
会报很多规则启用的警告

[图片上传失败...(image-51b80d-1680267204631)]

相关依赖

{
  "postcss": "^8.4.21",
  "postcss-html": "^1.5.0",
  "stylelint": "^15.3.0",
  "stylelint-config-html": "^1.1.0",
  "stylelint-config-prettier": "9.0.3",
  "stylelint-config-recommended": "^11.0.0",
  "stylelint-config-recommended-scss": "^9.0.1",
  "stylelint-config-recommended-vue": "1.4.0",
  "stylelint-config-standard": "^31.0.0",
  "stylelint-config-standard-scss": "7.0.1",
  "stylelint-order": "^6.0.3"
}

配置文件 stylelint.config.js

extends: [
    'stylelint-config-standard',
    'stylelint-config-prettier',
    'stylelint-config-html/vue',
    'stylelint-config-recommended-vue/scss',
    'stylelint-config-recommended-scss'
],
plugins: ['stylelint-order'],
rules: {
    'order/properties-order': [
      'position',
      'top',
      'right',
      'bottom',
      'left',
      'z-index',
      'display',
      'justify-content',
      'align-items',
      'float',
      'clear',
      'overflow',
      'overflow-x',
      'overflow-y',
      'margin',
      'margin-top',
      'margin-right',
      'margin-bottom',
      'margin-left',
      'padding',
      'padding-top',
      'padding-right',
      'padding-bottom',
      'padding-left',
      'width',
      'min-width',
      'max-width',
      'height',
      'min-height',
      'max-height',
      'font-size',
      'font-family',
      'font-weight',
      'border',
      'border-style',
      'border-width',
      'border-color',
      'border-top',
      'border-top-style',
      'border-top-width',
      'border-top-color',
      'border-right',
      'border-right-style',
      'border-right-width',
      'border-right-color',
      'border-bottom',
      'border-bottom-style',
      'border-bottom-width',
      'border-bottom-color',
      'border-left',
      'border-left-style',
      'border-left-width',
      'border-left-color',
      'border-radius',
      'text-align',
      'text-justify',
      'text-indent',
      'text-overflow',
      'text-decoration',
      'white-space',
      'color',
      'background',
      'background-position',
      'background-repeat',
      'background-size',
      'background-color',
      'background-clip',
      'opacity',
      'filter',
      'list-style',
      'outline',
      'visibility',
      'box-shadow',
      'text-shadow',
      'resize',
      'transition'
    ]
  },

三、安装 husky lint-staged

husky----------操作 git 钩子的工具
lint-staged----本地暂存代码检查工具

npm i lint-staged husky -D

设置脚本：npm set-script prepare "husky install"
会在 packages.json 追加一条 script
"prepare":"husky install"

启动脚本：npm run prepare
会生成.husky 目录

添加 git 钩子命令
npx husky add .husky/pre-commit "npx lint-staged"

创建.lintstagedrc.json

{
  "*.{js,jsx,ts,tsx,vue}": "eslint --ext .vue,.js,.ts src/"
}
或者
{
  "*.{vue,js,ts,jsx,tsx,css,sass,scss,json,md}": ["prettier --write"],
  "*.{vue,css,sass,scss}": ["stylelint --fix"],
  "*.{vue,js,jsx,ts,jsx,tsx}": ["eslint --fix"]
}

四、安装 Commitlint

Commitlint：用于校验填写的 commit message 是否符合设定的规范

npm i commitlint @commitlint/config-conventional -D

添加 husky 钩子
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

五、安装 commitizen

Commitizen：是一个命令行提示工具，它主要用于帮助我们更快地写出规范的 commit message

npm i commitizen -g 全局安装

可选：使用 cz-conventional-changelog 规则
npm i cz-conventional-changelog -D
再执行

npx commitizen init cz-conventional-changelog --save-dev --save-exact
# npm commitizen init cz-conventional-changelog --save-dev --save-exact
# yarn commitizen init cz-conventional-changelog --yarn --dev --exact
# pnpm commitizen init cz-conventional-changelog --pnpm --save-dev --save-exact

上面的命令会在 package 里添加

 "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
 }

可选：使用自己的规则

npm i -D commitlint-config-cz cz-customizable

把 package.json 里的 commitizen 配置改成使用 cz-customizable

"config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
 }

新建 commitlint.config.js 文件

module.exports = {
  // 使用 .cz.config.js里的规则
  extends: ['cz'],
  rules: {
    // 自定义
  }
};

新建 .cz-config.js

  'use strict'
  module.exports = {
    types: [
      { value: '✨新增', name: '新增:    新的内容' },
      { value: '修复', name: '修复:    修复一个Bug' },
      { value: '文档', name: '文档:    变更的只有文档' },
      { value: '格式', name: '格式:    空格, 分号等格式修复' },
      { value: '♻️重构', name: '重构:    代码重构，注意和特性、修复区分开' },
      { value: '⚡️性能', name: '性能:    提升性能' },
      { value: '✅测试', name: '测试:    添加一个测试' },
      { value: '工具', name: '工具:    开发工具变动(构建、脚手架工具等)' },
      { value: '⏪回滚', name: '回滚:    代码回退' }
    ],
    scopes: [
      { name: 'leetcode' },
      { name: 'javascript' },
      { name: 'typescript' },
      { name: 'Vue' },
      { name: 'node' }
    ],
    // it needs to match the value for field type. Eg.: 'fix'
    /*  scopeOverrides: {
      fix: [
        {name: 'merge'},
        {name: 'style'},
        {name: 'e2eTest'},
        {name: 'unitTest'}
      ]
    },  */
    // override the messages, defaults are as follows
    messages: {
      type: '选择一种你的提交类型:',
      scope: '选择一个scope (可选):',
      // used if allowCustomScopes is true
      customScope: 'Denote the SCOPE of this change:',
      subject: '短说明:\n',
      body: '长说明，使用"|"换行(可选)：\n',
      breaking: '非兼容性说明 (可选):\n',
      footer: '关联关闭的issue，例如：#31, #34(可选):\n',
      confirmCommit: '确定提交说明?(yes/no)'
    },
    allowCustomScopes: true,
    allowBreakingChanges: ['特性', '修复'],
    // limit subject length
    subjectLimit: 100
  }

最后使用 git cz 命令即可有提示的提交代码