携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情
前言
大家好，我是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，忽略不需要被校验的文件
# .eslintignore
typings
node_modules
vscode安装扩展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.js
module.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 lint
husky默认会跑全部的文件，但是我们其实只校验我们提交( git add . )的文件代码格式，而不是去校验所有的文件的格式，就需要使用lint-staged了
lint-staged
安装
"lint-staged": "^12.3.7"
项目根目录新建.lintstagedrc.js文件
// .lintstagedrc.js
module.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
完结
