实现目标

对代码做检测，对git提交格式做检测，使项目更规范（通过自动化工具让小组成员开发的风格保持一致）

实现效果

新建一个vue项目

前置条件

node18(cn.vitejs.dev/guide/migra…)

用到的几个库

名字	功能简介	讲人话
eslint^8.56.0	用于静态代码分析，帮助发现和修复 JavaScript 和 JSX 中的代码错误、潜在问题以及风格问题。	js规范检测
prettier^3.2.5	代码格式化工具，可自动格式化代码，确保整个团队的代码风格一致，避免不必要的代码审查问题。	代码格式化
stylelint	用于对 CSS 样式代码进行静态分析，帮助发现并修复样式表中的问题，确保一致的样式规范。	css规范检测
husky^8.0.0	通过 Git hooks 在代码提交、推送等操作前执行预定义的脚本，常用于在提交前运行代码格式检查、测试等，以确保提交的代码符合规范。	git执行时的勾子方法
lint-staged	配合 husky 使用，用于在 Git 暂存区（Staging area）中运行预定义的任务，常用于对即将提交的代码进行静态代码分析、格式化等操作。	-
commitlint^18.6.1	用于规范化提交消息格式，确保团队遵循一致的提交规范。通过配置规则，可以强制提交消息的格式符合指定的约定。	指定git提交格式
git-cz^4.9.0	Git Commitizen 的一种实现，提供了一个交互式的命令行工具，帮助规范化生成符合规范的提交消息，结合 commitlint 使用，使提交消息更加清晰和规范。	通过交互式的方式进行git提交

一、ide项目规范

1、vscode插件安装

标题	安装地址
EditorConfig	marketplace.visualstudio.com/items?itemN…
Typescript	marketplace.visualstudio.com/items?itemN…
Volar	marketplace.visualstudio.com/items?itemN…
Prettier	marketplace.visualstudio.com/items?itemN…
Eslint	marketplace.visualstudio.com/items?itemN…
Stylelint	marketplace.visualstudio.com/items?itemN…

.vscode/settings.json中添加规则

{
    
  // 指定ts的版本
  // "typescript.tsdk": "node_modules/typescript/lib",
  // 保存的时候自动格式化
  "editor.formatOnSave": true,
  // 默认格式化工具选择prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "stylelint.validate": ["css", "scss", "vue", "html"],
  "files.eol": "\n"
}

集成editorconfig配置

作用：使项目代码风格保持一致 步骤：在项目中创建 .editorconfig 文件

# https://editorconfig.org

root = true

[*]   # 表示适用于所有文件
charset = utf-8     # 设置文件字符为utf-8
indent_style = space    # 缩进风格（tab | space）
indent_size = 2     # 缩进大小
end_of_line = lf    # 控制换行类型（lf | cr | crlf）
insert_final_newline = true     # 始终在文件末尾插入一个新行
trim_trailing_whitespace = true     # 去除行首的任意空白字符

[*.md]  #表示仅 md 文件适用
insert_final_newline = false
trim_trailing_whitespace = false

2、CRLF问题处理

window电脑CRLF转LF配置（mac用户不用配置）

3、配置eslint

安装

npm i eslint -D

初始化

npx eslint --init

初始化选项

初始化完成后，会生成.eslintrc.cjs配置文件

然后安装

npm i vue-eslint-parser -D

把这文件改成下面这种

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "plugin:@typescript-eslint/recommended",
  ],
  overrides: [],
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "@typescript-eslint/parser",
    ecmaVersion: "latest",
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },
  plugins: ["vue", "@typescript-eslint"],
  rules: {
    // 可以index.vue的命名方式，但建议这种自己加name方便vue-devtool调试用
    "vue/multi-word-component-names": "off",
    // 支持any，但不要什么都写any
    "@typescript-eslint/no-explicit-any": "off",
  },
};

### 在`package.json`文件中的`script`中添加`lint:eslint`命令

