携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第20天，点击查看活动详情

前言

• 我们使用vite基础模板创建的项目，是不带eslint和prettier的校验的，这就需要我们自己集成一下。

eslint

• eslint主要用来做代码校验，以及部分代码的格式化
• 我们先安装相关依赖

yarn add eslint eslint-config-standard eslint-plugin-import eslint-plugin-promise eslint-plugin-node -D

• eslint-config-standard是eslint基础规则，eslint-plugin-xxx是对规则的补充
• 在根目录下创建 .eslintrc.js
• 添加如下代码，完成基础的eslint功能

module.exports = {
  extends: "standard",
};

• 此时项目就可以获得eslint相关报错

prettier

• 我们想要修复eslint的代码只能一行一行改，我们是否有一些工具可以帮助我们做自动格式化呢？这里就要用到prettier。
• prettier主要做代码格式化，但是有一些格式化会和 eslint 冲突，我们需要处理下
• 我们先在根目录创建配置文件 .prettierrc

{
  "semi": false,
  "singleQuote": true
}

vscode配置

• 安装 eslit prettier - code formatter扩展插件
• vscode 设置 -> 查找 format on save ，勾选这个选项，保存时自动格式化

• vscode 设置 -> 查找 formatter ，找到 default formatter 选项，设置默认使用 prettier 方式格式化代码

• 此时我们保存文件时，prettier会自动帮助我们格式化代码。

script 脚本命令

• 我们可以通过命令，来验证我们所有的代码是否符合eslint规则
• package.json 中添加脚本命令

"scripts": {
  "dev": "vite",
  "build": "npm run lint && vue-tsc --noEmit && tsc --noEmit && vite build",
  "serve": "vite preview",
  "lint": "eslint --ext js src/"
},

• 执行命令

npm run lint

• 如果我们的代码有不符合规则的地方，会给我们报错提醒。

使用 husky 进行 lint 校验

• 如果我们的代码没有通过校验，在git提交时，我们还是可以提交代码
• 我们希望在提交git记录时，自动校验我们的代码。
• 我们需要初始化 git 仓库
• 安装相关依赖

yarn add husky -D
npx husky install

• 然后执行以下命令

# git commit 之前先执行 npm 脚本
npx husky add .husky/pre-commit "npm run lint"

• 这时，当我们提交代码的时候，会先执行npm run lint脚本来进行代码校验

总结

这里简单了解了下如何在vite中使用eslint和prettier，一般初始化的框架都会带着这些eslint和prettier规则，我们可以直接使用