前端项目添加代码规范(eslint prettier stylelint husky lint-staged commitlint)

290 阅读4分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

关键词: 代码规范 eslint prettier stylelint husky lint-staged commitlint vite react

项目demo源码

环境设置

  1. 准备项目(用 vite 快速搭建一个 react 项目)pnpm create vite react-app或者从零开始配置 npm init -y
  2. 准备 git 仓库并关联 git init
  3. 设置 package.json。``
// ...
  // 无法通过 npm publish 发布代码
  "private": true, 
  // publishConfig 配置会在模块发布时生效,用于设置发布时一些配置项的集合。
  "publishConfig": {
    "tag": "1.1.0",
    "registry": "https://registry.npmjs.org/",
    "access": "public" // 表示当前项目发布到NPM的访问级别,它有 restricted和public两个选项
    // restricted表示我们发布到NPM上的是私有包(收费),访问级别默认为restricted
  }
  1. 配置ide。vscodeprettier 会有很多默认配置,可以通过左下角设置,-> settings 进入配置界面进行管理,所有修改后的结果会保存在 settings.json 文件里。在根目录新建 .vscode 文件夹,里面提供一个 settings.json,可以为项目单独配置。

eslint: 对代码进行校验

  1. 在项目内安装 eslint 及相关的包
  2. vscode 安装 eslint 插件
pnpm add -D eslint 
# 按照项目情况进行配置
pnpm create @eslint/config 
# 或者使用 eslint init
npx eslint --init
# eslint-plugin-react-hooks 用于检查 Hook 代码是否符合使用规则的插件。
pnpm add -D eslint-plugin-react-hooks

# 测试
npx eslint ./src/App.tsx

.eslintrc.cjs 添加配置。

"extends": [
  // ...
  "plugin:react-hooks/recommended",
],
"plugins": [
  // ...
  "react-hooks"
],
"rules": {
  // ...
  "react/prop-types": "off",
}

prettier: 对代码进行格式化

# eslint-config-prettier 解决冲突,关掉与 `Prettier` 产生冲突的 `ESlint` 格式相关配置。
# eslint-plugin-prettier 解决冲突后希望通过 `Eslint` 自动保存。
pnpm add -D prettier eslint-config-prettier eslint-plugin-prettier 

.eslintrc.cjs 中添加 prettier 相关配置

extends: [
  "prettier",
  "plugin:prettier/recommended"
],
plugins: [ "prettier"],  
// .eslintrc.js 全量
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "plugin:prettier/recommended",
  ],
  overrides: [],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["react", "@typescript-eslint", "react-hooks", "prettier"],
  rules: {
    "react/prop-types": "off",
  },
};

配置 .prettierrc

// https://www.prettier.cn/docs/configuration.html
{
  "semi": false,
  "tabWidth": 2,
  "trailingComma": "none",
  "singleQuote": true,
  "arrowParens": "avoid"
}

配置 .eslintignore .prettierignore

*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
.eslintrc.js
.prettierrc.js
/src/mock/*

package.json 添加对应脚本

{
  "scripts": {
    "lint:eslint": "eslint --fix --ext .js,.ts,.tsx ./src",
    "lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,scss,html,md}\""
  }
}

运行这两句脚本看看效果。

stylelint: 对样式书写规范进行校验

在进入正文之前,先处理浏览器兼容问题

vite 默认集成 postcss,所以直接安装其他依赖进行配置。webpack 需要单独安装一下。

pnpm add -D less autoprefixer postcss-less

*.css 文件名改成 *.less。配置 vite.config.ts

import autoprefixer from "autoprefixer";

export default defineConfig({
  css: {
    postcss: {
      plugins: [autoprefixer],
    },
  },
});

进入正文,添加 stylelint 相关依赖。

  • stylelint-less
  • stylelint-config-prettier 关闭所有不必要的或可能与Prettier冲突的规则。确保将其放在 extends 队列最后,这样它将覆盖其他配置。
  • stylelint-config-standard 官网提供的 css 标准

其他推荐安装插件:

  • stylelint-config-recess-order 属性排列顺序
pnpm add -D stylelint stylelint-less stylelint-config-prettier stylelint-config-standard

配置 .stylelintignore .stylelintrc.cjs

// @see: https://stylelint.io
module.exports = {
  extends: [
    "stylelint-config-standard", // 配置stylelint拓展插件
    "stylelint-config-prettier", // 配置stylelint和prettier兼容
  ],
  "overrides": [
    {
      "files": ["**/*.less"],
      "customSyntax": require("postcss-less"),
      "rules": {
        'comment-empty-line-before': null,
        'declaration-empty-line-before': null,
        'function-name-case': 'lower',
        'no-descending-specificity': null,
        'no-invalid-double-slash-comments': null,
        'rule-empty-line-before': 'always',
      }
    }
  ],
  plugins: ["stylelint-less"], // 配置stylelint less拓展插件
  rules: {}
};
# .stylelintignore
node_modules
dist

添加对应脚本

// package.json
{
  "scripts": {
    "lint:stylelint": "stylelint --cache --fix \"**/*.{less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
  }
}

lint-staged + husky: 代码提交进行校验

  • lint-staged 本地暂存代码检查工具
  • husky 操作 git 钩子的工具
pnpm add lint-staged husky -D
# 在 package.json 中添加脚本
npm set-script prepare "husky install"

# 初始化husky 将 git hooks 钩子交由 husky 执行
pnpm prepare
npx husky add .husky/pre-commit "npx lint-staged"
# package.json 添加 lint-staged 脚本
npm set-script lint-staged "lint-staged"

根目录创建 .lintstagedrc.json 进行配置,或者通过 lint-staged.config.js 进行配置。

{
	"*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
	"{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": ["prettier --write--parser json"],
	"package.json": ["prettier --write"],
	"*.{scss,less,styl}": ["stylelint --fix", "prettier --write"],
	"*.md": ["prettier --write"]
}

commit 阶段的消息模板

  • commitlint commit 信息校验工具 (@commitlint/cli、@commitlint/config-conventional)
  • commitizen 辅助 commit 信息 ,就像这样,通过选择输入,规范提交信息 commit 提交时,信息模板的依赖 cz-git 指南
pnpm add @commitlint/cli @commitlint/config-conventional -D
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
# 安装辅助提交依赖
pnpm i commitizen cz-git -D

# 安装指令和命令行的展示信息
npm set-script commit "git-cz" # package.json 中添加 commit 指令, 执行 `git-cz` 指令

添加 commitlint.config.cjs 并且配置

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'ci',
        'docs',
        'feat',
        'fix',
        'perf',
        'refactor',
        'build',
        'chore',
        'revert',
        'style',
        'test'
      ]
    ],
    'type-empty': [2, 'never'], // <type> 不能为空
    'type-case': [0],
    'scope-empty': [0],
    'scope-case': [0],
    'subject-empty': [2, 'never'], // <subject> 不能为空 (默认)
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],

    'header-max-length': [0, 'always', 72]
  }
}

package.json 中,将原来 commit 配置,变更为自定义配置:

"config": {
    "commitizen": {
        "path": "node_modules/cz-git"
    }
}

推荐项目

  • 总是被嫌弃代码不规范?你可能需要这个工具 | web-norm 本地安装 npm install web-norm -D | yarn add web-norm -D | pnpm install web-norm -D package.json 中新增脚本 "web-norm": "web-norm",使用的时候直接运行 npm run web-norm 就行了,mac 电脑执行 npm run postinstallmac 来设置 husky 的读写权限

参考资料