前端规范配置
ESLint + Prettier + lint-staged + commitizen
背景
近期项目中，为实现代码规范统一而着手配置起ESLint。先前在个人项目中，因为方便好用，直接采用@antfu/eslint-config来配置。
// .eslintrc
{
"extends": "@antfu",
"rules": {
"no-console": "off",
}
}
ESLint配置
首先安装ESLint并初始化
pnpm add eslint -D
pnpm eslint --init
执行上述命令时，会出现以下选项：
(1) How would you like to use ESLint?
选择：To check syntax and find problems
(2) What type of modules does your project use?
选择：JavaScript modules (import/export)
(3) Which framework does your project use?
选择：Vue.js
(4) Does your project use TypeScript?
选择：Yes
(5) Where does your code run?
选择：Browser
(6) What format do you want your config file to be in?
选择：JavaScript
(7) Would you like to install them now?
选择：Yes
(8) Which package manager do you want to use?
选择：pnpm
执行完初始化命令后，会自动生成 .eslintrc 相关文件
module.exports = {
"env": {
"browser": true,
"es2021": true,
// 如果打开该文件出现报错：module is not defined 则添加以下代码
"node": true
},
"extends": [
"eslint:recommended",
"plugin:vue/vue3-essential",
"plugin:@typescript-eslint/recommended"
],
"overrides": [
],
// pnpm install vue-eslint-parser -D 解析.vue文件
// 如果不安装会报错：Eslint Vue 3 Parsing error: '>' expected.eslint
"parser": "vue-eslint-parser",
"parserOptions": {
"ecmaVersion": "latest",
"parser": "@typescript-eslint/parser",
"sourceType": "module"
},
"plugins": [
"vue",
"@typescript-eslint"
],
"rules": {
}
}
设置自动保存
可以在package.json文件中的script中添加lint命令:
"lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"，每执行一次命令pnpm lint 都会去做ESLint校验。但也可在保存时自动校验，在.vscode的settings.json中，添加以下代码
{
// 开启自动修复
"editor.codeActionsOnSave": {
"source.fixAll": false,
"source.fixAll.eslint": true
},
}
安装VsCode插件ESLint
给ESLint配置rules
在rules中添加常用规则，即可实现校验功能。
参考Vue3源码中的规范配置，在ESLint的基础上需要配置prettier
prettier配置
首先安装prettier
pnpm add prettier -D
根目录下创建.prettierrc.xxx文件
关于配置，可参考官方文档：prettier.io/docs/en/opt…
module.exports = {
semi: false,
tabWidth: 2,
singleQuote: true,
printWidth: 80,
trailingComma: 'none',
arrowParens: 'avoid'
};
在package.json文件的script中添加命令
"format": "prettier --write --loglevel warn \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\""
安装VsCode插件Prettier - Code formatter
设置保存自动格式化
在.vscode的settings.json中，添加以下代码
{
// 保存的时候自动格式化
"editor.formatOnSave": true,
// 格式化工具默认选择prettier
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
解决ESLint和Prettier的冲突
安装插件并添加配置
pnpm add eslint-config-prettier eslint-plugin-prettier -D
在 .eslintrc.xxx文件的extends中添加一个配置，重启后即可生效
{
extends: [
'eslint:recommended',
'plugin:vue/vue3-essential',
'plugin:@typescript-eslint/recommended',
+ // 新增，必须放在最后面
+ 'plugin:prettier/recommended'
],
}
lint-staged + husky + commitizen配置
通过上述的配置，我们实现代码格式的统一，代码总算看起来舒服多了。不再是空格不一致，单双引号混用，分号随机使用的场景了。但是，在代码提交到远程仓库时，我们都希望知晓本次提交的目的和内容是什么。因此，我们需要控制提交时commit的规范。
安装并配置lint-staged
pnpm add lint-staged -D
在package.json中配置
"lint-staged": {
"*.{js,jsx,ts,tsx,vue}": [
"prettier --write",
"eslint --fix"
],
"*.{html,css,less,scss,md}": [
"prettier --write"
]
},
安装并配置husky
npx husky-init && npm install，执行命令后，会生成.husky文件夹。
在package.json中添加一条prepare脚本
"scripts": {
"dev": "vite",
+ "prepare": "husky install"
},
在提交时，执行一次检查
// .husky/pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npm run lint
安装并配置commitizen规范提交
安装commitizen
npm install commitizen -D
安装cz-conventional-changelog，并且初始化cz-conventional-changelog
npx commitizen init cz-conventional-changelog --save-dev --save-exact
在package.json中进行配置：
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
},
"scripts": {
"dev": "vite",
"prepare": "husky install"
+ "commit":"cz"
},
安装commitlint
npm i @commitlint/config-conventional @commitlint/cli -D
在根目录创建commitlint.config.js文件，配置commitlint
module.exports = {
extends: ['@commitlint/config-conventional']
}
使用husky生成commit-msg文件
npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"
输入以上命令，自动生成以下文件信息，输入提交信息会触发commit-msg钩子
// .husky/commit-msg
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx --no-install commitlint --edit
通过上述的配置，我们便实现了代码风格的统一和commit提交格式的规范化。此时我们可以测试看看是否生效。如果生效，恭喜你完成了前端代码的规范化，冲鸭！
参考链接
