ESLint+Prettier+Stylelint+Husky前端代码规范配置

ESLint+Prettier+Stylelint+Husky前端代码规范配置

ESLint配置

pnpm i eslint eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest -D    // 安装

npx eslint --init     // 初始化

// package.json
  "scripts": {
    "lint": "eslint --ext .vue,.js,.jsx,.ts,.tsx ./ --max-warnings 0",
    "lint:fix": "eslint --ext .vue,.js,jsx,.ts,.tsx ./ --max-warnings 0 --fix",
  },

// .eslintrc.json
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module",
        "parser": "@typescript-eslint/parser"
    },

 pnpm run lint   // 验证eslint是否配置成功

Prettier配置

pnpm i prettier -D    // 安装

// 根目录下新建.prettierrc.js文件
module.exports = {
  // 一行最多 120 字符..
  printWidth: 120,
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 不使用缩进符，而使用空格
  useTabs: false,
  // 行尾需要有分号
  semi: true,
  // 使用单引号
  singleQuote: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',
  // jsx 不使用单引号，而使用双引号
  jsxSingleQuote: false,
  // 末尾需要有逗号
  trailingComma: 'all',
  // 大括号内的首尾需要空格
  bracketSpacing: true,
  // jsx 标签的反尖括号需要换行
  jsxBracketSameLine: false,
  // 箭头函数，只有一个参数的时候，也需要括号
  arrowParens: 'always',
  // 每个文件格式化的范围是文件的全部内容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 使用默认的折行标准
  proseWrap: 'preserve',
  // 根据显示样式决定 html 要不要折行
  htmlWhitespaceSensitivity: 'css',
  // vue 文件中的 script 和 style 内不用缩进
  vueIndentScriptAndStyle: false,
  // 换行符使用 lf
  endOfLine: 'auto',
};

// eslint-config-prettier     覆盖 eslint 本身规则  
// eslint-plugin-prettier    (Prettier 来接管 eslint --fix 即修复代码的能力)
pnpm i eslint-config-prettier eslint-plugin-prettier -D

// eslintrc.json 配置添加
{
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended",
        // 1. 接入 prettier 的规则
        "prettier",
        "plugin:prettier/recommended"
    ],
    "rules": {
        // 3. 开启 prettier 自动修复的功能
        "prettier/prettier": "error",
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

pnpm run lint        //通过则　ESLint 规则校验检查以及 Prettier 的自动修复配置

VSCode文件保存自动格式化配置

Vite中集成ESlint

pnpm i vite-plugin-eslint -D

// vite.config.ts
import viteEslint from 'vite-plugin-eslint';
{
  plugins: [
    // 省略其它插件
    viteEslint(),
  ]
}

Stylelint配置

// 安装相关插件
pnpm i stylelint stylelint-prettier stylelint-config-standard postcss-scss postcss-html stylelint-config-recommended-vue stylelint-config-recess-order -D

// 文件根目录新建文件.stylelintrc
module.exports = {
    // 注册 stylelint 的 prettier 插件
    plugins: ['stylelint-prettier'],
    // 继承一系列规则集合
    extends: [
        // standard 规则集合
        'stylelint-config-standard',
        // standard 规则集合的 scss 版本
        'stylelint-config-standard-scss',
        // 样式属性顺序规则
        'stylelint-config-recess-order',
        // 接入 Prettier 规则
        'stylelint-config-prettier',
        'stylelint-prettier/recommended'
    ],
    // 配置 rules
    rules: {
        // 开启 Prettier 自动格式化功能
        'prettier/prettier': true
    }
}

// package.json中
{
  "scripts": {
    // stylelint 命令
    "stylelint": "stylelint src/**/*.{html,vue,sass,less}",
    "stylelint:fix": "stylelint --fix src/**/*.{html,vue,vss,sass,less}",
  }
}

pnpm run stylelint     //  对样式进行格式化

vite 集成 Stylelint

pnpm i vite-plugin-stylelint -D

//　
import viteStylelint from 'vite-plugin-stylelint';
{
  plugins: [
    viteStylelint(),
  ]
}

Husky配置

pnpm i husky -D

// package.json
 "scripts": {
        "prepare": "husky install"
    },

添加husky钩子之前你的项目必须存在一个git

npx husky install   //生成.husky文件

npx husky add .husky/pre-commit "npm run lint" // 添加husky钩子，执行完成后.husky文件夹下会生成pre-commit文件

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npm run lint    // 文件提交前先运行该命令 通过后才可提交

配置 lint-staged(只检查提交的文件)

// package.json
  "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "prettier --write",
      "npm run lint:fix",
      "git add ."
    ],
    "*.{html,vue,vss,sass,less}": [
      "npm run stylelint:fix",
      "git add ."
    ]
  },

配置commit提交信息规范

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

// 根目录新建.commitlintrc.js
module.exports = {
    extends: ["@commitlint/config-conventional"]
};

@commitlint/config-conventional 规定的 commit 信息一般由两个部分: type 和 subject 组成，结构为<type>: <subject>,如新增功能feat: '新增功能描述'

type	subject
feat	添加新功能（常用）
fix	修复 bug（常用）
style	代码格式修改（常用）
test	测试用例新增、修改
build	影响项目构建或依赖项修改
chore	其他修改
ci	持续集成相关文件修改
docs	文档修改
refactor	代码重构
revert	恢复上一次提交

将commitlint集成到husky中

npx husky add .husky/commit-msg "npx --no-install commitlint -e $HUSKY_GIT_PARAMS"

// .husky文件夹下生成commit-msg文件

这种配置类型的东西大家只需要配置一次就能复用到其它项目中了,没必要太深入的研究,需要的时候看一下就行了，希望可以帮助到需要的小伙伴。