vite+vue3项目从0到1搭建(1)---开发约束和提交规范

github仓库地址： github.com/Liangjiahon...

初始化项目

• 使用 pnpm + vite + vue3 创建工程
• 在 cmd 命令行中输入 pnpm create vite 工程名

 pnpm create vite vite-demo

• 选择 vue 选项

• 使用语言根据个人选择

• 按下回车后，工程创建完毕，然后进入工程安装依赖即可运行

 # 进入工程
 cd vite-demo
 ​
 # 安装依赖
 pnpm install
 ​
 # 运行项目
 pnpm dev --host

集成editorconfig

• 在项目根目录下新建一个 .editorconfig 文件，用于配置编辑器行为，EditorConfig 有助于为不同 IDE编辑器上处理同一项目的多个开发人员维护一致的编码风格

 # http://editorconfig.org
 ​
 root = true
 [*]                   # 表示所有文件适用
 charset = utf-8       # 设置文件字符集为utf-8
 indent_style = space  # 缩进风格(tab | space)
 indent_size = 2       # 缩进大小
 end_of_line = lf      # 控制换行类型(lf | cr | crlf)
 trim_trailing_whitespace = true # 去除行首的任意空白字符
 insert_final_newline = true     # 始终在文件末尾插入一个新行
  
 [*.md]                # 表示仅md文件适用以下规则
 max_line_length = off
 trim_trailing_whitespace = false

• VSCode 中安装一个插件 -- EditorConfig for VS Code，目的是让 VSCode 读取该文件

使用prettier工具

• Prettier 是一款强大的代码格式化工具，支持 JavaScript、 TypeScript、Vue 等语言
• Prettier基本上能搞定前端用到的文件格式，是当下最流行的代码格式化工具
• 安装 prettier

 pnpm i prettier -D

• 在根目录下新建 .prettierrc 文件，用于定义格式化的规范

 {
   "useTabs": false, // 不使用制表符代替空格执行缩进
   "tabWidth": 2,  // 缩进的空格数
   "printWidth": 120,  // 代码行宽度
   "singleQuote": true,  // 是否使用单引号，JSX单独设置
   "jsxSingleQuote": true,  // 是否在JSX中使用单引号
   "jsxBracketSameLine": false,  // 多行 jsx 中的 > 放在最后一行，而不是另起一行
   "trailingComma": "none", // 在多行输入的末尾不添加逗号
   "semi": true, // 在代码语句结尾添加分号
   "endOfLine": "lf", // 设置换行符 参数为 lf / crlf / cr / auto，默认lf
   "bracketSpacing": true, // 在对象属性与大括号之间填充空格
   "bracketSameLine": false, // 开始标签的右尖括号是否跟随在最后一行属性末尾
   "arrowParens": "always",// 单个参数的箭头函数使用括号 参数：always：(x) => x / avoid：x => x
   "requirePragma": false, // 不需要特定的注释来指示代码格式化
   "insertPragma": false, // 不需要在文件插入标记表明该文件已被格式化处理过
   "vueIndentScriptAndStyle": false, // 不缩进Vue文件中的script标签和style标签
   // 格式化一些文件中被嵌入的代码片段的风格，如果插件可以识别; 参数 off / auto
   "embeddedLanguageFormatting": "auto", 
 };

