前端项目配置(vite + react + eslint +prettier + husky...)

爱吃零食的猫
1,245 阅读3分钟

创建项目

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue
pnpm create vite my-react-app --template react-ts

Eslint

pnpm i eslint -D

# 生成 eslintrc 配置文件
npx eslint --init

Eslint Rules Link

// eslintrc.cjs
module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier'
  ],
  overrides: [],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: ['react', '@typescript-eslint', 'prettier'],
  rules: {
    'prettier/prettier': 'error',
    '@typescript-eslint/no-unused-vars': 'error' // 不允许存在未使用的变量
  }
}

Prettier

pnpm i prettier eslint-config-prettier -D

# 运行 prettier 检测修复
npx prettier --write .
  • 新增 .prettierrc 配置文件
// 配置
{
  "semi": false,
  "tabWidth": 2,
  "trailingComma": "none",
  "singleQuote": true,
  "arrowParens": "avoid"
}

  • .prettierignore 配置忽略文件

  • 配置 eslint + prettier

Installation

Install eslint-config-prettier:

npm install --save-dev eslint-config-prettier

# 避免 Prettier 格式化之后的代码导致 ESLint 报错会将 prettier 规则覆盖掉部分 eslint 规则

Then, add "prettier" to the "extends" array in your .eslintrc.* file. Make sure to put it last, so it gets the chance to override other configs.

{
  "extends": [
    "some-other-config-you-use",
    "prettier"
  ]
}

Finally, run the CLI helper tool to find problems in the "rules" section of your .eslintrc.* file. (Remember, "rules" always “wins” over "extends"!)
  • 接下来在 package.json 的 script 中添加 lint 命令。
"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint --ext .js,.jsx,.ts,.tsx --fix --quiet ./",
  },
  • eslint-plugin-prettier 这个插件的主要作用就是将 prettier 作为 ESLint 的规则来使用，相当于代码不符合 Prettier 的标准时，会报一个 ESLint 错误，同时也可以通过 eslint --fix 来进行格式化。
pnpm i eslint-plugin-prettier -D

配置

eslint-plugin-prettier does not install Prettier or ESLint for you. You must install these yourself.

Then, in your .eslintrc.json:

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

Git hooks

为了方便代码格式化，可以在每次commit代码之前执行prettier格式化代码，这就需要用到git hooks

  1. Install husky and lint-staged:
# husky git hooks 工具
# lint-staged 本地暂存代码检测工具
npm install --save-dev husky lint-staged
npx husky install
npm set-script prepare "husky install"
npx husky add .husky/pre-commit "npm run lint"

会在项目中生成一个 .husky 文件夹，存放 githooks 脚本,并会在每一次 git commit 之前都会先执行一次 npm run lint ,校验通过后才会提交代码

测试一下

image.png

npm run lint 会全局校验所有的文件，这就会导致一个问题，当你在开发A页面时，在提交的时候检测出B页面未通过lint校验，这时候我们改还是不改呢？

lint-staged 就是解决这个问题的，lint-staged只会检测本地已修改的文件，所以我们将 npm run lint 改成 npx lint-staged

lint-staged可在 package.json 中配置规则，也可新建 lint-staged.config.js 配置文件

module.exports = {
  'src/**/*.{js,jsx,ts,tsx}': ['prettier --write', 'eslint --fix'],
  '*.md': ['prettier --write']
}


npx husky add .husky/pre-commit "npx lint-staged --config lint-staged.config.cjs --allow-empty"

此时，在 commit 的时候会检验本地 add 过的文件，校验不通过的话会自动将文件进行 stash

commitlint

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

  • commitlint 检查您的commit message 是否符合提交格式(@commitlint/config-conventional)

  • commitlint-config-conventional（基于 Angular 的提交约定）

  • 加一个 pre-commit 钩子，用于检测当前 commit message 是否符合规范

# # 在 shell 中我们会见到 $0、$1、$2这样的符号, 简单来说 $0 就是你写的shell脚本本身的名字，$1 是你给你写的shell脚本传的第一个参数，$2 是你给你写的shell脚本传的第二个参数
 npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

Angular 提交约定

类型描述
build编译相关的修改，例如发布版本、对项目构建或者依赖的改动
chore其他修改, 比如改变构建流程、或者增加依赖库、工具等
ci持续集成修改
docs文档修改
feat新特性、新功能
fix修改bug
perf优化相关，比如提升性能、体验
refactor代码重构
revert回滚到上一个版本
style代码格式修改, 注意不是 css 修改
test测试用例修改
avatar
文章
阅读
粉丝