【前端工程化最新版】项目搭建篇-vite5项目初始化&vue3.5、prettier、eslint9、Commitlint、lint-staged、husky

🧀 你能学到什么

1. 一个最新的、标准的项目初始化、代码规范、提交规范的配置流程
2. eslint、prettier的配置 & 自动保存修复
3. git 提交规范，以及git 相关配置

🍎 使用vite5项目初始化（vue+ts）

vite 官方文档

pnpm create vite vue3-admin --template vue-ts

🍎 代码规范

🔧 1. 代码检测工具 eslint

1.1 🌰 安装 和初始化 eslint

npx eslint --init 

最后会生成一个eslint.config.js 文件

是的 这是eslint 9 相对于 之前版本的一个升级，将之前的 .eslintrc 都变为了 在 eslint.config.js 对eslint 进行配置。

那接下来就详细介绍一下eslint.config.js的一些默认配置

import globals from 'globals';
import pluginJs from '@eslint/js'; // 检验js规范的 (推荐)
import tseslint from 'typescript-eslint'; // 推荐的ts规范
import pluginVue from 'eslint-plugin-vue'; //推荐的vue的规范

export default [
  // 1. 检测文件的格式
  { files: ['**/*.{js,mjs,cjs,ts,vue}'] },
  // 2. 定义不同环境的全局变量
  { languageOptions: { globals: { ...globals.browser, ...globals.node } } },
  // 3. js 推荐 规则
  pluginJs.configs.recommended,
  // 4. ts 推荐 规则
  ...tseslint.configs.recommended,
  // 5. vue 推荐 规则
  ...pluginVue.configs['flat/essential'],
  // 6. 检测 vue 中的 ts 代码采用 tsparser
  {
    files: ['**/*.vue'],
    languageOptions: { parserOptions: { parser: tseslint.parser } },
  },
];

🌰 1.2 添加ignores 选项(忽略掉一些文件的eslint检测)

eslint-8 是配置.eslintignore,而现在是直接在eslint.config.js 进行配置

• 配置项方式

export default [
  // 7. ignores 配置
  {
    ignores: [
      'node_modules/*',
      'dist/*',
      '*.css',
      '*.jpg',
      '*.jpeg',
      '*.png',
      '*.gif',
      '*.d.ts',
    ],
  },
];

• 文件引入的方式

import { includeIgnoreFile } from "@eslint/compat";
import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url); // 使用 fileURLToPath 将当前模块的 import.meta.url 转换为文件路径
const __dirname = path.dirname(__filename); // 使用 path.dirname 获取当前文件所在的目录路径。
const gitignorePath = path.resolve(__dirname, ".gitignore"); // 解析 .gitignore 文件路径

export default [
    includeIgnoreFile(gitignorePath),
    {
  &