基于vite-vue3搭建的前端开发基础模板：集成eslint、prettier、husky、lint-staged

一. 创建项目

  pnpm create vite my-vue-app --template vue-ts

二. 集成 ESLint、Prettier

1.Prettier

1. 依赖安装

  pnpm add prettier -D

2. 代码美化规则设置

{
  "eslintIntegration": true,
  "stylelintIntegration": true,
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "endOfLine": "auto"
}

3. 不检测的目录/文件

  /dist/*
  /node_modules/**
  /public/*

  **/*.svg

2.ESLint

1. 依赖安装

  pnpm add eslint -D

2. 初始化 eslint、按照提示一步步设置后安装依赖(也可以手动安装)

  npx eslint --init

3. 修改配置如下(安装依赖 pnpm add vue-eslint-parser -D)

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
  ],
  overrides: [],
  parser: "vue-eslint-parser",
  parserOptions: {
    ecmaVersion: "latest",
    parser: "@typescript-eslint/parser",
    sourceType: "module",
  },
  plugins: ["vue", "@typescript-eslint", "prettier"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "vue/multi-word-component-names": "off",
    "linebreak-style": [0, "error", "windows"],
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/no-var-requires": "off",
    "@typescript-eslint/no-non-null-assertion": "off",
    "@typescript-eslint/no-empty-function": "off",
  },
};

3.解决 ESlint 与 Pretier 冲突

1. 依赖安装

  pnpm add eslint-config-prettier eslint-plugin-prettier -D

  eslint-config-prettier: 关闭ESLint中有关代码格式化的配置;
  eslint-plugin-prettier: 把Prettier配置成ESLint的一个插件，让其当做一个linter规则来运行

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

  "plugin:prettier/recommended"

4. 配置 vite 运行的时候自动检测 eslint 规范

1. 依赖安装

 pnpm add vite-plugin-eslint -D

2. 配置 vite.config.ts 文件，在 plugins 加入以下配置

  eslintPlugin({
    include: [
      "src/**/*.ts",
      "src/**/*.js",
      "src/**/*.vue",
      "src/*.ts",
      "src/*.js",
      "src/*.vue",
    ],
  }),

三. 集成 husky

1. 依赖安装

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

2. 在 packgae.json 中添加 prepare 脚本(prepare 脚本会在 npm install 之后自动执行)

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

3. 添加 git hooks

  pnpm run prepare

  // 生成pre-commit文件: 在执行 git commit 命令时会先执行pre-commit这个脚本
  npx husky add .husky/pre-commit "npm run test"

  // 生成commit-msg文件: 使用commit-msg这个git hook来校验我们commit时添加的备注信息是否符合规范
  npx husky add .husky/commit-msg "npx --no-install commitlint --edit"

4. 在目录新增配置文件 commitlint.config.cjs

module.exports = {
  extends: ["@commitlint/config-conventional"],
};

5. 添加 lint-staged

5.1 依赖安装

  pnpm add lint-staged -D

5.2 在 package.json 中新增如下配置

"lint-staged": {
  "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
    "eslint --fix"
  ]
},

6. commit 信息规范
   e.g.: git commit -m “docs: update README.md”

Type	作用
feat	新增特性
fix	bug 修复
perf	改善性能
test	测试
docs	修改文档
style	代码格式修改
refactor	代码重构
build	变更项目构建或外部依赖
ci	更改持续集成软件的配置文件和 package 中的 scripts 命令
chore	变更构建流程或辅助工具
revert	代码回退

拓展插件

  unplugin-auto-import: 自动导入方法及类型声明
  unplugin-vue-components: 自动导入组件及类型声明
  unplugin-icons: 自动导入icons/svg使用方式优化等
  unocss: css粒度化

项目在线地址github