代码规范-4大利器 prettier eslint stylelint husky

介绍 prettier eslint stylelint husky

• prettier: 用于代码保存时候，自动根据规则，格式化代码，主要依赖IDE工具如vscode。
• eslint : 代码检查，检查代码的格式，对js语法检测、限制和修复，并且给出建议，依赖于命令执行
• stylelint : 样式检查， 对css scss less等语法检测、限制和修复，并且给出建议，依赖于命令执行
• husky ： git提交前的钩子，用于拦截代码并针对不符合规范做提示，生成git提交备注的规范格式。

1.prettier 代码格式

1. 创建vite项目

npm create vite@latest

2. 首先安装vscode的prettier 插件

3. 测试

npx prettier --write .

这时候会把整个项目都格式化一遍

同时我们也把命令加入的package.json 执行命令里

  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview",
    "format": "npx prettier --write ."
  },

4. 创建个性prettier.config.js配置

一般prettier 有默认的配置，当然我们可以自己定制一个，再根目录创建prettier.config.js

// prettier.config.js
/**
 * @type {import('prettier').Config}
 * @see https://www.prettier.cn/docs/options.html
 */
export default {
  printWidth: 400, // 最大行长规则通常设置为 100 或 120。
  tabWidth: 2, // 指定每个标签缩进级别的空格数。
  useTabs: false, // 使用制表符而不是空格缩进行。
  semi: false, // true（默认）: 在每条语句的末尾添加一个分号。false：仅在可能导致 ASI 失败的行的开头添加分号。
  vueIndentScriptAndStyle: true, // Vue 文件脚本和样式标签缩进
  singleQuote: true, // 使用单引号而不是双引号
  quoteProps: "consistent", // 引用对象中的属性时，仅在需要时在对象属性周围添加引号。
  bracketSpacing: true, // 在对象文字中的括号之间打印空格。
  trailingComma: "none", // "none":没有尾随逗号。"es5": 在 ES5 中有效的尾随逗号（对象、数组等），TypeScript 中的类型参数中没有尾随逗号。"all"- 尽可能使用尾随逗号。
  bracketSameLine: false, // 将>多行 HTML（HTML、JSX、Vue、Angular）元素放在最后一行的末尾，而不是单独放在下一行（不适用于自闭合元素）。
  jsxSingleQuote: false, // 在 JSX 中使用单引号而不是双引号。
  arrowParens: "always", // 在唯一的箭头函数参数周围始终包含括号。
  insertPragma: false, // 插入编译指示
  requirePragma: false, // 需要编译指示
  proseWrap: "never", // 如果散文超过打印宽度，则换行
  htmlWhitespaceSensitivity: "strict", // 所有标签周围的空格（或缺少空格）被认为是重要的。
  endOfLine: "lf", // 确保在文本文件中仅使用 ( \n)换行，常见于 Linux 和 macOS 以及 git repos 内部。
  rangeStart: 0, // 格式化文件时，回到包含所选语句的第一行的开头。
};

5. vscode保存时候自动格式化

• 优化体验，配置保存时候自动格式化
• 先添加vscode 需要的配置 .vscode/settings.json

{
  "editor.formatOnSave": true,
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

然后 每次修改完代码就可以自动格式化

6.安装依赖

注意：这一步非必需，如果只用prettier一般不需要安装，但是后面的eslint-plugin-prettier 会依赖到，还是老老实实按安装。

npm i prettier@3.5.3 --save-dev

注意事项

有时候配置完也不生效，就需要整个vscode退出再打开才生效

2.eslint 语法与格式

1.快速构建版 eslint --init

npx eslint --init 创建所有配置

 npx eslint --init

依次输入下面选项

在根目录自动创建了eslint.config.js

import js from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";
import { defineConfig } from "eslint/config";


export default defineConfig([
  { files: ["**/*.{js,mjs,cjs,ts,mts,cts,vue}"], plugins: { js }, extends: ["js/recommended"] },
  { files: ["**/*.{js,mjs,cjs,ts,mts,cts,vue}"], languageOptions: { globals: globals.browser } },
  tseslint.configs.recommended,
  pluginVue.configs["flat/essential"],
  { files: ["**/*.vue"], languageOptions: { parserOptions: { parser: tseslint.parser } } },
]);

配置pakaage.json

同时我们也把命令加入的package.json 执行命令里

  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview",
    "format": "npx prettier --write .",
    "lint": "eslint",
    "lint:fix": "eslint --fix ."
  },