• 新建 .prettierignore 文件，用于声明哪些目录不需要格式化

 /dist/*
 .local
 .output.js
 /node_modules/**
 ​
 **/*.svg
 **/*.sh
 ​
 /public/*

• 在 package.json 中配置全局格式化命令，用于格式化当前工作目录下的文件(.prettierignore之外的文件)

 "scripts": {
   ...
   "prettier": "prettier --write ."
 },

使用ESLint检测

• 首先在 VSCode 中安装 ESLint 插件

• eslint 是一个插件化的 javascript 代码检测工具
• eslint 规则文档： eslint.bootcss.com/docs/rules/

安装 eslint 和 @babel/eslint-parser

• @babel/eslint-parser 插件： 使用 Babel 解析器来解析 JavaScript 代码，并生成 AST，便于ESLint 进行代码检查和规范性检查

 pnpm install eslint @babel/eslint-parser -D

安装 以下插件配合 eslint 一起使用

• eslint-plugin-prettier 插件： 将 Prettier 作为 eslint 的一个规则使用
• eslint-config-prettier 插件： 将 Prettier 集成在 eslint 配置中，提供了一组 Prettier 相关的 eslint 规则，以便在使用 ESLint 检查代码风格时，也能够自动修复代码格式错误
• eslint-plugin-vue 插件： 检查 Vue 组件的语法、命名规范、属性使用、事件绑定、计算属性、过滤器等方面的问题

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

• 在根目录下新建 .eslintrc.cjs 文件，用于定义检测规则

 module.exports = {
   env: {
     browser: true,
     es2021: true,
     node: true
   },
   parserOptions: {
     ecmaVersion: "latest", // 指定使用ECMAScript
     sourceType: "module",
     requireConfigFile: false,
     parser: "@babel/eslint-parser"
   },
   extends: [
     "eslint:recommended",
     "plugin:vue/vue3-essential", // 使用Vue3的规则配置
     "prettier", // 继承prettier配置
     "plugin:prettier/recommended" // 使用Prettier的推荐配置
   ],
   plugins: ["vue"],
   // 自定义规则
   rules: {
     "vue/multi-word-component-names": "off", // 关闭Vue组件名称必须使用多个单词的规则
     "no-return-assign": "off", // 关闭函数中允许使用赋值表达式的规则
     "no-param-reassign": "off", // 关闭函数参数不允许重新赋值的规则
     "guard-for-in": "off", // 关闭for-in循环中需要使用hasOwnProperty()的规则
     "vue/component-tags-order": ["warn", { order: ["script", "template", "style"] }],
     // 警告出现未使用过的变量
     "no-unused-vars": [
       "warn",
       {
         vars: "all",
         args: "none"
       }
     ],
     "no-var": "error" // 要求使用 let 或 const 而不是 var
   }
 };
 ​

• 新建 .eslintignore 文件，声明不需要检测的目录和文件

 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 dist
 ​
 node_modules
 .DS_Store
 dist
 dist-ssr
 coverage
 *.local
 components.d.ts
 ​
 /cypress/videos/
 /cypress/screenshots/
 ​
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?

使用stylelint约束样式

• stylelint 插件： 一个基于规则的 CSS 代码检查工具 ，可以检查 CSS 文件中的语法错误、格式问题、命名规范、选择器使用、属性值声明等
• stylelint 规则： stylelint.io/user-guide/...
• 安装插件 stylelint

 pnpm install stylelint  -D

安装 以下插件配合 stylelint 使用

• stylelint-config-recommended-less 插件： 支持 Less 语法配置规则集
• stylelint-less 插件： 基于规则的 Less 代码检查工具
• stylelint-config-prettier 插件： 消除 stylelint 和 Prettier 之间的规则冲突
• stylelint-config-standard 插件： 包含与 CSS 书写风格相关的规则，如缩进、空格、引号、命名规范、属性顺序等，用于规范 CSS 代码的书写风格
• stylelint-config-standard-vue 插件： 用于规范 Vue 单文件组件中的 CSS 代码的书写风格
• stylelint-order 插件： 用于强制规定 CSS 属性的顺序

 pnpm install stylelint-config-prettier stylelint-config-standard stylelint-config-standard-vue stylelint-order stylelint-config-recommended-less stylelint-less -D

• 新建 .stylelintrc.cjs 文件，用于定义 CSS 的书写规则

 module.exports = {
   // 继承的规则集
   extends: [
     "stylelint-config-standard", // 使用官方推荐的规则集
     "stylelint-config-recommended-less", // 针对less的规则集
     "stylelint-config-standard-vue", // 针对vue单文件组件的CSS规则集
   ],
   // 使用插件
   plugins: ["stylelint-order"], // 规定CSS书写属性顺序
   // 自定义CSS书写规则
   rules: {
     "selector-class-pattern": null, // 不强制限制选择器类名的格式
     "keyframes-name-pattern": null, // 不强制限制动画关键帧名称的格式
     "no-empty-source": true, // 可以使用空的CSS文件
     "alpha-value-notation": "number", // 强制要求alpha值使用数字表示
     "no-descending-specificity": null, // 不强制限制选择器的优先级
     // 强制要求伪元素选择器使用正确的语法，并忽略 v-deep 选择器
     "selector-pseudo-element-no-unknown": [
       true,
       {
         ignorePseudoElements: ["v-deep"],
       },
     ],
     // 强制要求伪类选择器使用正确的语法,并忽略 v-deep 选择器
     "selector-pseudo-class-no-unknown": [
       true,
       {
         ignorePseudoClasses: ["deep"],
       },
     ],
     // 不强制限制选择器之前的空行
     "rule-empty-line-before": null,
     // 强制要求使用正确的 @ 规则,并忽略一些特殊的less指令
     "at-rule-no-unknown": [
       true,
       {
         ignoreAtRules: [
           "function",
           "if",
           "else",
           "else-if",
           "each",
           "include",
           "mixin",
         ],
       },
     ],
     // 强制要求 @ 规则之前有空行
     "at-rule-empty-line-before": [
       "always",
       {
         except: ["blockless-after-same-name-blockless", "first-nested"],
         ignore: ["after-comment"],
         ignoreAtRules: ["else", "else-if"],
       },
     ],
     // 指定书写样式的排序
     "order/properties-order": [
       "position",
       "top",
       "right",
       "bottom",
       "left",
       "z-index",
       "display",
       "justify-content",
       "align-items",
       "flex-shrink",
       "float",
       "clear",
       "width",
       "min-width",
       "max-width",
       "height",
       "min-height",
       "max-height",
       "padding",
       "padding-top",
       "padding-right",
       "padding-bottom",
       "padding-left",
       "margin",
       "margin-top",
       "margin-right",
       "margin-bottom",
       "margin-left",
       "font-size",
       "line-height",
       "font-family",
       "text-align",
       "text-justify",
       "text-indent",
       "text-overflow",
       "text-decoration",
       "white-space",
       "color",
       "background",
       "background-position",
       "background-repeat",
       "background-size",
       "background-color",
       "background-clip",
       "border",
       "border-style",
       "border-width",
       "border-color",
       "border-top-style",
       "border-top-width",
       "border-top-color",
       "border-right-style",
       "border-right-width",
       "border-right-color",
       "border-bottom-style",
       "border-bottom-width",
       "border-bottom-color",
       "border-left-style",
       "border-left-width",
       "border-left-color",
       "border-radius",
       "overflow",
       "overflow-x",
       "overflow-y",
       "opacity",
       "filter",
       "list-style",
       "outline",
       "visibility",
       "box-shadow",
       "text-shadow",
       "resize",
       "transition",
       "content",
     ],
   },
   // 为不同类型的文件或语法提供不同的配置和规则
   overrides: [
     {
       files: ["**/*.(less|css|vue|html)"],
       customSyntax: "postcss-less",
     },
     {
       files: ["**/*.(html|vue)"],
       customSyntax: "postcss-html",
     },
   ],
 };

