基于vite工程规范化

vite 介绍

• https://esbuild.github.io
• Vite 主要由两部分组成
  • 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）,Vite 将会使用 esbuild 预构建依赖。Esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍
  • 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源 vue-tsc 可以对 Vue3 进行 Typescript 类型较验

vite 热更新原理

export function render() {
  document.getElementById("app")!.innerHTML = "main";
}
render();
// import.meta.hot上面的所有API就是来源于HMRContext这个类
if (import.meta.hot) {
  import.meta.hot.accept((updatedModule) => updatedModule.render());
}

viet 支持 typescript

但是 只编译不校验,所以需要安装 typescript

• typescript 是一种基于 JavaScript 的强类型编程语言
• vue-tsc 可以对 Vue3 进行 Typescript 类型较验 pnpm install typescript vue-tsc -D

// package.json
"scripts": {
    "dev": "vite",
   "build": "vue-tsc --noEmit && vite build"
  },

ESLint（代码检查）

ESLinteslint 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具

• 代码质量问题：使用方式有可能有问题
• 代码风格问题：风格不符合一定规则

因为 ESlint 是默认支持解析 JavaScript 的，以及有内置一些规则，所以我们只需启用相对于的规则名称就可以了

安装

pnpm install eslint @eslint/js globals -D

• eslint/js: 用 ESlint 提供的现成的规则集
• globals:启用隐藏的全局变量规则(eslint 一视同仁，对于任何可用的隐藏全局变量，都需要跟 eslint 打声招呼)
• eslint-plugin-vue:Vue 规则(由于 ESlint 本身只支持识别 JavaScript，所以对于 vue 文件，还需要一个插件：eslint-plugin-vue)
• typescript-eslint:TypeScript 规则 配置 .eslintrc.js 文件我们在项目中安装 ESlint，最终是会通过命令 pnpm lint 或者 pnpm lint:fix 去执行，这个命令会用项目中安装的 eslint 去检查指定目录/文件的代码，最终输出不符合规则的代码错误信息。

{
  // --ext .ts,.tsx,vue：这个选项指定了 ESLint 检查的文件类型
  // --no-error-on-unmatched-pattern：如果没有找到符合条件的文件，它不会抛出错误，脚本仍然可以顺利执行
 "lint": "eslint --ext .ts,.tsx,vue src/\*\* --no-error-on-unmatched-pattern --quiet",
 // --fix：这个选项告诉 ESLint 尝试自动修复一些问题
 "lint:fix": "eslint --ext .ts,.tsx,vue src/** --no-error-on-unmatched-pattern --quiet --fix"
}

对于 ESLint

8.x 及以上版本，配置文件推荐使用 eslint.config.js，而不是 .eslintrc.js。ESLint

9.x 及以上版本不再支持此 .eslintignore 文件

eslint.config.js

//  用ESlint提供的现成的规则集，要用到@eslint/js这个依赖包
import eslint from "@eslint/js";
// 启用隐藏的全局变量规则
import globals from "globals";
import tseslint from "typescript-eslint";
//
import eslintPluginVue from "eslint-plugin-vue";