测试

我们在main.ts里面加入 let a = "xx";

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";

let a = "xx";
console.log(a);
createApp(App).mount("#app");

运行检查

npm run lint

这时候就会提示,一些错误建议， 'a' is never reassigned. Use 'const' instead, 我们尝试用fix修复 运行下面命令

npm run lint:fix

执行后 let 编程了 const

安装eslint 插件

搜索安装eslint 的vscode插件

配置 .vscode/settings.json

这样在编辑的时候就可以实时看到eslint对应的效果

{
  "editor.formatOnSave": true,
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }, 
  "eslint.validate": ["javascript", "vue", "vue-html", "typescript", "html", "css", "scss", "less", "markdown"]
}

注意事项

• 有时候配置完也不生效，就需要整个vscode退出再打开才生效
• 有些ts文件打开后并不能实时提示，可以把文件关闭后再打开，或者等待一会

2.快速构建 antfu eslint

安装

npm i @antfu/eslint-config@4.17.0 --save-dev

eslint.config.js

import antfu from '@antfu/eslint-config'
export default antfu()

常用的定制配置

import antfu from '@antfu/eslint-config'

export default antfu(
  {
    type: 'app', // 项目类型为 app/lib

    stylistic: {
      indent: 2, // 缩进风格
      quotes: 'single', // 单引号
    },

    typescript: true,
    vue: {
      overrides: {
        // enforce order of component top-level elements 自定义 Vue 文件中标签的顺序，模板 -> 脚本 -> 样式
        'vue/block-order': [
          'error',
          {
            order: ['template', 'script', 'style'],
          },
        ],
      },
    },
    jsonc: false,
    yaml: false,
    ignores: [
      '**/fixtures', // 忽略特定路径下的文件（如 fixtures 目录）
    ],
  },

  // TypeScript 文件的规则配置
  {
    files: ['**/*.ts'], // 仅匹配 TypeScript 文件
    rules: {},
  },
  {
    rules: {},
  },
)

配置.vscode/settings.json

 "eslint.codeActionsOnSave.rules": null,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  }

测试

还是使用eslint 触发

   "scripts": {
    "lint": "eslint",
    "lint:fix": "eslint --fix ."
  },

运行

npm run lint

检查当前使用的eslint 规则

npx @eslint/config-inspector@latest

访问 http://localhost:7777/configs

3.按部就班版

一步步配置

安装eslint

npm i eslint@9.23.0 --save-dev

手工创建eslint.config.js

eslint.config.js

安装依赖库

@eslint/js 官方提供的规则

npm i @eslint/js@9.23.0 --save-dev

eslint.config.js

import eslint from '@eslint/js'

export default [
  {
    ignores: [
      'public',
      'dist',
      'node_modules',
      "package.json",
      "README.md",
      "src/assets",
    ],
  },
  eslint.configs.recommended,
]

添加js规则

加入自己定制逻辑rules

import eslint from '@eslint/js'
export default [
  {
    ignores: [
      'public',
      'dist',
      'node_modules',
      "package.json",
      "README.md",
      "src/assets",
    ],
  },

  eslint.configs.recommended,
   {
    rules: {
      'no-console': 'off', // : 'warn', // 生产环境中警告 console 使用，开发环境中关闭规则
      'no-debugger': 'off', // import.meta.env.NODE_ENV === 'production' ? 'warn' : 'warn', // 生产环境中警告 debugger 使用，开发环境中关闭规则
      '@typescript-eslint/no-explicit-any': 'off',
      'vue/multi-word-component-names': 'off',
      'no-unused-vars': 'off', // 关闭未使用变量警告
      '@typescript-eslint/no-unused-vars': 'off', // 关闭未使用变量警告
      'linebreak-style': ['warn', 'windows'], // 使用 Unix 风格的换行符
      'quotes': ['warn', 'single'], // 使用单引号
      'semi': ['warn', 'never'] // 语句末尾不加分号
    }
  }
]

 

添加全局设置

npm i globals@16.0.0 -D

使用浏览器的console 会提示错误