使用postcss-less 和 postcss-html 解析

• postcss-less 插件： 用于将 Less 语法转换为 CSS，还可以优化 CSS 代码，包括压缩和去除不必要的样式规则
• postcss-html 插件： 用于将 CSS 嵌入到 HTML 文件中

 pnpm install postcss-html postcss-less -D

• 使用 stylelint 还需要在 VSCode 安装 stylelint 扩展

• 同时在 .vscode 目录下新建一个 settings.json 文件，用于配置 VSCode 的 stylelint 扩展

 {
   // stylelint格式化设置
   "editor.codeActionsOnSave": {
     "source.fixAll.stylelint": true
   },
   "stylelint.enable": true, // 启用 stylelint 插件
   "css.validalte": false,
   "less.validate": false,
   "scss.validate": false,
   "stylelint.validate": ["css", "scss", "less", "postcss", "sass", "vue"]
 }

• 新建 .stylelintignore 文件，声明需要忽略校验的目录

 /dist/*
 .local
 .output.js
 /node_modules/**
 ​
 **/*.svg
 **/*.sh
 ​
 /public/*

git Husky

• 虽然项目已经使用 eslint 了，但不能保证每个人提交代码之前都将 eslint 中的问题解决掉，即保证仓库中的代码都是符合 eslint 规范

• 那么需要执行 git commit 命令时对其进行校验，如果不符合 eslint 规范，那么自动通过规范进行修复
• Husky 工具： husky 是一个 git hook 工具，可以触发 git 提交的各个阶段，如 pre-commit、commit-msg、pre-push
• 安装并配置 husky

 # 初始化husky
 npx husky-init
 ​
 # 更新依赖
 pnpm i

上面脚本命令做了三件事情：

0. 安装了 husky 相关的依赖，在 package.json 下可以查看
1. 项目根目录下创建了一个 .husky 的文件夹
2. 在 package.json 中添加了一个脚本命令 pnpm prepare

配置 package.json

• 新增一个脚本命令，用于在提交前进行 eslint 修复

 "lint": "eslint "src/**/*.{js,ts,vue,jsx,tsx}" --fix",

