咱们应用热门构建工具vite创立我的项目，并抉择react + ts模板。对于Eslint + Prettier + husky + lint-staged配置同样实用于webpack、Vue创立的我的项目，稍有不同的中央下文会提到，请释怀食用。

1、应用vite创立我的项目

yarn create vite

输出我的项目名并抉择 react + ts

success Installed "create-vite@3.0.0" with binaries:  - create-vite  - cva✔ Project name: … my-app✔ Select a framework: › react✔ Select a variant: › react-tsDone. Now run:  cd my-app  yarn  yarn dev

2、装置Eslint

yarn add -D eslint

3、初始化配置Eslint

npm init @eslint/config

或者

npx exlint --init

3.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 style

3.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 these

3.3、抉择js框架：

选React

? Which framework does your project use? …❯ React  Vue.js  None of these

3.4、是否应用ts

我抉择是

? Does your project use TypeScript? › No / Yes

3.5、抉择代码运行环境

用空格选中browser + node

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)✔ Browser✔ Node

3.6、 抉择配置文件格式

选JavaScript

? What format do you want your config file to be in? …❯ JavaScript  YAML  JSON

3.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 / Yes

3.8、抉择包管理器

抉择yarn

? Which package manager do you want to use? …  npm❯ yarn  pnpm

4、装置实现

在我的项目根目录生成.eslintrc.cjs文件
这里就是下面3步骤初始化的文件,前面的配置都写这里

// .eslintrc.cjsmodule.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-parser

6、配置vite.config.js 或 webpack.config.js

// vite.config.jsimport 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.jsconst 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.cjsmodule.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.cjsmodule.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 huskyyarn add -D lint-staged

husky

一个为 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前端代码工作流就搞定了。