开发环境搭建要点

问题

从零搭建前端开发环境需要考虑哪些方面？

解答

1. 代码规范 (ESLint + Prettier)

# 安装依赖
npm install -D eslint prettier eslint-config-prettier eslint-plugin-prettier

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended', // 整合 Prettier
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  rules: {
    'no-console': 'warn',
    'no-unused-vars': 'error',
  },
};

// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80
}

2. 提交规范 (Husky + Commitlint + lint-staged)

# 安装依赖
npm install -D husky lint-staged @commitlint/cli @commitlint/config-conventional

# 初始化 husky
npx husky install
npx husky add .husky/pre-commit "npx lint-staged"
npx husky add .husky/commit-msg "npx --no -- commitlint --edit $1"

// commitlint.config.js
module.exports = {
  extends: ['@commitlint/config-conventional'],
  // 提交格式: type(scope): subject
  // 例如: feat(user): 添加登录功能
};

// package.json
{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
    "*.{css,scss,less}": ["prettier --write"],
    "*.{json,md}": ["prettier --write"]
  }
}

3. 构建配置 (Vite 示例)

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  
  // 路径别名
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@components': path.resolve(__dirname, 'src/components'),
    },
  },
  
  // 开发服务器
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
  
  // 构建配置
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        // 分包策略
        manualChunks: {
          vendor: ['react', 'react-dom'],
        },
      },
    },
  },
});

4. 目录结构

project/
├── src/
│   ├── assets/          # 静态资源
│   ├── components/      # 公共组件
│   │   └── Button/
│   │       ├── index.tsx
│   │       ├── style.module.css
│   │       └── Button.test.tsx
│   ├── hooks/           # 自定义 hooks
│   ├── pages/           # 页面组件
│   ├── services/        # API 请求
│   ├── store/           # 状态管理
│   ├── utils/           # 工具函数
│   ├── types/           # TypeScript 类型
│   ├── App.tsx
│   └── main.tsx
├── public/              # 公共静态文件
├── tests/               # 测试文件
├── .husky/              # Git hooks
├── .eslintrc.js
├── .prettierrc
├── .gitignore
├── tsconfig.json
├── vite.config.js
└── package.json

5. 其他配置文件

// .editorconfig - 编辑器统一配置
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

关键点

• ESLint + Prettier：ESLint 负责代码质量，Prettier 负责代码格式，用 eslint-config-prettier 解决冲突
• Git Hooks：Husky 管理 hooks，lint-staged 只检查暂存文件，commitlint 规范提交信息
• 提交格式：遵循 Conventional Commits，如 feat:、fix:、docs: 等前缀
• 路径别名：配置 @ 等别名简化导入路径，需同步配置 vite.config 和 tsconfig
• 目录规范：按功能划分目录，组件采用文件夹形式便于管理样式和测试