我正在参加「掘金·启航计划」

企业级项目骨架搭建

项目配置主要涉及到ESLint、Prettier、cz-customizable、lint-staged、Stylelint

ESLint

ESLint是一个用于识别和报告在ECMAScript/JavaScript代码中发现的模式的工具，其目标是使代码更加一致并避免错误。

先觉条件：

要使用ESLint，必须安装Nodejs(^12.22.0、^14.17.0或>=16.0.0)并构建SSL支持。（如果您使用的是官方 Node.js 发行版，则始终内置 SSL。）

npm init @eslint/config
# or
pnpm create @eslint/config

Kapture 2023-02-26 at 20.46.23.gif

完成此操作后，会在你项目根目录下生成.eslintrc.cjs的一个文件：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'plugin:react/recommended',
    'standard-with-typescript'
  ],
  overrides: [
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: [
    'react'
  ],
  rules: {
  }
}

接下来，我们开启编辑器的ESLint检查：

这时候，我们打开App.tsx文件，就会发现编辑器报出了很多错误。正是因为我们配置了ESLint来检查代码规范，而这些报错的地方是与ESLint的代码风格不匹配的地方。

修改.eslintrc.cjs中如下：

module.exports = {
  /* ...... */
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
+    project: ['tsconfig*.json'],
+    tsconfigRootDir: __dirname
  }
  /* ...... */
}

Prettier

pnpm add -D prettier eslint-config-prettier eslint-plugin-prettier

修改eslint配置文件

module.exports = {
  extends: [
    /* ...... */
+   "plugin:prettier/recommended"
  ],
  /* ...... */
}

更多详细的使用方法可查看官方文档介绍。

Git 提交规范

关于 Git 提交规范的配置，可以根据这篇文章进行定制化配置：juejin.cn/post/720511…

lint-staged

针对暂存区的 Git 文件运行 linters，不要让💩进入你的代码库!

在提交代码之前运行 lint，在这种情况下，你可以确保没有错误的代码进入库存并强制执行代码样式。但是在整个项目上执行 lint 过程很慢，而且 lint 结果可能无关紧要，最终，你只想对将要提交的文件尽心 lint。

安装和配置

pnpm add -D lint-staged

项目根目录下，创建.lintstagedrc.json，添加如下代码：

{
  "*.{js,ts,tsx,jsx}": [
    "pnpm run lint:fix",
    "pnpm run lint"
  ],
  "*.{css,less,scss}": [
    "pnpm run stylelint:fix",
    "pnpm run stylelint"
  ]
}

现在当你进行git提交的时候，就会对你暂存取的文件执行npm脚本，如果有一个失败，就会终止此次提交。

🫠 这次写的比较粗糙，后续有时间再更新吧，并会提供仓库地址

Vite + React + TypeScript 企业级项目骨架搭建