项目初始化：技术选型与工程搭建

说实话，每次开始一个新项目，最让我头疼的反而不是写代码，而是「选什么」。React 还是 Vue？Vite 还是 Webpack？TypeScript 要不要上？ESLint 和 Prettier 怎么配？

这些问题，我在过去几年里反复纠结过。今天我就把沉淀下来的经验，一次性说清楚。

技术选型：React 还是 Vue？

先别急着站队。我个人的建议是：看团队，看生态，看场景。

对于低代码平台组件库这个场景，我倾向于 React。为什么？

• 组件化思维更纯粹：React 本身就是「一切皆组件」，和组件库的理念天然契合
• Hooks 生态成熟：自定义 Hooks 可以很好地封装组件逻辑，复用性极强
• 社区资源丰富：像 Ant Design、Material-UI 这些标杆组件库都是 React 的，参考价值大

当然，如果你团队 Vue 更熟，用 Vue 3 + Composition API 也完全没问题。我在上一个项目里就用了 Vue 3，说实话体验也不错。但这次课程，我选 React。

使用 Vite 搭建项目

好，技术选型定了。接下来就是搭项目。

以前我用 Create React App，后来换成了 Vite。为什么？因为 Vite 真的快。启动快、热更新快、打包也快。我第一次用 Vite 的时候，差点以为项目没启动成功——因为太快了。

执行以下命令：

npm create vite@latest lowcode-components -- --template react-ts

这条命令会创建一个基于 React + TypeScript 模板的项目。Vite 会自动帮你配好开发服务器、HMR、构建脚本等。

项目结构大概长这样：

lowcode-components/
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
├── src/
│   ├── main.tsx
│   ├── App.tsx
│   └── ...
└── public/
    └── ...

嗯，这里要注意：Vite 默认的入口是 index.html，而不是 src/index.tsx。这和 CRA 不太一样，别搞混了。

配置 TypeScript

TypeScript 配置其实不复杂，但有几个坑我得提醒你。

Vite 生成的 tsconfig.json 已经包含了基础配置，但我们需要做一些调整：

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

这里我重点说几个配置：

• strict: true：一定要开。不开 strict 的 TypeScript，说白了就是带类型注释的 JavaScript，失去了意义
• paths：配置路径别名。这样你可以用 @/components/Button 代替 ../../components/Button，清爽很多
• noUnusedLocals / noUnusedParameters：建议开启。我见过太多项目里躺着几十个没用的变量，看着就难受

ESLint 与 Prettier 规范

代码规范这件事，我个人的态度是：能自动化的，绝不手动。ESLint 管逻辑，Prettier 管格式，各司其职。

安装 ESLint

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

然后创建 .eslintrc.cjs：

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    ecmaFeatures: { jsx: true },
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {
    'react/react-in-jsx-scope': 'off',
    'react/prop-types': 'off',
    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
  },
  settings: {
    react: { version: 'detect' },
  },
};

这里有个关键点：react/react-in-jsx-scope 要关掉。因为 React 17+ 的 JSX 转换不需要显式 import React 了。这个坑我见过好几个人问过。

安装 Prettier

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

创建 .prettierrc：

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "always"
}

然后在 ESLint 配置里加上 prettier：

extends: [
  // ... 其他配置
  'plugin:prettier/recommended', // 放最后
],

为什么要放最后？因为 eslint-config-prettier 会关闭所有和 Prettier 冲突的规则。放最后才能生效。

整合到 Vite

最后一步，把 ESLint 和 Prettier 集成到 Vite 的开发流程里。

安装 vite-plugin-eslint：

npm install -D vite-plugin-eslint

然后在 vite.config.ts 里配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import eslint from 'vite-plugin-eslint';
import path from 'path';

export default defineConfig({
  plugins: [
    react(),
    eslint({ lintOnStart: true, cache: false }),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

这样配置之后，每次启动开发服务器，ESLint 会自动检查代码。有错误会在终端和浏览器里同时提示，非常直观。

小结

好了，项目初始化这块就讲完了。我们来回顾一下：

步骤	做了什么	关键点
技术选型	选择 React + TypeScript	看团队、看生态、看场景
Vite 搭建	使用 react-ts 模板创建项目	入口是 index.html，不是 src
TypeScript 配置	开启 strict，配置 paths 别名	记得同步 vite.config.ts
ESLint + Prettier	安装配置，集成到 Vite	关掉 react-in-jsx-scope

说实话，这些配置看起来琐碎，但一次配好，后面能省下大量时间。我见过太多项目因为一开始没配好规范，后期代码风格五花八门，改起来想死的心都有。

下一章，我们会正式开始组件开发。到时候这些配置就派上用场了。