项目工程规范化

本文共--字 阅读约--分钟 | 浏览: -- Last Updated: 2022-07-22

引入husky

1、将husky添加到项目的开发依赖中

npm install -D husky

2、在package.json中设置我们需要的git hooks

{
  "scripts": {
    "prepare": "husky install"
  }
}

3、 进行初始化

npx husky install

4、添加git hooks，提交前进行代码lint，运行以下命令创建git hooks

npx husky add .husky/pre-commit "npm run lint"

即会生成一下代码 .husky/pre-commit：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
   
# 需要在git hooks之前执行的命令 通常用来在 commit-msg hook前校验
npm run lint

5、添加git hooks，进行提交时对commit-msg进行检查，运行以下命令 npx 创建git hooks

npx husky add .husky/commit-msg 'npm run commitlint'

即会生成一下代码类似上一步的代码，需要注意的时，此时需修改为：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

MSG=`awk '{printf("%s",$0)}' $1`
if [[ $MSG =~ ^(feat|fix|docs|style|refactor|perf|test|build|ci|chore|revert)(\(.*\))?:.*$ ]]
then
	echo -e "\033[32m commit success! \033[0m"
else
    echo -e "\033[31m Error: the commit message is irregular \033[m"
	echo -e "\033[31m Error: type must be one of [feat|fix|docs|style|refactor|perf|test|build|ci|chore|revert] \033[m"
	exit 1
fi

引入git-cz

1、安装

npm install -D commitizen

2、使用

npx commitizen init cz-conventional-changelog --save --save-exact

# 上面命令的就干了2件事，如果报错可以手动来执行

# 1、安装 cz-conventional-changelog 

npm i cz-conventional-changelog -D

# 2、在packages.json 中增加如下配置
"config": {
  "commitizen": {
    "path": "cz-conventional-changelog"
  }
}

以后，凡是用到git commit命令，一律改为使用git cz

{
  "scripts": {
    "commit": "git add . && git cz",
  }
}

支持生成changelog

1、安装

npm install -D conventional-changelog

为了方便使用，可以将其写入package.json的scripts字段。

2、使用

{
  "scripts": {
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
  }
}

支持eslint

npm i eslint-plugin-vue@latest -D

npm i eslint-config-airbnb-base -D

npm i eslint-import-resolver-alias -D

npm i eslint-import-resolver-typescript -D

npm i eslint-plugin-import eslint-plugin-jsdoc eslint-plugin-no-null -D

npm i @vue/eslint-config-typescript -D

npm i @typescript-eslint/eslint-plugin @typescript-eslint/parser -D

// .eslintrc.js
module.exports = {
  root: true,
  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly',
  },
  env: {
    node: true,
    browser: true,
    jest: true,
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
    sourceType: 'module',
    tsconfigRootDir: '.',
    extraFileExtensions: [
      '.vue',
    ],
    ecmaFeatures: {
      tsx: true,
      jsx: true,
    },
  },
  plugins: [
    'vue', '@typescript-eslint', 'jsdoc', 'no-null', 'import',
  ],
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-strongly-recommended',
    'airbnb-base',
    '@vue/typescript/recommended',
  ],
  settings: {
    'import/parsers': {
      '@typescript-eslint/parser': ['.ts', '.tsx'],
    },
    'import/resolver': {
      typescript: {
        alwaysTryTypes: true,
        project: '/',
      },
      alias: {
        map: [['@', './src']],
        extensions: ['.ts', '.js', '.jsx', '.tsx', '.json', '.vue', '.hbs', '.d.ts'],
      },
      node: {
        paths: ['src'],
      },
    },
  },
  rules: {
    'max-len': ['error', {
      code: 300,
      comments: 500,
    }],
    'import/extensions': ['error', 'always', {
      ts: 'never', js: 'never', 'd.ts': 'never',
    }],
    'no-param-reassign': ['error', {
      props: true,
      ignorePropertyModificationsFor: [
        'state', // for vuex state
        'acc', // for reduce accumulators
        'e', // for e.returnvalue
      ],
    }],
    'no-use-before-define': 0,
    '@typescript-eslint/array-type': 'error',
    '@typescript-eslint/no-var-requires': 0,
    'linebreak-style': [0, 'error', 'windows'],
    'no-null/no-null': 0,
    'jsdoc/check-alignment': 'error',
    'import/no-extraneous-dependencies': 0,
    'import/prefer-default-export': 0,
    '@typescript-eslint/type-annotation-spacing': 'error',
    '@typescript-eslint/no-explicit-any': 'off',
    'no-plusplus': 0,
    'no-shadow': 'off',
    'no-nested-ternary': 'off',
    'no-unused-expressions': 'off',
    '@typescript-eslint/no-shadow': ['error'],
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)',
      ],
      env: {
        jest: true,
      },
    },
  ],
};