返回

十分钟构建Vite+React+TS+ESLint+Prettier+Husky+Commitlint前端项目

前端

闲暇之余，打算写一个项目，顺手将搭建前端规范工作流的过程记录下来。不得不说现在这些工具越来越便利了。曾经费尽心思对付各种错误，而现在新项目真能在十分钟内轻松搞定（网速正常的情况下）。

准备工作

首先，确保已安装Node.js和npm。推荐使用Node.js LTS版本。

安装Vite

Vite是一个闪电般快速的开发环境，也是构建工具，可帮助您开发现代Web应用程序。

npm install -g vite

创建React项目

使用Vite CLI创建新的React项目。

vite create my-project --template react-ts

安装必要的依赖

进入项目目录，安装必要的依赖项。

cd my-project
npm install

添加TypeScript

该项目模板默认使用JavaScript，但您可以通过添加TypeScript支持来提升项目开发体验。

npm install -D typescript @vitejs/plugin-typescript

在vite.config.ts中添加TypeScript配置。

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { createHtmlPlugin } from 'vite-plugin-html'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [
    react(),
    createHtmlPlugin(),
    tsconfigPaths(),
  ],
})

添加ESLint

ESLint是一个JavaScript和TypeScript的静态分析工具，可帮助您发现编码错误和改进代码质量。

npm install -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser

在项目根目录下创建.eslintrc.js文件，并添加ESLint配置。

{
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "rules": {
    "@typescript-eslint/no-unused-vars": ["error"],
    "@typescript-eslint/no-explicit-any": ["error"]
  }
}

添加Prettier

Prettier是一个代码格式化工具，可帮助您保持代码风格的一致性。

npm install -D prettier

在项目根目录下创建.prettierrc文件，并添加Prettier配置。

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100
}

添加Husky和Commitlint

Husky是一个Git钩子管理器，可帮助您在提交代码前运行脚本。Commitlint是一个用于验证提交信息的工具。

npm install -D husky commitlint

在项目根目录下创建.husky目录，并在其中创建.git/hooks目录的软链接。

mkdir .husky
ln -s ../../.husky/commit-msg .git/hooks/commit-msg

创建.husky/commit-msg文件，并添加Commitlint配置。

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit "$1"

运行项目

现在，您可以运行项目了。

npm run dev

项目将在http://localhost:3000上启动。

结语

按照本文的步骤，您已成功构建了一个Vite+React+TypeScript+ESLint+Prettier+Husky+Commitlint项目。这个项目结构提供了清晰的代码组织和强大的开发工具，让您可以专注于编写代码，无需担心配置和工具链问题。希望这篇文章对您有所帮助。