vite + vue3 + eslint + prettier + husky + lint-staged + commitlint + editorconfig 配置

MuYan2021-01-20规范

Eslint 代码检查

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

新建 .eslintrc.js 文件,内容如下,具体规则Eslint 规则文档open in new window

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "plugin:@typescript-eslint/recommended",
  ],
  overrides: [
    {
      env: {
        node: true,
      },
      files: [".eslintrc.{js,cjs}"],
      parserOptions: {
        sourceType: "script",
      },
    },
    {
      files: ["*.vue"],
      rules: {
        "vue/multi-word-component-names": "off",
      },
    },
  ],
  parserOptions: {
    ecmaVersion: "latest",
    parser: "@typescript-eslint/parser",
    sourceType: "module",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "vue/multi-word-component-names": "off", // 允许单字组件名称
  },
};

新建 .eslintignore 文件,添加忽略校验的文件

# .eslintignore
*.sh
node_modules
lib
*.md
*.scss
*.woff
*.ttf
.vscode
.idea
dist
mock
public
bin
build
config
index.html

prettier 代码风格

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

新建 .prettierrc 文件,具体配置内容查看文档prettier 配置文档open in new window

// .prettierrc
{
  "semi": false,
  "tabWidth": 2,
  "trailingComma": "none",
  "singleQuote": true,
  "arrowParens": "avoid"
}

新建 .prettierignore 文件,添加忽略校验的文件

# .prettierignore
.DS_Store
node_modules
dist
dist-ssr
*.local
.npmrc
*.md

新增 .eslintrc.js 配置

// .eslintrc.js
module.exports = {
  extends: [
    // ...原有配置
    // 解决ESlint和Prettier冲突
    "plugin:prettier/recommended",
  ],
};

配置 husky + lint-staged

# Windows
npm i lint-staged husky -D

配置 package.json 文件,prepare 会在 npm install 安装依赖的时候自动执行

// package.json
{
  "scripts": {
    "prepare": "husky install"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx,vue}": ["eslint --fix", "prettier --write"],
    "*.{scss,html}": ["prettier --write"]
  }
}

手动初始化husky

npm run husky

.husky文件夹下,新建 pre-commit 文件,内容如下

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

npx lint-staged

配置 commitlint

commitlint 官网open in new window

  • 安装
# Windows
npm i @commitlint/config-conventional @commitlint/cli @commitlint/cz-commitlint -D

配置 package.json 文件

// package.json
{
  "scripts": {
    "commit": "git add .&& git-cz"
  },
  "config": {
    "commitizen": {
      "path": "@commitlint/cz-commitlint"
    }
  }
}
  • .husky文件夹下,新建 commit-msg 文件,内容如下
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no -- commitlint --edit

在项目文件夹下新建文件commitlint.config.js,文件内容如下

// commitlint.config.js
export default {
  extends: ["@commitlint/config-conventional"], // 自定义规则
  rules: {
    // 提交类型枚举,git提交type必须是以下类型
    "type-enum": [
      2,
      "always",
      [
        "feat", // 新增功能
        "fix", // 产生diff修复问题
        "docs", // 文档变更
        "style", // 代码格式(不影响功能,例如空格、分号等格式修正)
        "refactor", // 代码重构(不包括 bug 修复、功能新增)
        "perf", // 性能优化
        "test", // 添加疏漏测试或已有测试改动
        "build", // 构建流程、外部依赖变更(如升级 npm 包、修改 webpack 配置等)
        "ci", // 修改 CI 配置、脚本
        "revert", // 回滚 commit
        "chore", // 对构建过程或辅助工具和库的更改(不影响源文件、测试用例)
        "merge", // 代码合并
        "sync", // 同步主线或分支的 Bug
      ],
    ],
    "subject-case": [0], // 不执行任何大小写检查
  },
  prompt: {
    settings: {},
    messages: {
      skip: ":skip",
      max: "上限 %d 个字符",
      min: "至少 %d 个字符",
      emptyWarning: "不能为空",
      upperLimitWarning: "超出限制",
      lowerLimitWarning: "低于限制",
    },
    questions: {
      type: {
        description: "请选择提交类型:",
        enum: {
          feat: {
            description: "新功能",
            title: "Features",
            // emoji: '✨',
          },
          fix: {
            description: "bug修复",
            title: "Bug Fixes",
            // emoji: '🐛',
          },
          docs: {
            description: "文档变更",
            title: "Documentation",
            // emoji: '📚',
          },
          style: {
            description: "代码格式(不影响代码运行的变动)",
            title: "Styles",
            // emoji: '💎',
          },
          refactor: {
            description: "重构(既不是增加feature,也不是修复bug)",
            title: "Code Refactoring",
            // emoji: '📦',
          },
          perf: {
            description: "性能优化",
            title: "Performance Improvements",
            // emoji: '🚀',
          },
          test: {
            description: "增加测试",
            title: "Tests",
            // emoji: '🚨',
          },
          build: {
            description: "改变构建系统或者外部依赖",
            title: "Builds",
            // emoji: '🛠',
          },
          ci: {
            description: "改变ci配置和脚本",
            title: "Continuous Integrations",
            // emoji: '⚙️',
          },
          chore: {
            description: "修改src或测试文件以外的文件",
            title: "Chores",
            // emoji: '♻️',
          },
          revert: {
            description: "回退",
            title: "Reverts",
            // emoji: '🗑',
          },
          merge: {
            description: "代码合并",
            title: "Merge",
          },
          sync: {
            description: "同步主线或分支的 Bug",
            title: "Sync Bug",
          },
        },
      },
      scope: {
        description: "请输入修改范围(可选): (e.g. 功能模块)",
      },
      subject: {
        description: "请简要描述提交(必填)",
      },
      body: {
        description: "请输入详细描述(可选)",
      },
      isBreaking: {
        description: "是否存在重大变化?",
      },
      breakingBody: {
        description: "一个破坏性的提交需要一个主体. 请对提交进行一个详细的描述",
      },
      breaking: {
        description: "描述重大更改",
      },
      isIssueAffected: {
        description: "此更改是否影响任何未决问题?",
      },
      issuesBody: {
        description: "如果问题被关闭. 请对提交进行一个详细的描述",
      },
      issues: {
        description: '增加问题的引用 (e.g. "fix #123", "re #123".)',
      },
    },
  },
};

.eslintignore.prettierignore 配置过滤内容: commitlint.config.js

commitlint.config.js

后面的 git 提交可以通过commit进行代码提交

npm run commit

配置 editorconfig

在项目文件夹下新建文件.editorconfig,文件内容如下

# vscode 请安装插件:CTRL+SHIFT+X 搜索 EditorConfig 并安装

# https://editorconfig.org

# 表明是最顶层的配置文件
root = true
# 正则*匹配所有文件
[*]
# 编码格式
charset = utf-8
# 定义换行符
end_of_line = lf
# 缩进空格数
indent_size = 2
# 缩进方式
indent_style = space
# 文件是否以空白行结尾
insert_final_newline = true
# 是否去处行首行尾的空白字符
trim_trailing_whitespace = true

# 正则匹配以.md结尾的文件
[*.md]

# 保存文件时是否在结尾添加一个新行
insert_final_newline = false
# 在新行之前是否移除所有的空格字符
trim_trailing_whitespace = false
上次更新 2026/6/23 11:49:15
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.8