0-1搭建项目基本配置（eslint+prettier）到release-it发布

本文记录react+typescript项目使用配置ESLint和Prettier来检查代码风格和格式化代码，使用husky和Lint-staged来检测提交代码时是否有格式化问题，同时使用commitlint来检测提交信息是否规范，最后使用release-it进行版本发布管理

创建react+typescript项目

npx create-react-app 项目名称 --template typescript

Eslint

eslint、prettier配置安装

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

npm install prettier@latest -D

npm install eslint-plugin-prettier@latest eslint-config-prettier@latest -D 

eslint配置文件（eslint.config.mjs）

import js from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";
import pluginReact from "eslint-plugin-react";
import { defineConfig } from "eslint/config";
import prettierPlugin from "eslint-plugin-prettier";

export default defineConfig([
  {
    files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"], // 文件格式范围
    plugins: { js, prettier: prettierPlugin }, // 插件，将 Prettier 作为 ESLint 规则执行，关闭了与`Prettier`相冲突的`ESLint`的规则
    extends: ["js/recommended"], // js推荐的代码规范
    rules: {
      "prettier/prettier": "error" // 不遵守prettier规范的都会报错
    },
    languageOptions: { globals: { ...globals.browser, ...globals.node } }, // 同时支持浏览器和nodejs全局变量，就是有了这个配置，有些变量没有定义，其实使用的是全局变量，就不会报错了。 
    ignores: ["node_modules/**", 'dist', 'build'] //忽略文件
  },
  tseslint.configs.recommended, // ts推荐的代码规范
  pluginReact.configs.flat.recommended, // react推荐的代码规范
]);

perttier配置文件(.prettierrc.json)

{
  "useTabs": false, // 使用空格而非制表符(Tab)缩进
  "tabWidth": 2, // 每个缩进级别使用2个空格
  "jsxSingleQuote": false, // JSX中使用双引号而非单引号
  "singleQuote": false, // 格式支持双引号
  "endOfLine": "lf", // 使用Unix风格的换行符(LF)，兼容macOS/Linux系统
  "semi": true, // 语句结尾添加分号
  "trailingComma": "es5" // 为ES5语法中的数组/对象添加尾逗号
}

package.json

"format": "prettier --write src/**/*.{js,jsx,ts,tsx}",
"format:eslint": "eslint --config eslint.config.mjs --cache --fix src/**/*.{ts,tsx}", // 当prettier已经和eslint合并以后，则只需执行"format:eslint"即可

安装 husky 和 lint-staged

npx mrm lint-staged  // 安装lint-staged之前，需要先git init，因为是跟git绑定

package.json

"lint-staged": {
    "*.{ts,tsx, js, jsx}": "eslint --cache --fix"
  }

.husky文件（pre-commit）

npx lint-staged

commitlint

npm install @commitlint/cli @commitlint/config-conventional -D

commitlint.config.js

module.exports = { extends: ["@commitlint/config-conventional"], };

git提交代码自动校验

.husky文件（commit-msg）

echo "npx --no -- commitlint --edit \$1" > .husky/commit-msg

测试

git commit -m "fd" // 直接报错
git commit -m "feat(subject): message" // 正确

commitizen工具是用来帮助我们git提交时写出规范的提交message

npm install commitizen -D
npm install cz-conventional-changelog -D

package.json

// package.json
{
  // ...
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  },
  scripts: {
    "commit": "cz"
  }
}

测试

git add .
pnpm commit

release-it自动生成changelog

release-it 是一个命令行工具，用于在发布新版本时自动化处理一系列任务。它可以帮助您自动化执行以下任务：

• 增加版本号并提交 Git
• 生成变更日志（Changelog）并提交到 Git
• 创建 Git 标签并推送到远程仓库
• 发布到 npm 等软件仓库
• 在 GitHub、GitLab 等平台创建发行版

npm install release-it @release-it/conventional-changelog -D

.release-it.json

// .release-it.json
{
  "plugins": {
    "@release-it/conventional-changelog": {
      "preset": "angular",
      "infile": "CHANGELOG.md"
    }
  },
  "git": {
    "commitMessage": "chore: Release v${version}"
  },
  "github": {
    "release": true,
    "draft": false
  },
  "npm": {
    "publish": true
  }
}

package.json

{
  "scripts": {
    "release": "release-it"
  }
}

运行 pnpm release