前言
大家好，我是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
完结
