Vite项目实践总结(三)：代码规范

柜子动了
820 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

我们的项目大多是多人协作共同开发的，我们期望统一的代码规范对代码进行约束。

ESLint + prettier + stylelint

eslint + prettier + stylelint 这部分可以查看这篇文章来配置，这边就不过多描述

一步步搭建一个vite2+vue3+ts的基础项目

git-hooks 与 Husky

通常情况下为了确保团队中开发人员提交的代码符合规范，我们可以在开发者上传代码时进行规范校验。 通常使用husky来协助进行代码提交时的eslint校验。

我们需要先初始化本地仓库，根目录下执行git init

git-hooks

已经初始化完本地仓库，我们使用git bash打开项目根目录 执行ls -la查看隐藏的目录，可以看到.git文件夹

gh1.png

进入.git文件夹继续查看

cd .git 
ll

gh2.png 可以看到 hooks 文件夹，这个文件夹提供了 git 命令相关的钩子.

进入hooks下查看

cd hooks
ll

gh3.png

我们可以看到有很多 git 命令相关的文件名。比如pre-commit.sample pre-push.sample等。 我们期望的就是在 git 提交(commit)之前，对代码进行校验，如果不能通过校验，就无法将暂存区中的代码提交到本地仓库。

通常开发过程中我们使用husky来帮助我们使用git-hooks，让我们来看看如何使用。

Husky

Husky 官网

安装依赖

npx husky-init && npm install  # npm 
# or
npx husky-init && yarn         # Yarn

可以发现在根目录下新生成了一个.husky文件夹，该文件夹下存在pre-commit文件，通过修改pre-commit文件的内容来实现提交前的代码校验。

pre-commit文件

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

# 新增
npm run eslint

修改package.json文件，新增配置

{
  //...
  "scripts": {
    "eslint": "eslint ./src --fix"
  },
  //...
}

当我们提交代码到本地仓库时，会执行eslint命令，就会对src目录下的文件进行校验并修复。

lint-staged

作用：配置husky能让我们在提交代码之前对代码进行校验，但是当我们项目代码越来越多时，每次提交前校验全部代码显然是不合适的。所以需要一个方法每次只检查新增或修改的文件 ===> lint-staged

安装

yarn add lint-staged -D

修改pre-commit

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run lint-staged # 使用lint-staged只校验新增/修改过的文件

修改package.json

{
  //...
  "script": {
    "lint-staged": "lint-staged",
  },
  "lint-staged": {
    "src/**/*.{ts,vue}": [
      "eslint --fix",
      "git add ."
    ],
    "*.{vue,scss}": [
      "stylelint --fix --custom-syntax postcss-html",
      "git add ."
    ]
  },
  //...
}

ok，搞定，测试一下

lt.png

踩坑

1、prettier和stylelint冲突问题

当我们配置了prettier与stylelint，template里面标签的行内样式末尾分号规则有冲突 具体如下： elementplus2.png 查看stylelint官网的规则：希望我们在行内样式的末尾是一个分号

elementplus2-2.png 但是，当我们在末尾加上; prettier又提示我们：想要我们删掉末尾的;

elementplus3.png 冲突产生了，我们通过修改.stylelintrc.js

在rules中添加上规则

module.exports = {
  //...
  "rules": {
    //...
    "declaration-block-trailing-semicolon": null,
  }
}

这样我们就能忽略stylelint对末尾分号的校验

:deep不能被stylelint失败的问题

很多时候，我们需要重写UI组件库的样式，通过:deep来实现，但是stylelint却不识别:deep elementplus4.png 同样的，在stylelintrc.js文件中

module.exports = {
  //...
  "rules": {
    'selector-pseudo-class-no-unknown': [
      true,
      {
        ignorePseudoClasses: ['deep']
      }
    ],
  }
}

至此，我们的代码规范就配置完成了，多谢观看。

avatar
文章
阅读
粉丝