使用eslint + prettier + husky + lint-staged 约束项目的最佳实践！
使用eslint + prettier + husky + lint-staged 约束项目的最佳实践！
前言
大家好，我是HoMeTown，最近在搭建一个公司与某一线大厂有合作，需要做一个性能极其优化的微信小程序，我们组正好刚从企微项目里抽出身来，所以这个艰巨的任务就交给我们来完成了，首先开了一天会，跟合作方的前端经理PM 确定好了技术选型以及规范，分工细则下来以后，得到项目架构&少许业务开发的任务，优化交给合作方去做，因此这个项目会有很多人参与进来，一个强有力的项目约束是十分重要的！
eslint
概念
eslint是一个集大成的语法校验工具，他会帮你去规范你的代码，也会帮你fix一部分小问题，支持extends、plugin、rules等属性，他的原理我也在 【源码角度】7分钟带你搞懂ESLint核心原理！这片文章里讲过，感兴趣的朋友可以了解一下，接下来，看看具体配置方法。
这里不做属性以及规则属性的说明，网上一大把，直接贴配置，参考 eslint中文文档
安装
安装所需依赖
"@babel/core": "^7.16.7","@babel/eslint-parser": "^7.18.9","@babel/eslint-plugin": "^7.18.10","@ecomfe/eslint-config": "^7.4.0","@typescript-eslint/eslint-plugin": "^5.17.0","@typescript-eslint/parser": "^5.17.0","eslint": "^7.19.0ear","eslint-plugin-prettier": "^4.0.0","eslint-plugin-import": "^2.25.4",接下来在根目录新建.eslintrc.js
// https://eslint.bootcss.com/docs/rules/module.exports = { root: true, env: { es6: true, browser: true, node: true
}, parser: '@typescript-eslint/parser', // 添加解析器
overrides: [ // 为特定的文件指示处理器
{ files: ['*.ts'], // 校验所有的ts文件
extends: [ // 继承eslint规则
'eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:@typescript-eslint/recommended-requiring-type-checking'
], parserOptions: { project: './tsconfig.json', ecmaVersion: 2018, sourceType: 'module'
}
}
], globals: { // 微信小程序
wx: true, App: true, Page: true, getCurrentPages: true, getApp: true, Component: true, requirePlugin: true, requireMiniProgram: true
}, plugins: ['@typescript-eslint', 'prettier']
}新建.eslintignore，忽略不需要被校验的文件
# .eslintignoretypings
node_modulesvscode安装扩展eslint，项目中新建.vscode/settings.json
{
// 主题
"workbench.colorTheme": "Atom One Light",
// 缩进
"editor.tabSize": 2,
// 保存eslint校验
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.format.enable": true,
// 校验那些文件
"eslint.validate": ["typescript", "javascript", "vue", "html"],
"nuxt.isNuxtApp": false,
// 终端显示
"eslint.alwaysShowStatus": true,
// 加载配置文件
"eslint.options": { "configFile": ".eslintrc.js" }}vscode展示如下图，表示开启成功
在package.json中新增命令：
"lint": "eslint --fix ./ --ext .ts --ext .js",测试
执行npm run lint
随便修改一个文件
再执行npm run lint
可以看到已经报错了~
配置成功
prettier
概念
prettier是一个代码格式化工具，配合vscode自动保存可以保证代码风格的统一。
安装
"prettier": "^2.5.1",在项目根目录新建.prettierrc.js，规则参考 Prettier
// .prettierrc.jsmodule.exports = {
printWidth: 120,
tabWidth: 2,
useTabs: false,
semi: false,
singleQuote: true, // 对象的 key 仅在必要时用引号
quoteProps: 'as-needed', // jsx 不使用单引号，而使用双引号
jsxSingleQuote: false, // 末尾不需要逗号
trailingComma: 'none', // 大括号内的首尾需要空格
bracketSpacing: true, // jsx 标签的反尖括号需要换行
jsxBracketSameLine: false, // 箭头函数，只有一个参数的时候，无需括号
arrowParens: 'avoid', // 每个文件格式化的范围是文件的全部内容
rangeStart: 0,
rangeEnd: Infinity, // 不需要写文件开头的 @prettier
requirePragma: false, // 不需要自动在文件开头插入 @prettier
insertPragma: false, // 使用默认的折行标准
proseWrap: 'preserve', // 根据显示样式决定 html 要不要折行
htmlWhitespaceSensitivity: 'css', // 换行符使用 lf
endOfLine: 'lf'}新建.prettierignore文件忽略不需要进行格式化的文件
# .prettierignore/node_modules# OS.DS_Store
.idea
.editorconfig
.npmrc
package-lock.json# Ignored suffix*.log*.md
*.svg
*.png
*ignore## Built-files.cache在.vscode/settings.json中新增一个属性，保存自动格式化
"editor.formatOnSave": true在package.json中新增命令
"prettier": "prettier --config .prettierrc.js --write './**/*.{js,ts,scss,css,json}'",测试
执行命令npm run prettier，他会把你配置的所以需要格式化的文件全部过一遍，并且给你格式化，其实如果配置了formatOnSave是不会再有可格式化的文件的，但是保险起见，在配置git hook的时候，还是跑一下比较好。
成功
husky
概念
husky是一个git hook工具，用于你在提交代码的时候进行自定义的操作。
安装
"husky": "^7.0.4",在package.json中新增命令
执行命令创建.husky/pre-commit文件
npx husky add .husky/pre-commit "npm run prettier && npm run lint"
根目录下生成如下文件，表示成功
pre-commit内容如下：
#!/bin/sh. "$(dirname "$0")/_/husky.sh"npm run prettier && npm run linthusky默认会跑全部的文件，但是我们其实只校验我们提交( git add . )的文件代码格式，而不是去校验所有的文件的格式，就需要使用lint-staged了
lint-staged
安装
"lint-staged": "^12.3.7"项目根目录新建.lintstagedrc.js文件
// .lintstagedrc.jsmodule.exports = { '*.js': ['prettier --config .prettierrc.js --write', 'eslint --fix --ext .js'], '*.ts': ['prettier --config .prettierrc.js --write', 'eslint --fix --ext .ts'], '*.json': 'prettier --config .prettierrc.js --write'}全部完成以后，当执行git commit -m "xxx"命令时，会对add的文件进行prettier&eslint