概览

前端项目搭建

从0创建一个项目我大致会做以下事情：项目构建、引入必要插件、代码规范、提交规范、常用库和组件

目前vue3项目我会用vite或者create-vue创建项目
接下来引入必要插件：路由插件vue-router、状态管理vuex/pinia、ui库我比较喜欢element-plus 和antd-vue、http工具我会选axios
其他比较常用的库有vueuse，nprogress，图标可以使用vite-svg-loader
下面是代码规范：结合prettier和eslint即可
最后是提交规范，可以使用husky，lint-staged，commitlint
目录结构我有如下习惯： .vscode：用来放项目中的 vscode 配置
plugins：用来放 vite 插件的 plugin 配置
public：用来放一些诸如页头icon 之类的公共文件，会被打包到dist根目录下
src：用来放项目代码文件
api：用来放http的一些接口配置
assets：用来放一些 CSS 之类的静态资源
components：用来放项目通用组件
layout：用来放项目的布局
router：用来放项目的路由配置
store：用来放状态管理Pinia的配置
utils：用来放项目中的工具方法类
views：用来放项目的页面文件

前端基建

命名规则

文件夹及文件

全部用小写字母，单词之间用横线隔开，此规范可以避免文件名大小写在不同文件系统下的行为不一致，
命名格式：time-picker、split-button、common-utils

组件/标识符/name

命名格式，大驼峰【首字母大写】：TimePicker
类别[区分+类别]：Button / SplitButton / MenuButton
带功能组件【名词+动词】：TimePicker / TreeSelect / NumberPicker
禁止导出没有名字的组件

强制命名规则

给组件根元素增加类名，className
搜索关键字，keyword
响应类事件回调以on开头，后面跟具体的响应类似

开发规范

数据向下，事件向上，一切变化都是可追溯的。可预测的
第三方外部链接(eg:https://www.google.com)跳转一律用a标签，同时必须新标签打开，设置rel="noreferrer noopener" 属性

前端代码规范

前端工程化（git规范）前端规范

区分开发、提交代码、生产环境
EditorConfig: 跨编辑器和IDE编写代码，保持一致的简单编码风格。某些编辑器已默认集成对EditorConfig的支持，比如常用的：Webstorm、IntelliJ IDEA等；而另一些编辑器则需要借助安装对应的插件来支持：比如 Visual Studio Code、Atom等（EditorConfig for vs code）。配置文件 editorconfig
ESLint：作代码质量检测、编码风格约束等；
Prettier: 专注于代码格式化的工具，美化代码；
git commit 检查
cli 脚手架集成脚手架集成

eslint 和 prettier 配置

VSCode 中安装的是在编辑器里面用的，如果项目根目录下有 eslintrc 和 prettierrc 配置文件，VSCode 插件会自动读取配置文件中的配置检查你的代码和格式化文件，npm 安装的是在命令行中运行的。如果你只安装 npm 包，VSCode 是不会有 lint 提示的，只能通过命令行，在小黑窗查看不符合 lint 规则的检测信息。安装 npm 包最主要的原因是可以通过 git hook 强制提交代码前 lint 和格式化代码保证代码仓库的代码风格统一。

ESLint 进行语法检查，Prettier 只格式化代码，不要在 ESLint 中去配置代码风格相关的规则，避免 eslint 和 prettier 冲突。

在项目目录下安装 eslint prettier

shell

// 安装eslint
npm i eslint -D
npx eslint --init // 生成eslint配置文件
npx eslint xx.js // 语法检查

// 安装prettier并解决 eslint 和 prettier 冲突
npm i prettier eslint-config-prettier eslint-plugin-prettier -D
// 在.eslintrc 的 extend 中添加 "prettier" 解决 eslint 和 prettier 的冲突

// 格式检查
npx prettier

eslint 配置集

eslint-plugin-prettier: 先使用 prettier 对代码进行格式化 eslint-config-prettier: 使用这个配置集，会关闭一些可能与 prettier 冲突的规则 eslint-config-airbnb: Airbnb 公司提供的配置集 eslint-config-vue: vuejs 使用的配置集

安装 eslint 包后可以在命令行校验文件，但是编辑器不会提示，在编辑器安装 eslint 插件后编辑器才会有报错提示，并且可以配置编辑器保存文件时自动修复报错。

如果你的 ESLint 预设包含格式化规则，它们可能会与 Prettier 发生冲突。我们建议使用eslint-config-prettier 禁用你 ESLint 预设中的所有格式化规则，这样 ESLint 就只用于捕捉逻辑错误。如果你想在合并 PR 前强制执行文件的格式化，请在你的 CI 中使用 prettier --check 命令。

git 规范

如果你正在使用GIt做项目代码管理，那么则可以借助 husky + lint-staged + prettier 在 Git 提交时，自动强制校验并格式化且修复代码，而且只处理自己本次改动提交的文件。

lint-staged 的概念是在git中暂存的文件上运行配置好的linter任务（或其他任务）。lint-staged总是将所有暂存文件的列表传递给任务，如果想让 linter 的某个任务忽略某些文件，应该在这个任务的配置文件中进行配置（如不对第三方库进行 eslint 和 prettier 处理，应该配置 .eslintignore 和 .prettierignore）。

husky: 操作 git 钩子的工具，在 git 钩子中执行命令 lint-staged: 对本地暂存区文件进行检查（eslint、prettier），它的实现涉及到 git pre-commit hooks。 commitlint: commit 信息校验 commitizen: 辅助 commit 信息，交互式

安装并配置 lint-staged

方法（1），在安装 eslint 和 prettier 的前提下根据 package.json 的依赖自动安装

npx mrm@2 lint-staged

方法（2）

npm install --save-dev husky lint-staged

package.json 中的配置

json

// package.json 
// husky v4版本，husky@4.3.8 版本更稳定
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "pre-commit": "lint-staged && pretty-quick --staged"
    }
  },
  "lint-staged": {
    "*.js": "eslint  --fix",
    "src/**/*.{js,jsx,vue,json,css,less,scss,sass}": [
      "eslint --fix", // 先检查语法
      "prettier --write", // 再格式化
    ],
    "*.{ts,json,yml,yaml,md}|examples/*.md": [
      "prettier --check"
    ],
    "*.md|{.github,benchmark,bin,examples,hot,lib,schemas,setup,tooling}/**/*.{md,yml,yaml,js,json}": [
      "cspell"
    ]
  }
}

git commit规范

commitlint: 格式检查 commitizen: 交互式提示信息

Git CI 集成

git hooks 可以绕过，但 CI(持续集成) 是绝对绕不过的，因为它在服务端校验。使用 gitlab CI 做持续集成，配置文件 .gitlab-ci.yaml 如下所示

json

// .gitlab-ci.yaml
lint:
stage:lint
only:
 -/^feature\/.*$/
script:
 -npmlint

概览 ​

命名规则 ​

文件夹及文件 ​

组件/标识符/name ​

强制命名规则 ​

开发规范 ​

前端代码规范 ​

eslint 和 prettier 配置 ​

git 规范 ​

git commit规范 ​

Git CI 集成 ​

概览