```json
"lint:eslint": "ESLINT_USE_FLAT_CONFIG=false eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix",

根目录创建 .eslintignore 文件，配置忽略文件如下（按自己实际情况配置）：

dist
node_modules
public
.husky
.vscode
.idea
*.sh
*.md

src/assets
src/plugins
scripts

.eslintrc.cjs
.prettierrc.cjs
.stylelintrc.cjs

4、配置prettier

安装

npm i prettier -D

在根目录下新建.prettierrc.cjs

// 更多配置 看官方文档（英文）或网上找中文的配
module.exports = {
  // // 一行的字符数，如果超过会进行换行，默认为80
  // printWidth: 80,
  // // 一个tab代表几个空格数，默认为2
  // tabWidth: 2,
  // // 是否使用tab进行缩进，默认为false，表示用空格进行缩减
  // useTabs: false,
  // // 字符串是否使用单引号，默认为false，使用双引号
  // singleQuote: true,
  // // 行位是否使用分号，默认为true
  // semi: true,
  // // 是否使用尾逗号，有三个可选值"<none|es5|all>"
  trailingComma: "es5",
  // // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
  // bracketSpacing: true,
  endOfLine: "lf",
};

在package.json中的script中添加以下命令

"lint:prettier": "prettier --write \"./**/*.{html,vue,ts,js,json,md,scss}\"",

根目录创建 .prettierrcignore 文件，配置忽略文件如下（按自己实际情况配置）：

dist
node_modules
public
scripts

5、解决eslint与prettier的冲突(无冲突可以不配)

安装依赖

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

在 .eslintrc.cjs中extends的最后添加一个配置

{ 
    extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended',
+    // 新增，必须放在最后面
+    'plugin:prettier/recommended' 
  ],
}

6、Stylelint

安装依赖

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

Stylelint 配置

根目录新建 .stylelintrc.cjs 文件，配置如下：

module.exports = {
  // 继承推荐规范配置
  extends: [
    "stylelint-config-standard",
    "stylelint-config-recommended-scss",
    "stylelint-config-recommended-vue/scss",
    "stylelint-config-html/vue",
    "stylelint-config-recess-order",
  ],
  // 指定不同文件对应的解析器
  overrides: [
    {
      files: ["**/*.{vue,html}"],
      customSyntax: "postcss-html",
    },
    {
      files: ["**/*.{css,scss}"],
      customSyntax: "postcss-scss",
    },
  ],
  // 自定义规则
  rules: {
    // 允许 global 、export 、v-deep等伪类
    "selector-pseudo-class-no-unknown": [
      true,
      {
        ignorePseudoClasses: ["global", "export","v-deep", "deep"],
      },
    ],
  },
};

Stylelint 检测指令

在package.json中的script中添加以下命令

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

根目录创建 .stylelintignore 文件，配置忽略文件如下（按自己实际情况配置）：

dist
node_modules
public
.husky
.vscode
.idea
*.sh
*.md
src/assets

二、git提交规范

1、Husky

运行以下命令生成配置

npx husky-init

npm i

2、Lint-staged

运行以下命令

npm install -D lint-staged

package.json中添加配置

  "lint-staged": {
    "*.{cjs,js,ts}": [
      "npm run lint:eslint",
      "npm run lint:prettier"
    ],
    "*.vue": [
      "npm run lint:eslint",
      "npm run lint:prettier",
      "npm run lint:stylelint"
    ],
    "*.{scss,css}": [
      "npm run lint:stylelint",
      "npm run lint:prettier"
    ]
  },

package.json中的script添加lint-staged命令

"lint:lint-staged": "lint-staged"

修改提交前钩子命令

根目录 .husky 目录下 pre-commit 文件中的 npm test 修改为 npm run type-check && npm run lint:lint-staged 加个类型检查

 "type-check": "vue-tsc --noEmit --skipLibCheck",

3、Commitlint

安装依赖

npm install @commitlint/cli @commitlint/config-conventional -D

Commitlint 配置

根目录创建 commitlint.config.cjs 配置文件

module.exports = {
  extends: ["@commitlint/config-conventional"],
  rules: {
    "type-enum": [
      2,
      "always",
      [
        "test",
        "feat",
        "fix",
        "chore",
        "docs",
        "refactor",
        "style",
        "ci",
        "perf",
      ],
    ],
    "type-case": [2, "always", "lower-case"],
    "type-empty": [2, "never"],
    "subject-empty": [2, "never"],
    "scope-empty": [0],
    "scope-case": [0],
    // <subject> 以什么为结束标志，禁用
    "subject-full-stop": [0, "never"],
    // <subject> 格式，禁用
    "subject-case": [0, "never"],
    // <body> 以空行开头
    "body-leading-blank": [1, "always"],
    "header-max-length": [0, "always", 72],
  },
};

添加提交信息校验钩子

执行下面命令生成 commint-msg 钩子用于 git 提交信息校验

npx husky add .husky/commit-msg "npx --no-install commitlint --edit \$1"

生成的.commit-msg文件内容如下(有可能$1会没有了，以下面的图片为准)

4、Git-cz

安装依赖

npm i git-cz -D

根目录创建 changelog.config.cjs 配置文件

module.exports = {
  disableEmoji: false,
  format: "{type}{scope}: {emoji}{subject}",
  list: [
    "test",
    "feat",
    "fix",
    "chore",
    "docs",
    "refactor",
    "style",
    "ci",
    "perf",
  ],
  maxMessageLength: 64,
  minMessageLength: 1,
  questions: [
    "type",
    "scope",
    "subject",
    "body",
    "breaking",
    "issues",
    "lerna",
  ],
  types: {
    chore: {
      description: "构建过程或辅助工具更改",
      emoji: "🤖",
      value: "chore",
    },
    ci: {
      description: "与CI相关的更改",
      emoji: "🎡",
      value: "ci",
    },
    docs: {
      description: "仅文档更改",
      emoji: "✏️",
      value: "docs",
    },
    feat: {
      description: "一个新功能",
      emoji: "🎸",
      value: "feat",
    },
    fix: {
      description: "修复了一个问题",
      emoji: "🐛",
      value: "fix",
    },
    perf: {
      description: "提高性能的代码更改",
      emoji: "⚡️",
      value: "perf",
    },
    refactor: {
      description: "重构了某个功能",
      emoji: "💡",
      value: "refactor",
    },
    release: {
      description: "发布",
      emoji: "🏹",
      value: "release",
    },
    style: {
      description: "样式改动",
      emoji: "💄",
      value: "style",
    },
    test: {
      description: "测试",
      emoji: "💍",
      value: "test",
    },
    messages: {
      type: "选择您正在提交的更改类型:",
      customScope: "选择此组件影响的范围:",
      subject: "主题:\n",
      body: "内容:\n ",
      breaking: "List any breaking changes【1/3回车下一步】:\n",
      footer: "Issues this commit closes, e.g #123【2/3回车下一步】:",
      confirmCommit:
        "The packages that this commit has affected【3/3回车下一步】\n",
    },
  },
};

package.json中的script添加commit命令

"commit": "git-cz",

常见问题

1、mac中husky无权限导致没进行检测直接提交上去了

chmod 777 .husky/*

2、文件路径指向的地方明明存在文件，但还是报文件不存在（可能是typescript版本文件）command+shift+p

3、项目还有报红可能是Vetor的（v2的插件，关了就行了，或者自己搞个workspace来区分环境），具体看自己的报错是哪个插件报的

---

最终pageage.json及目录结构

然后你去运行npm run commit就能看到效果了 下面是完整的package.json内容

{
  "name": "eslint-prettier",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "commit": "git-cz",
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build --force",
    "lint:eslint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix",
    "lint:stylelint": "stylelint \"**/*.{css,scss,vue,html}\" --fix",
    "lint:prettier": "prettier --write \"./**/*.{html,vue,ts,js,json,md,scss}\"",
    "prepare": "husky install",
    "lint:lint-staged": "lint-staged"
  },
  "dependencies": {
    "git-cz": "^4.9.0",
    "pinia": "^2.1.7",
    "vue": "^3.4.15",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
    "@commitlint/cli": "^18.6.1",
    "@commitlint/config-conventional": "^18.6.2",
    "@tsconfig/node20": "^20.1.2",
    "@types/node": "^20.11.10",
    "@typescript-eslint/eslint-plugin": "^7.0.1",
    "@typescript-eslint/parser": "^7.0.1",
    "@vitejs/plugin-vue": "^5.0.3",
    "@vue/tsconfig": "^0.5.1",
    "eslint": "^8.56.0",
    "eslint-plugin-vue": "^9.21.1",
    "husky": "^8.0.0",
    "lint-staged": "^15.2.2",
    "npm-run-all2": "^6.1.1",
    "postcss": "^8.4.35",
    "postcss-html": "^1.6.0",
    "postcss-scss": "^4.0.9",
    "prettier": "^3.2.5",
    "stylelint": "^16.2.1",
    "stylelint-config-html": "^1.1.0",
    "stylelint-config-recess-order": "^4.6.0",
    "stylelint-config-recommended-scss": "^14.0.0",
    "stylelint-config-recommended-vue": "^1.5.0",
    "stylelint-config-standard": "^36.0.0",
    "typescript": "~5.3.0",
    "vite": "^5.0.11",
    "vue-tsc": "^1.8.27"
  },
  "lint-staged": {
    "*.{cjs,js,ts}": [
      "npm run lint:eslint",
      "npm run lint:prettier"
    ],
    "*.vue": [
      "npm run lint:eslint",
      "npm run lint:prettier",
      "npm run lint:stylelint"
    ],
    "*.{scss,css}": [
      "npm run lint:stylelint",
      "npm run lint:prettier"
    ]
  }
}

目录结构：

完结！有问题可在评论区交流 0.0

参考文章

1、juejin.cn/post/711829…

2、juejin.cn/post/728748…

3、【git-cz配置】github.com/streamich/g…

4、【crlf问题】zhuanlan.zhihu.com/p/499188717…