vue3+ts+vite配置commit提交代码时语法检测

一.安装husky和 lint-staged

该文件是 Husky 的预提交钩子脚本，用于在提交前运行指定的命令。

cnpm install husky lint-staged -D

 package.json文件添加脚本

在 package.json 中配置lint-staged

注：这里 lint-staged 的配置是：在 git 的待提交的文件中，在 src 目录下的所有指定文件都要执行已配置的命令。

  "lint-staged": {
    "*.{vue,js,ts,tsx,jsx}": [
      "eslint --fix",
      "prettier --write --ignore-unknown"
    ],
    "**/*.{js,jsx,ts,tsx,vue,json}": [
      "prettier --write"
    ]
  },

执行命令创建 pre-commit 钩子

//使用执行 lint-statged 使用本地资源 不下载
npx husky add .husky/pre-commit "npx lint-staged --no-stash" 

执行命令完成后.husky文件夹中会有一个 pre-commit (修改其中的代码,就是提交代码前需要执行的检查代码的命令)。

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

# npx lint-staged
npx lint-staged --no-stash
# npm run format-code

二.lint-staged配置

配置package.json的相关命令 和 配置格式化配置

  "lint-staged": {
    "*.{vue,js,ts,tsx,jsx}": [
      "eslint --fix",
      "prettier --write --ignore-unknown"
    ],
    "**/*.{js,jsx,ts,tsx,vue,json}": [
      "prettier --write"
    ]
  },

安装语法风格插件

npm i eslint-plugin-prettier prettier eslint-config-prettier

在根目录建立.prettierrc.js

module.exports = {
  printWidth: 120, // 每行代码长度的最大值
  tabWidth: 2, // tab 键宽度
  useTabs: false, // 是否使用 tab 键代替空格缩进
  semi: false, // 是否在语句末尾加分号
  singleQuote: true, // 是否使用单引号代替双引号
  quoteProps: 'as-needed', // 对象字面量中属性名是否加引号，可选值为 always, as-needed
  jsxSingleQuote: false, // 在 JSX 中是否使用单引号代替双引号
  bracketSpacing: true, // 在对象字面量声明所使用的的花括号后（{）和前（}）输出空格
  jsxBracketSameLine: false, // 在多行 JSX 元素的最后一行的末尾放置 > 而不是单独放在下一行
  arrowParens: 'always', // 是否在箭头函数参数周围添加括号，可选值为 always, avoid
  rangeStart: 0, // 省略代码范围的起始行编号
  rangeEnd: Infinity, // 省略代码范围的结束行编号
  requirePragma: false, // 是否严格按照文件顶部的一些特殊注释格式化代码（有一定的类似于 ESLint 规则的效果）
  insertPragma: false, // 在文件顶部插入一个 @format 的特殊注释，用于提醒开发人员本文件已经格式化过了
  proseWrap: 'preserve', // 格式化 markdown 文件时是否保留文本换行
  trailingComma: 'none', //结尾是否添加逗号
  bracketSpacing: true, //对象括号俩边是否用空格隔开
  bracketSameLine: true, //组件最后的尖括号不另起一行
  arrowParens: 'always', //箭头函数参数始终添加括号
  htmlWhitespaceSensitivity: 'ignore', //html存在空格是不敏感的
  vueIndentScriptAndStyle: false, //vue 的script和style的内容是否缩进
  endOfLine: 'auto', //行结尾形式 mac和linux是\n  windows是\r\n
  singleAttributePerLine: false //组件或者标签的属性是否控制一行只显示一个属性
}

在根目录建立.prettierignore 用来配置不检测项

build/*
src/assets
node_modules
public
dist
auto-import.d.ts
components.d.ts
/dist/*
/html/*
.local
**/*.svg
**/*.sh

.eslintrc.js文件添加配置

extends: [

    'prettier',
    'plugin:prettier/recommended',
  ],

 我的完整配置如下:

const { defineConfig } = require('eslint-define-config')
module.exports = defineConfig({
  root: true,
  parserOptions: {
    parser: '@typescript-eslint/parser',
    sourceType: 'module', //模块化方案
  },
  parser: 'vue-eslint-parser',
  extends: [
    'plugin:vue/vue3-essential',
    'plugin:vue/vue3-strongly-recommended',
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended', // typescript-eslint推荐规则,
    'prettier',
    'plugin:prettier/recommended',
  ],
  env: {
    browser: true,
    node: true,
    es6: true,
    es2021: true,
    // 解决 defineProps and defineEmits generate no-undef warnings
    'vue/setup-compiler-macros': true,
  },
  /**
   * "off" 或 0 - 关闭规则
   * "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出),
   * "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
   */
  rules: {
    // 禁止使用 var
    'no-var': 'error',
    'no-console': 'off',
    'comma-dangle': [0, 'never'], //禁止使用拖尾逗号

    // 关闭名称校验  解决 error  Component name "index" should always be multi-word  vue/multi-word-component-names
    'vue/multi-word-component-names': 'off',
    '@typescript-eslint/no-explicit-any': 'off', // 可以使用 any 类型
    // 解决使用 require() Require statement not part of import statement. 的问题
    '@typescript-eslint/no-var-requires': 0,
    // https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/ban-types.md
    '@typescript-eslint/ban-types': [
      'error',
      {
        types: {
          // add a custom message to help explain why not to use it
          Foo: "Don't use Foo because it is unsafe",

          // add a custom message, AND tell the plugin how to fix it
          String: {
            message: 'Use string instead',
            fixWith: 'string',
          },

          '{}': {
            message: 'Use object instead',
            fixWith: 'object',
          },
        },
      },
    ],
    // 禁止出现未使用的变量
    '@typescript-eslint/no-unused-vars': ['error', { vars: 'all', args: 'after-used', ignoreRestSiblings: false }],
    'vue/html-indent': 'off',
    // 关闭此规则 使用 prettier 的格式化规则，
    'vue/max-attributes-per-line': ['off'],
    // 优先使用 const
    'prefer-const': [
      'error',
      {
        destructuring: 'any',
        ignoreReadBeforeAssign: false,
      },
    ],
  },
})

三.format-code.sh 检测代码提示(可选可不选)

在.husky文件下建立format-code.sh 并添加相应的内容 用于提交的时候代码提示

npx husky add .husky/format-code.sh

 在pre-commit下添加以下内容

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

npm run format-code

package.json文件中scripts对象中加入

 "format-code": "bash .husky/format-code.sh",

  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "prepare": "husky install",
    "lint": "eslint src --fix --ext .js,.ts,.jsx,.tsx,.vue && prettier --write --ignore-unknown",
    "format-code": "bash .husky/format-code.sh",
    "commit": "git cz"
  },

在format-code.sh添加如下内容

#!/bin/bash

red=$(tput setaf 1)
green=$(tput setaf 2)
reset=$(tput sgr0)

echo "》》》${green}开始按统一配置格式化暂存区代码...${reset}"

if ! npx lint-staged; then
    echo "《《《${red}格式化出错，请根据错误内容修改后再次尝试！${reset}"
    exit 1;
fi

echo "《《《${green}恭喜你，格式完成！${reset}"
exit

如何想绕过代码检查 直接提交代码

git commit -m "test" --no-verify

完整代码样式