Vue3项目团队开发框架搭建

1.使用 vite 初始化项目

pnpm create vite

修改vite.config.ts 修改域名端口，自动启动浏览器
server: {
  host: 'localhost',
  port: 9999,
  open: true
}

2..配置 eslint 和 prettier

pnpm i -D eslint

npx eslint --init

3.选配置

 

 

 4.再安装下面的依赖

pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier @babel/eslint-parser

5.修改根目录配置文件如下.eslintrc.cjs

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
    jest: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended'
  ],
  overrides: [],
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    parser: '@typescript-eslint/parser'
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    'space-before-function-paren': ['error', 'never'],
    'no-extra-semi': 0, // 结尾不要分号
    'comma-dangle': ['error', 'never'],
    '@typescript-eslint/no-explicit-any': 0,
    '@typescript-eslint/ban-types': 0
  }
}

6.在根目录创建 并配置.eslintignore 防止校验打包的产物

// .eslintignore 配置, 防止校验打包的产物
dist
node_modules

7.在 package.json 中添加运行脚本

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

8.安装包

pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier

9.在根目录新建.prettierrc.json

{
  "singleQuote": true,
  "semi": false,
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "ignore",
  "endOfLine": "auto",
  "trailingComma": "none",
  "tabWidth": 2
}

10.测试一下代码检查是否生效了，我们在 main.ts 中修改成如下内容

按ctrl + s 保存代码，如果还报错，就重启项目

11.vscode 保存文件自动修复代码

直接在项目的跟路径创建.vscode/settings.json 文件，然后在其中加入以下配置。

{
    // 开启自动修复
    "editor.codeActionsOnSave": {
        "source.fixAll": false,
        "source.fixAll.eslint": true
    }
}

12.配置 husky（就是提交代码规范）

在上面我们已经集成好了我们代码校验工具，但是需要每次手动的去执行命令才会格式化我们的代码。如果有人没有格式化就提交了，那这个规范就没什么用。所以我们强制让开发人员按照代码规范来提交。

要做到这件事情，可以利用 husky 来在代码提交之前出发 git hook，然后执行pnpm format来自动的格式化我们的代码。

安装husky

pnpm install -D husky

执行完上面命令之后 必须打开文件 在 git init

安装完之后

执行

npx husky-init

安装lint-staged

pnpm install -D lint-staged

package.json 配置命令

{
  "scripts": {
    "lint-staged": "lint-staged"
  },
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx,vue}": ["prettier --write", "eslint --fix", "git add"]
  }
}

在.husky/pre-commit 文件添加命令

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

pnpm lint-staged

13.配置 commitlint 校验提交信息

pnpm add @commitlint/config-conventional @commitlint/cli -D

添加配置文件，新建commitlint.config.cjs(注意是 cjs)，然后添加下面的代码

module.exports = {
  extends: ['@commitlint/config-conventional'],
  // 校验规则
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'fix',
        'docs',
        'style',
        'refactor',
        'perf',
        'test',
        'build',
        'ci',
        'chore',
        'revert',
        'conflict',
        'font',
        'delete',
        'stash'
      ]
    ],
    'type-case': [0],
    'type-empty': [0],
    'scope-empty': [0],
    'scope-case': [0],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
    'header-max-length': [0, 'always', 72]
  }
}

配置 scripts

# 在scrips中添加下面的代码
{
"scripts": {
    "commitlint": "commitlint --config commitlint.config.cjs -e -V"
  },
}

配置 husky 信息

npx husky add .husky/commit-msg

在生成的 commit-msg 文件中添加下面的命令

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

pnpm commitlint

commit message 格式规范

commit message 由 Header、Body、Footer 组成。

 git add .

git cz 之前，先全局安装 以下代码，cmd 一下打开终端

npm install commitizen -g

初始化项目

成功安装 Commitizen 后，我们用 cz-conventional-changelog 适配器来初始化项目

commitizen init cz-conventional-changelog --pnpm --save-dev --save-exact

这行命令做了两件事：

• 安装 cz-conventional-changelog 到开发依赖（devDependencies）

在

package.json

 中加

"config": {
  "commitizen": {
    "path": "./node_modules/cz-conventional-changelog"
  }
}

 然后再git cz

提示