import eslint from '@eslint/js'
export default [
  {
    ignores: [
      'public',
      'dist',
      'node_modules',
      "package.json",
      "README.md",
      "src/assets",
    ],
  },

  eslint.configs.recommended,
   {
    rules: {
      'no-console': 'off', // : 'warn', // 生产环境中警告 console 使用，开发环境中关闭规则
      'no-debugger': 'off', // import.meta.env.NODE_ENV === 'production' ? 'warn' : 'warn', // 生产环境中警告 debugger 使用，开发环境中关闭规则
      '@typescript-eslint/no-explicit-any': 'off',
      'vue/multi-word-component-names': 'off',
      'no-unused-vars': 'off', // 关闭未使用变量警告
      '@typescript-eslint/no-unused-vars': 'off', // 关闭未使用变量警告
      'linebreak-style': ['warn', 'windows'], // 使用 Unix 风格的换行符
      'quotes': ['warn', 'single'], // 使用单引号
      'semi': ['warn', 'never'] // 语句末尾不加分号
    }
  },
    {
    languageOptions: {
      globals: {
        ...globals.browser, 
      },
    },
  }
]
 

添加 ts 与 vue支持

npm i eslint-plugin-vue@10.0.0 typescript-eslint@8.37.0 -D

import eslint from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";
import eslintPluginVue from "eslint-plugin-vue";

