我们使用热门构建工具vite创建项目，并选择react + ts模板。关于Eslint + Prettier + husky + lint-staged配置同样适用于webpack、Vue创建的项目，稍有不同的地方下文会提到，请放心食用。
1、使用vite创建项目
yarn create vite输入项目名并选择 react + ts
success Installed "[email protected]" with binaries:
- create-vite
- cva
✔ Project name: … my-app
✔ Select a framework: › react
✔ Select a variant: › react-ts
Done. Now run:
cd my-app
yarn
yarn dev2、安装Eslint
yarn add -D eslint3、初始化配置Eslint
npm init @eslint/config或者
npx exlint --init3.1、选择模式：
选检查语法并发现问题
? How would you like to use ESLint? …
To check syntax only
❯ To check syntax and find problems
To check syntax, find problems, and enforce code style3.2、选择模块化语法：
选JavaScript modules
✔ How would you like to use ESLint? · problems
? What type of modules does your project use? …
❯ JavaScript modules (import/export)
CommonJS (require/exports)
None of these3.3、选择js框架：
选React
? Which framework does your project use? …
❯ React
Vue.js
None of these3.4、是否使用ts
我选择是
? Does your project use TypeScript? › No / Yes3.5、选择代码运行环境
用空格选中browser + node
? Where does your code run? … (Press to select, to toggle all, to invert selection)
✔ Browser
✔ Node 3.6、 选择配置文件格式
选JavaScript
? What format do you want your config file to be in? …
❯ JavaScript
YAML
JSON3.7、安装三个依赖
选择是 （eslint解析react和ts的依赖）
The config that you've selected requires the following dependencies:
eslint-plugin-react@latest
@typescript-eslint/eslint-plugin@latest
@typescript-eslint/parser@latest
? Would you like to install them now? › No / Yes3.8、选择包管理器
选择yarn
? Which package manager do you want to use? …
npm
❯ yarn
pnpm4、安装完成
在项目根目录生成.eslintrc.cjs文件
这里就是上面3步骤初始化的文件,后面的配置都写这里
// .eslintrc.cjs
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: "eslint:recommended", //eslint推荐的规则（过于严格）
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
rules: {
}
}5、继续安装依赖
使用vite的同学安装 vite-plugin-eslint
yarn add -D vite-plugin-eslint使用webpack的同学安装 eslint-webpack-plugin
yarn add -D eslint-webpack-plugin以上两个依赖的作用都是在yarn dev时自动检查eslint规范
安装eslint解析器 @babel/core @babel/eslint-parser
yarn add -D @babel/core
yarn add -D @babel/eslint-parser6、配置vite.config.js 或 webpack.config.js
// vite.config.js
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import eslintPlugin from 'vite-plugin-eslint';
export default defineConfig({
plugins: [
react(),
eslintPlugin({
include: ['src/**/*.tsx', 'src/**/*.ts', 'src/*.ts', 'src/*.tsx'], // eslint校验的文件类型
}),
],
});// webpack.config.js
const ESLintPlugin = require('eslint-webpack-plugin');
module.exports = {
// ...
plugins: [new ESLintPlugin(options)],
// ...
};7、配置eslintrc.cjs
此处我们使用腾讯的 AlloyTeam Eslint
它会覆盖eslint推荐的规则，并且兼容prettier
yarn add -D eslint-config-alloy
// eslintrc.cjs
module.exports = {
extends: [
'alloy',
'alloy/react',
'alloy/typescript',
],
env: {
// 你的环境变量（包含多个预定义的全局变量）
//
// browser: true,
// node: true,
// mocha: true,
// jest: true,
// jquery: true
},
globals: {
// 你的全局变量（设置为 false 表示它不允许被重新赋值）
//
// myGlobal: false
},
rules: {
// 自定义你的规则
},
};8、安装prettier规范代码格式
yarn add -D prettier安装后在项目根目录创建.prettierrc.cjs文件
AlloyTeam 提供了一套 Prettier 配置，此配置直接继承。
// .prettierrc.cjs
module.exports = {
// 一行最多 120 字符
printWidth: 120,
// 使用 2 个空格缩进
tabWidth: 2,
// 不使用缩进符，而使用空格
useTabs: false,
// 行尾需要有分号
semi: true,
// 使用单引号
singleQuote: true,
// 对象的 key 仅在必要时用引号
quoteProps: 'as-needed',
// jsx 不使用单引号，而使用双引号
jsxSingleQuote: false,
// 末尾需要有逗号
trailingComma: 'all',
// 大括号内的首尾需要空格
bracketSpacing: true,
// jsx 标签的反尖括号需要换行
bracketSameLine: false,
// 箭头函数，只有一个参数的时候，也需要括号
arrowParens: 'always',
// 每个文件格式化的范围是文件的全部内容
rangeStart: 0,
rangeEnd: Infinity,
// 不需要写文件开头的 @prettier
requirePragma: false,
// 不需要自动在文件开头插入 @prettier
insertPragma: false,
// 使用默认的折行标准
proseWrap: 'preserve',
// 根据显示样式决定 html 要不要折行
htmlWhitespaceSensitivity: 'css',
// vue 文件中的 script 和 style 内不用缩进
vueIndentScriptAndStyle: false,
// 换行符使用 lf
endOfLine: 'lf',
// 格式化嵌入的内容
embeddedLanguageFormatting: 'auto',
};9、配置VScode
安装Eslint插件、Prettier插件
// 配置vscode
// 打开：设置 -> 文本编辑器 -> 字体 -> 在 settings.json 中编辑
// settings.json文件
{
"files.eol": "\n",
"editor.tabSize": 2,
// 保存时将代码按照eslint规则修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
// 默认格式化插件
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 添加eslint支持
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
]
}10、安装并配置husky + lint-staged
安装依赖
yarn add -D husky
yarn add -D lint-stagedhusky
一个为 git 客户端增加 hook 的工具。安装后，它会自动在仓库中的 .husky/ 目录下增加相应的钩子；比如 pre-commit 钩子就会在你执行 git commit 的触发。我们可以在 pre-commit 中实现一些比如 lint 检查、单元测试、代码美化等操作。
package.json 需要添加 prepare 脚本
{
"scripts": {
"prepare": "husky install"
}
}做完以上工作，就可以使用 husky 创建一个 hook 了
npx husky add .husky/pre-commit "npx lint-staged"lint-staged
一个仅仅过滤出 Git 代码暂存区文件(被 git add 的文件)的工具；这个很实用，因为我们如果对整个项目的代码做一个检查，可能耗时很长，如果是老项目，要对之前的代码做一个代码规范检查并修改的话，这可能就麻烦了，可能导致项目改动很大。所以这个 lint-staged，对团队项目和开源项目来说，是一个很好的工具，它是对个人要提交的代码的一个规范和约束。
此时我们已经实现了监听 Git hooks，接下来我们需要在 pre-commit 这个 hook 使用 Lint-staged 对代码进行 prettier 的自动化修复和 ESLint 的检查，如果发现不符合代码规范的文件则直接退出 commit。
并且 Lint-staged 只会对 Git 暂存区(git add 的代码)内的代码进行检查而不是全量代码，且会自动将 prettier 格式化后的代码添加到此次 commit 中。
在 package.json 中配置
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{ts,tsx,js}": [
"eslint --fix",
"prettier --write",
"git add"
]
},
}对于commit-msg的约束，因为不同公司有各自的规范，本文暂不配置。
综上，一套完整的Eslint + Prettier + husky + lint-staged前端代码工作流就搞定了。