eslint+prettier+husky+commitlint 项目工程化管理使用 eslint+prettier+h

关于eslint 和 prettier 对于项目的管理

本次node版本为 v20.18.2

本次预计使用的插件有

eslint 代码检查
perttier 美化代码
husky 提交检查
lint-staged 提交前钩子配置
commitlint 提交文本的检查例如feat: xxxx

创建demo代码

pnpm create vite

eslint

初始化eslint配置

npx eslint --init

创建完成后生成会自动生成eslint.config.js文件

文件内容如下

import js from "@eslint/js" // 校验js规范（推荐）
import globals from "globals"
import tseslint from "typescript-eslint" // 推荐的ts规范
import pluginVue from "eslint-plugin-vue" // 校验vue规范（推荐）
import { defineConfig } from "eslint/config"

export default defineConfig([
  {
    files: ["**/*.{js,mjs,cjs,ts,vue}"],
    plugins: { js },
    extends: ["js/recommended"]
  },
  {
    files: ["**/*.{js,mjs,cjs,ts,vue}"],
    languageOptions: { globals: { ...globals.browser, ...globals.node } }
  },
  tseslint.configs.recommended,
  pluginVue.configs["flat/essential"],
  {
    files: ["**/*.vue"], // 校验vue中的ts代码
    languageOptions: { parserOptions: { parser: tseslint.parser } }
  },
  {
    // 那些文件不通过 eslint校验
    ignores: [".css", "*.d.ts"],
    // 细节的校验规则
    rules: {
      semi: "error",
      "no-console":"error"
    }
  }
])

ignores 和 rules 自行配置

可以暂时配置一些规则

比如代码中写一些
var a = '123';

console.log('xxxxx');

命令行执行 eslint

代码会提示eslint的报错信息证明eslint已经生效了

可以运行eslint --fix 代码将按照eslint的规则去适当的修复报错信息

prettier

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

prettier 美化代码
eslint-plugin-prettier 在eslint中使用prettier
eslint-config-prettier 代码合并如果eslint和prettier格式有冲突已prettier为准

项目中创建 prettier.config.js 配置一些规则


export default {
  singleQuote: false, // 默认单引号
  semi: false, // 末尾添加分号
  tabWidth: 2, // 缩进
  trailingComma: "none", // 默认没有尾逗号
  useTabs: false, // 默认不使用tab
  endOfLine: "auto", // 默认自动换行
  jsxSingleQuote: false // 默认jsx单引号
}

在eslint.config.js 中使用 eslint-config-prettier

import js from "@eslint/js" // 校验js规范（推荐）
import globals from "globals"
import tseslint from "typescript-eslint" // 推荐的ts规范
import pluginVue from "eslint-plugin-vue" // 校验vue规范（推荐）
import { defineConfig } from "eslint/config"
import prettierRecommended from "eslint-plugin-prettier/recommended"

export default defineConfig([
  {
    files: ["**/*.{js,mjs,cjs,ts,vue}"],
    plugins: { js },
    extends: ["js/recommended"]
  },
  {
    files: ["**/*.{js,mjs,cjs,ts,vue}"],
    languageOptions: { globals: { ...globals.browser, ...globals.node } }
  },
  tseslint.configs.recommended,
  pluginVue.configs["flat/essential"],
  {
    files: ["**/*.vue"], // 校验vue中的ts代码
    languageOptions: { parserOptions: { parser: tseslint.parser } }
  },
  {
    // 那些文件不通过 eslint校验
    ignores: [".css", "*.d.ts"],
    //  细节的校验规则
    rules: {
      semi: "error"
    }
  },
  prettierRecommended //使用prettier的推荐规则覆盖eslint规则
])

vscode 配置

vscode插件安装 eslint 插件识别错误的时候可以自动识别不需要运行 eslint命令行了

vscode插件安装 prettier prettier eslint

勾选，保存自动格式化

设置采用prettier进行格式化代码

支持基础的eslint+prettier配置基本完成

editorConfig

可以安装vscode插件editorconfig 用于给编辑器识别文件的基本格式

安装后根目录增加文件.editorconfig内容如下

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf

husky

用于git提交代码的时候进行代码的检查工作未通过不允许提交

lint-staged 用于优化对比第二次提交的时候提交到缓存区在缓存区对比

步骤

初始化代码 git init 记得创建.gitignore
pnpm install husky lint-staged -D
在package.json中配置代码如下

在git中添加钩子运行npx husky init 会在根目录增加.husky文件夹
在.husky中的pre-commit 输入npx lint-staged 这样每次提交之前就会去检测代码

commitlint

用于提交代码的文本校测是否标准例如feat: xxx doc: xxxx fix: xxxx

安装插件 pnpm install @commitlint/cli @commitlint/config-conventional -D

项目根目录下新增配置文件commitlint.config.cjs 内容如下

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

在.husky文件夹中新增commit-msg文件(文本文件) 输入
```
npx commitlint --edit $1
```

配成成功后提交代码会提示

到此为止全部配置完成