import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
export default [
  {
    ignores: ["node_modules", "dist", "public"],
  },
  // 用ESlint提供的现成的规则集
  eslint.configs.recommended,
  /** ts推荐配置 */
  ...tseslint.configs.recommended,
  // 我们使用了eslintPluginVue.configs['flat/recommended']作为vue的推荐规则配置
  ...eslintPluginVue.configs["flat/recommended"],
  /**
   * javascript 规则
   */
  {
    files: ["**/*.{js,mjs,cjs,vue}"],
    rules: {
      "no-console": "error",
    },
  },
  /**
   * 配置全局变量
   */
  {
    languageOptions: {
      globals: {
        ...globals.browser,

        /** 追加一些其他自定义全局规则 */
        wx: true,
      },
    },
  },
  /**
   * vue 规则
   */
  {
    files: ["**/*.vue"],
    languageOptions: {
      parserOptions: {
        /** typescript项目需要用到这个 */
        parser: tseslint.parser,
        ecmaVersion: "latest",
        /** 允许在.vue 文件中使用 JSX */
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
    rules: {
      // 在这里追加 vue 规则
      "vue/no-mutating-props": [
        "error",
        {
          shallowOnly: true,
        },
      ],
    },
  },
  /**
   * typescript 规则
   */
  {
    files: ["**/*.{ts,tsx,vue}"],
    rules: {},
  },

  /**
   * prettier 配置
   * 会合并根目录下的prettier.config.js 文件
   * @see https://prettier.io/docs/en/options
   */
  eslintPluginPrettierRecommended,
];

编辑器中的 ESlint

VSCode 中的 ESlint，本质是可以在你编写代码时，实时看到代码中不符合项目 ESlint 规则配置的错误，比如这样：

1. ESlint 扩展安装
2. ESlint 扩展如何运作
   • ESlint 扩展会优先去查找项目根目录中的 eslint.config.js 配置文件,并且包括配置文件所提到的 ESlint 插件，也就是 npm 依赖包
   • ESlint 扩展本身所需的 ESlint 版本和 ESlint 插件，都是来自于 node_modules，你可以试着把这个目录删了，vscode 中的 ESlint 扩展就会报错，无法运行
   • 这里建议为每个项目单独添加 vscode 独有的设置，也就是项目根目录中创建一个.vscode 目录，里面放置一个 settings.json 文件，这样 vscode 就会优先读取该设置

Prettier（格式化）

ESLint 主要解决的是代码质量问题 prettier 主要解决的是代码风格问题

1. Prettier 如何运作

prettier 扩展会读取项目根目录中的.prettierrc、.prettierrc.js 之类的配置文件，然后你在 vscode 中用 prettier 执行格式化时，会根据配置文件的要求对代码进行格式化。

那么问题来着，格式化后的结果，有时跟 ESlint 的要求是不一样的，比如 ESlint 要求这个属性要换行，prettier 要求这个属性不换行。好了，你代码是格式化的漂漂亮亮了，但是 ESlint 不乐意啊，它就给你报红。怎么办呢？

2.解决 Prettier 跟 ESlint 冲突

为了解决两者的冲突，我们要使用另一个 ESlint 插件 eslint-plugin-prettier。eslint-plugin-prettier 这个插件不仅提供文件解析，代码 fix，也顺带提供了一些规则配置。

比如它会把跟 prettier 冲突的 ESlint 规则给 off 掉，并使用自己的规则，也就是说，二选一，让你选 prettier。为什么是 prettier 呢，prettier 其实只是提供代码风格的规范，也是目前主流的一个风格规范，那我们就跟着主流呗。其他代码逻辑的规范，就交给 ESlint。

// 安装
pnpm add eslint-plugin-prettier -D

import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
/**
   * prettier 配置
   * 会合并根目录下的prettier.config.js 文件
   * @see https://prettier.io/docs/en/options
   */
  eslintPluginPrettierRecommended,

这里仅仅是添加一句 eslint-plugin-prettier/recommended，非常简单对吧，它的作用是 off 与它冲突的 ESlint 规则，并且启用自己的 Recommended 规则，并且它会自动合并 prettier.config.js 配置，所以我们还需要在根目录创建一份 prettier.config.js，配置如下，可根据自己的需求调整配置

prettier.config.js

/**
 * @type {import('prettier').Config}
 * @see https://www.prettier.cn/docs/options.html
 */
export default {
  trailingComma: "all", // 在对象或数组最后一个元素后面加逗号（在ES5中加尾逗号）
  singleQuote: true,// 使用单引号而不是双引号
  semi: false,// 在语句末尾添加分号
  printWidth: 80, // 每行代码的最大长度
  arrowParens: "always",// 箭头函数只有一个参数的时候，也需要括号
  proseWrap: "always",
  endOfLine: "lf",
  experimentalTernaries: false,
  tabWidth: 2,
  useTabs: false,
  quoteProps: "consistent",
  jsxSingleQuote: false,
  bracketSpacing: true,
  bracketSameLine: false,
  jsxBracketSameLine: false,
  vueIndentScriptAndStyle: false,
  singleAttributePerLine: false,// 多行HTML元素属性强制单行显示
};

git hooks（代码提交）

• 可以在git commit之前检查代码，保证所有提交到版本库中的代码都是符合规范的
• 可以在git push之前执行单元测试,保证所有的提交的代码经过的单元测试
• husky可以让我们向项目中方便添加git hooks,它会自动在仓库中的 .git/ 目录下增加相应的钩子,比如 pre-commit 钩子就会在你执行 git commit命令的时候的触发
• lint-staged用于实现每次提交只检查本次提交所修改的文件
• mrm可以根据package.json依赖项中的代码质量工具来安装和配置 husky 和 lint-staged
• Commitlint 可以规范git commit -m ""中的描述信息

常用hooks

1.pre-commit：在提交代码前触发（适合运行代码检查、格式化）

2.commit-msg：在提交信息写完后触发（适合校验提交信息格式）

3.pre-push：在推送代码前触发（适合运行测试）

husky

为什么需要husky**

但是默认情况下，git钩子存储在项目的 .git/hooks 目录中，但它们是本地化的（不纳入版本控制），且需要手动配置，就是.git 目录是 git内部管理仓库的核心目录，git本身不会跟踪这个目录的内容。也就是说，如果你在 .git/hooks 中添加了钩子脚本，这些脚本，不会提交到代码仓库，其他团队成员拉取代码时，不会自动获取你的钩子配置，仅对当前本地仓库生效，每个开发者需要在自己的电脑上单独配置，无法共享。为了让团队共享这些钩子配置，我们需要引入一个好用的工具 ——

husky。

husky作用

什么是husky？husky 可以帮我们在 git钩子配置纳入项目版本控制，团队共享同一套规则，自动化触发流程，在 git操作的关键节点自动执行脚本（如代码检查、提交校验，强制规范执行：防止开发者绕过代码检查或提交规范

npm install husky --save-dev 
npx husky init

husky流程

当项目其他成员克隆我们的代码后运行 npm install 时，"prepare" 会被触发，husky

init 会运行在.husky 文件中 加入钩子脚本 lint-staged

什么是 lint-staged？顾名思义，这个工具专门用于检查 git暂存区的文件，也就是说，它只会对你通过 git

add 命令添加到暂存区的文件进行 lint 检查。

这样，每次提交时，husky 会自动触发 lint-staged，只对暂存区的文件进行 prettier 和 eslint 检查

提交信息的规范化

commitizen

commitizen 是什么呢？简单来说，它是用来规范 git提交信息的工具。大家有没有遇到过这样的情景，在提交代码时，写下类似 git

commit -m "更新了一点" 或 git commit -m

"更新了一些" 这样的信息，或者同事提交信息的时候这样子提交，格式混乱且无法清楚表明修改了什么内容？这时候，commitizen 就能帮我们规范这些提交信息，让提交变得更加有规则和易于理解。

安装 commitizen

npm install commitizen -D

cz-conventional-changelog

我们需要安装适配器 cz-conventional-changelog，并初始化它，cz-conventional-changelog 是 commitizen 的“规则引擎”，它封装了 Angular 的提交规范，成为一个通用的工具，帮助我们规范提交信息的格式。

@commitlint/cli

@commitlint/cli 是一个命令行工具，用于校验 Git 提交信息是否符合规范。它通常与 Husky 和 lint-staged 配合使用，以在提交代码前对提交信息进行校验，从而确保提交信息的格式和内容符合项目规范和约定。

@commitlint/config-conventional

Git-cz 一款工程性更强，轻量级，高度自定义，标准输出格式的 commitizen 适配器

样式处理

1.全局样式 2.局部样式

• 当 style标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素

3.CSS Modules

<style module>
.link {
  color: red;
}
</style>

4. 预处理器

• Vite 也同时提供了对.scss, .sass, .less, .styl 和 stylus文件的内置支持
• 没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖
• .5 全局注入 可以把全局样式文件全局注入到项目中

// vite.config.ts
export default defineConfig({
  resolve: {
    alias: {
      '@': resolve('src'),
    },
  },
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@use "@/styles/theme.scss" as *";',
      },
      less: {
        additionalData: '@use "@/styles/theme.scss" as *";',
      },
    },
  },
})

$color: green;

6 PostCSS

• 为了浏览器的兼容性，有时候我们必须加入-webkit,-ms,-o,-moz 这些前缀
  • Trident 内核：主要代表为 IE 浏览器, 前缀为-ms