• 修改 .husky 文件夹下的 pre-commit 文件，当进行 commit 时，执行 lint 脚本

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

git commit规范

• 通常 git commit 最好按照统一风格提交，这样可以快速定位每次提交的内容，方便之后对版本进行控制
• 使用工具 Commitizen 约束编写规范的提交信息
• 安装 commitizen 和 cz-conventional-changelog，并且初始化 cz-conventional-changelog

 # 安装commitizen
 pnpm i commitizen -D
 ​
 # 安装并初始化cz-conventional-changelog
 npx commitizen init cz-conventional-changelog --pnpm -D --exact

• 初始化完成后，package.json 会多出以下配置

• 此时提交代码只需要 npx cz，或者多加一个脚本命令 pnpm commit

 "commit": "cz"

代码提交步骤

• 第一步是选择 type，本次更新的类型

Type	作用
feat	新增特性 (feature)
fix	修复 Bug(bug fix)
docs	修改文档 (documentation)
style	代码格式修改(white-space, formatting, missing semi colons, etc)
refactor	代码重构(refactor)
perf	改善性能(A code change that improves performance)
test	测试(when adding missing tests)
build	变更项目构建或外部依赖（例如 scopes: webpack、gulp、npm 等）
ci	更改持续集成软件的配置文件和 package 中的 scripts 命令，例如 scopes: Travis, Circle 等
chore	变更构建流程或辅助工具(比如更改测试环境)
revert	代码回退

 Select the type of change that you're committing: feat:     A new feature

• 第二步选择本次修改的范围(作用域)，即修改了哪里

 What is the scope of this change (e.g. component or file name): (press enter to skip) login

• 第三步选择提交的信息

 Write a short, imperative tense description of the change (max 87 chars):
  (33) jiahong login user_password_limit

• 第四步提交详细的描述信息

 Provide a longer description of the change: (press enter to skip)

• 第五步确定本次是否为一次重大更改

 Are there any breaking changes? No

• 第六步确定是否影响某个 open issue

 Does this change affect any open issues? No

• 查看刚刚的提交内容

 git log

代码提交验证

• 如果按照 cz 规定提交风格，但依然有人通过 git commit 按照不规范的格式提交，此时可以通过commitlint 来限制提交

• 安装 @commitlint/config-conventional 和 @commitlint/cli

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

• 在根目录创建 commitlint.config.js 文件，配置 commitlint

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

• 使用 husky 生成 commit-msg 文件，验证提交信息

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