export default [
  {
    ignores: [
      "public",
      "dist",
      "node_modules",
      "package.json",
      "README.md",
      "src/assets",
    ],
  },

  eslint.configs.recommended,
  ...eslintPluginVue.configs["flat/recommended"],
  {
    rules: {
      "no-console": "off", // : 'warn', // 生产环境中警告 console 使用，开发环境中关闭规则
      "no-debugger": "off", // import.meta.env.NODE_ENV === 'production' ? 'warn' : 'warn', // 生产环境中警告 debugger 使用，开发环境中关闭规则
      "@typescript-eslint/no-explicit-any": "off",
      "vue/multi-word-component-names": "off",
      "no-unused-vars": "off", // 关闭未使用变量警告
      "@typescript-eslint/no-unused-vars": "off", // 关闭未使用变量警告
      "linebreak-style": ["warn", "windows"], // 使用 Unix 风格的换行符
      quotes: ["warn", "single"], // 使用单引号
      semi: ["warn", "never"], // 语句末尾不加分号
    },
  },
  {
    languageOptions: {
      globals: {
        ...globals.browser,
      },
    },
  },

  /**
   * vue 规则
   */
  {
    files: ["**/*.vue"],
    languageOptions: {
      parserOptions: {
        /** typescript项目需要用到这个 */
        parser: tseslint.parser,
        ecmaVersion: "latest",
        /** 允许在.vue 文件中使用 JSX */
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
    rules: {
      // 在这里追加 vue 规则
      "vue/no-mutating-props": [
        "error",
        {
          shallowOnly: true,
        },
      ],
    },
  },
];

调整 ts 规则

加入 tseslint.config（） 和 ...tseslint.configs.recommended,

import eslint from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";
import eslintPluginVue from "eslint-plugin-vue";

export default tseslint.config (
  {
    ignores: [
      "public",
      "dist",
      "node_modules",
      "package.json",
      "README.md",
      "src/assets",
    ],
  },

  eslint.configs.recommended, 
  ...tseslint.configs.recommended, // 添加ts配置
  ...eslintPluginVue.configs["flat/recommended"],
  {
    rules: {
      "no-console": "off", // : 'warn', // 生产环境中警告 console 使用，开发环境中关闭规则
      "no-debugger": "off", // import.meta.env.NODE_ENV === 'production' ? 'warn' : 'warn', // 生产环境中警告 debugger 使用，开发环境中关闭规则
      "@typescript-eslint/no-explicit-any": "off",
      "vue/multi-word-component-names": "off",
      "no-unused-vars": "off", // 关闭未使用变量警告
      "@typescript-eslint/no-unused-vars": "off", // 关闭未使用变量警告
      "linebreak-style": ["warn", "windows"], // 使用 Unix 风格的换行符
      quotes: ["warn", "single"], // 使用单引号
      semi: ["warn", "never"], // 语句末尾不加分号
    },
  },
  {
    languageOptions: {
      globals: {
        ...globals.browser,
      },
    },
  },

  /**
   * vue 规则
   */
  {
    files: ["**/*.vue"],
    languageOptions: {
      parserOptions: {
        /** typescript项目需要用到这个 */
        parser: tseslint.parser,
        ecmaVersion: "latest",
        /** 允许在.vue 文件中使用 JSX */
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
    rules: {
      // 在这里追加 vue 规则
      "vue/no-mutating-props": [
        "error",
        {
          shallowOnly: true,
        },
      ],
    },
  },
)

加入样式处理

npm i @stylistic/eslint-plugin@4.2.0 -D

import stylistic from '@stylistic/eslint-plugin'  
import eslint from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";
import eslintPluginVue from "eslint-plugin-vue";

export default tseslint.config (
  {
    ignores: [
      "public",
      "dist",
      "node_modules",
      "package.json",
      "README.md",
      "src/assets",
    ],
  },

  eslint.configs.recommended, 
  ...tseslint.configs.recommended, // 添加ts配置
  ...eslintPluginVue.configs["flat/recommended"],

  stylistic.configs.customize({
    indent: 2,
    quotes: 'single',
    semi: false,
    jsx: true,
    braceStyle: '1tbs',
    arrowParens: 'always',
  }), 
  {
    rules: {
      "no-console": "off", // : 'warn', // 生产环境中警告 console 使用，开发环境中关闭规则
      "no-debugger": "off", // import.meta.env.NODE_ENV === 'production' ? 'warn' : 'warn', // 生产环境中警告 debugger 使用，开发环境中关闭规则
      "@typescript-eslint/no-explicit-any": "off",
      "vue/multi-word-component-names": "off",
      "no-unused-vars": "off", // 关闭未使用变量警告
      "@typescript-eslint/no-unused-vars": "off", // 关闭未使用变量警告
      "linebreak-style": ["warn", "windows"], // 使用 Unix 风格的换行符
      quotes: ["warn", "single"], // 使用单引号
      semi: ["warn", "never"], // 语句末尾不加分号
    },
  },
  {
    languageOptions: {
      globals: {
        ...globals.browser,
      },
    },
  },

  /**
   * vue 规则
   */
  {
    files: ["**/*.vue"],
    languageOptions: {
      parserOptions: {
        /** typescript项目需要用到这个 */
        parser: tseslint.parser,
        ecmaVersion: "latest",
        /** 允许在.vue 文件中使用 JSX */
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
    rules: {
      // 在这里追加 vue 规则
      "vue/no-mutating-props": [
        "error",
        {
          shallowOnly: true,
        },
      ],
    },
  },
)

eslint 兼容 Prettier

由于存在eslint 和 Prettier 两个格式化规则，为了避免冲突 在eslint.config.js 要配置上 prettier的格式化信息

npm i eslint-plugin-prettier@5.2.5 -D

...
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'

export default tseslint.config (
  {
    ignores: [
      "public",
      "dist",
      "node_modules",
      "package.json",
      "README.md",
      "src/assets",
    ],
  },

  eslint.configs.recommended, 
  ...tseslint.configs.recommended, // 添加ts配置
  ...eslintPluginVue.configs["flat/recommended"],
 
 ...
  eslintPluginPrettierRecommended // 最后加上 prettier的规则
)

部分会提示找不到 Error: Cannot find module 'eslint-config-prettier'

运行eslint 会提示：node_modules/eslint-plugin-prettier/recommended.js 找不到 Error: Cannot find module 'eslint-config-prettier'

方法1: 安装prettier

npm i prettier@3.5.3 --save-dev

方法2: 安装eslint-config-prettier

npm i  eslint-config-prettier@10.1.5 --save-dev

注意事项

有时候配置完也不生效，就需要整个vscode退出再打开才生效

实际应用中记得指定具体的路径如：

 "scripts": {
    "lint:eslint:fix": "eslint --cache --max-warnings 0  \"{src,mock,build}/**/*.{vue,js,ts,tsx}\" --fix",
    "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock,build}/**/*.{vue,js,ts,tsx}\""
   }

3.stylelint 样式格式化

1. 安装所有插件

安装 stylelint基础包

npm install stylelint stylelint-prettier stylelint-config-standard stylelint-config-standard-scss stylelint-config-recommended-vue stylelint-config-recess-order stylelint-order stylelint-scss stylelint-config-html  -D

安装对postcss的支持（貌似不安装也可以）

npm install postcss  postcss-html postcss-load-config postcss-scss  -D

2. 创建个性stylelint.config.js配置

stylelint.config.js

// @ts-check

/** @type {import("stylelint").Config} */
export default {
  extends: ['stylelint-config-standard', 'stylelint-config-html/vue', 'stylelint-config-recess-order'],
  plugins: ['stylelint-scss', 'stylelint-order', 'stylelint-prettier'],
  overrides: [
    {
      files: ['**/*.(css|html|vue)'],
      customSyntax: 'postcss-html',
    },
    {
      files: ['*.scss', '**/*.scss'],
      customSyntax: 'postcss-scss',
      extends: ['stylelint-config-standard-scss', 'stylelint-config-recommended-vue/scss'],
    },
  ],
  rules: {
    'prettier/prettier': true,
    'selector-class-pattern': null,
    'no-descending-specificity': null,
    'scss/dollar-variable-pattern': null,
    'declaration-property-value-no-unknown': null,
    'custom-property-pattern': null,
    'scss/at-function-pattern': null,
    'selector-pseudo-class-no-unknown': [
      true,
      {
        ignorePseudoClasses: ['deep', 'global'],
      },
    ],
    'selector-pseudo-element-no-unknown': [
      true,
      {
        ignorePseudoElements: ['v-deep', 'v-global', 'v-slotted'],
      },
    ],
    'at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: ['tailwind', 'apply', 'variants', 'responsive', 'screen', 'function', 'if', 'each', 'include', 'mixin', 'use', 'else', 'return', 'at-root'],
      },
    ],
    'rule-empty-line-before': [
      'always',
      {
        ignore: ['after-comment', 'first-nested'],
      },
    ],
    'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
    'order/order': [
      [
        'dollar-variables',
        'custom-properties',
        'at-rules',
        'declarations',
        {
          type: 'at-rule',
          name: 'supports',
        },
        {
          type: 'at-rule',
          name: 'media',
        },
        'rules',
      ],
      { severity: 'warning' },
    ],
  },
  ignoreFiles: ['**/*.js', '**/*.ts', '**/*.jsx', '**/*.tsx', 'report.html'],
}

添加 npm 脚本（package.json）

{
  "scripts": {
    "lint:style": "stylelint "**/*.{css,scss,vue}"", // 检查样式问题
    "lint:style:fix": "stylelint "**/*.{css,scss,vue}" --fix" // 自动修复可修复的问题
  }
} 

加入缓存优化的方式

{
  "scripts": {
      "lint:stylelint": "stylelint --cache  \"**/*.{html,vue,css,scss}\" --cache-location node_modules/.cache/stylelint/",
    "lint:stylelint:fix": "stylelint --cache --fix \"**/*.{html,vue,css,scss}\" --cache-location node_modules/.cache/stylelint/",
  }
} 

3. 测试

npm run lint:style

这时候会把自定目录的文件进行扫描

4.对vite开发模式支持

npm install vite-plugin-stylelint -D

vite.config.ts

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import stylelint from 'vite-plugin-stylelint'

export default defineConfig({
  plugins: [
    vue(),
    // 配置 Stylelint 插件
    stylelint({
      // 启用开发服务器热更新时检查
      lintOnStart: true,
      // 保存时自动检查
      emitWarning: true,
      // 不阻塞 Vite 构建
      emitError: false,
      // 排除 node_modules
      exclude: /node_modules/
    })
  ]
})

5. 首先安装vscode的stylelint 插件

5. vscode保存时候自动格式化

• 优化体验，配置保存时候自动格式化
• 先添加vscode 需要的配置 .vscode/settings.json

{
  // 1. 启用 Stylelint 对目标文件的校验
  "stylelint.validate": [
    "css",
    "scss",
    "vue", // 支持 Vue 单文件组件的 <style> 标签
    "less", // 若使用 Less，添加此项
    "postcss" // 若使用 PostCSS，添加此项
  ],

  // 2. 保存文件时自动修复 Stylelint 可修复的错误（如格式问题）
  "editor.formatOnSave": true,

  // 3. 禁用 VS Code 内置的 CSS 校验（避免与 Stylelint 冲突）
  "css.validate": false,
  "scss.validate": false,
  "less.validate": false,

  // 4. 可选：自定义 Stylelint 配置文件路径（默认读取项目根目录）
  // 若配置文件不在根目录，需指定路径，例如：
  // "stylelint.configFile": ".config/stylelint.config.js",

  // 5. 可选：忽略某些文件不进行 Stylelint 校验
  "stylelint.ignoreFiles": [
    "node_modules/**/*",
    "dist/**/*",
    "public/**/*"
  ],

  // 6. 可选：设置 Stylelint 报错级别（error/warning/info）
  "stylelint.severity": "error"
}

然后 每次修改完代码就可以自动格式化

4.husky 提交钩子

新版husky

安装

npm i husky # git提交的钩子

初始化

npx husky init

生成文件夹

或者手工在 package.json 加入

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

调整husky 配置

修改.husky/pre-commit 文件 加入npm run lint

本地暂存git add .并且提交代码时候，git commit -m 'feat: init' 控制台可以看出，先执行打印了lint的逻辑，没有问题 后面再出发git commit的逻辑

优化 只在本地缓存区处理

安装

npm i lint-staged  # 处理git缓存区的拦截处理

调整packge.json

加入 lint-staged 的命令处理

{
  "lint-staged": {
    "*.{js,ts,vue}": ["eslint --fix", "prettier --write"]
  }
}

修改 husky配置

#!/usr/bin/env sh

# npm run lint:fix
npx lint-staged #  使用上面配置的lint-staged

测试

再次运行，会显示有两个要运行的命令包含 eslint --fix 和 perttier --write

老版husky

安装husky

#添加 husky 注意只安装4.0版本 , 5.0实现方式不一样
npm install husky@4.0 --save-dev

老版本通过修改package.json，来触发钩子

#在package.json 根节点添加入口， npm test为自己定义的命令
#这样在每次git commit -am 'xx' 的时候会触发pre-commit 对应的命令
"husky": {
  "hooks": {
    "pre-commit": "npm test"
  }
}, 

扩展

commitizen 规范提交的内容

#安装commitizen
npm install commitizen -g
#初始化 提交模版
commitizen init cz-conventional-changelog --save-dev --save-exact
#开始提交,根据提示框选择
git cz   

conventional-changelog-cli 生成最新的提交记录文档

#安装
npm install  conventional-changelog-cli --dev

修改 在package.json 根节点添加入口

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

测试

#执行 生成CHANGELOG.md
npm run genlog

踩坑日志

执行eslint 提示'XXX' is not defined no-undef

原因

在tsconfig没有引入头文件

解决

在tsconfig.json 设置

{ "include": ["types/**/*.d.ts"], }

执行eslint 提示 ESLint was configured to run on xxx using parserOptions.project

原因

在执行eslint 的时候没有指定文件夹。导致扫描了其他配置文件

解决1

在调用的命令 加上eslint "src/**/*.{vue,js,ts,tsx}"

解决2

可以在执行eslint的时候添加对系统tsconfig的扫描和支持。 缺点：会很慢

  {
    languageOptions: {
      parser: tseslint.parser,
      parserOptions: {
        project: './tsconfig.json',
        tsconfigRootDir: import.meta.dirname,
        extraFileExtensions: ['.vue'],
      },
    },
  },
  {
    // 特殊处理 不能直接配置上面的 ignores 忽略js，只能单独配置
    files: ['**/*.js', '/*.ts'],
    languageOptions: {
      parserOptions: {
        project: false, // 关闭类型检查
      },
    },
  },

eslint 执行的时候 时间比较长

原因

文件太多

解决

• 可以通过 --debug 查看输出
• 可以通过 time npx eslint 去显示时间

通过加入--cache 加速下一次比较

  "scripts": {
    "eslint:time": "time npx eslint   --max-warnings 0 \"src/**/*.{vue,js,ts,tsx}\" --debug",
    "eslint": "eslint --cache  --max-warnings 0  \"src/**/*.{vue,js,ts,tsx}\" ",

  },

参考代码

github.com/mjsong07/pr…