Next.js 教程系列（二）：开发环境深度配置与工具链

鲫小鱼
484 阅读7分钟

前言

大家好，我是鲫小鱼。是一名不写前端代码的前端工程师，热衷于分享非前端的知识，带领切图仔逃离切图圈子，欢迎关注我，微信公众号：《鲫小鱼不正经》。欢迎点赞、收藏、关注，一键三连！！

第二章：开发环境深度配置与工具链

教程简介

在本章中，我们将深入探讨 Next.js 项目的开发环境配置。一个规范且高效的开发环境是保证团队协作顺畅、代码质量高、开发效率的关键。我们将从 Visual Studio Code (VSCode) 的推荐插件入手，逐步配置 ESLint 和 Prettier 实现代码规范的自动化，并探讨 TypeScript 在 Next.js 项目中的高级应用。此外，我们还将介绍如何利用 Git Hooks 和 Monorepo 工具来优化项目依赖管理和代码提交流程，确保您的项目从一开始就具备专业性和可维护性。

理论讲解

1.1 VSCode 插件推荐与基本配置

VSCode 作为前端开发中最受欢迎的编辑器之一，拥有丰富的插件生态系统。以下是一些推荐的插件，它们将极大地提升您在 Next.js 项目中的开发效率和体验：

  • ESLint: 用于实时检查代码中的潜在错误和不符合规范的写法。它能帮助您遵循统一的代码风格，减少 Bug。
  • Prettier - Code formatter: 一个"有主见"的代码格式化工具，它能自动根据预设规则格式化您的代码，消除代码风格上的争议，确保团队代码风格的一致性。
  • TypeScript Vue Plugin (Volar)  / TypeScript Next.js Plugin (Volar) ：如果您在 Next.js 中使用 TypeScript，这些插件能够提供更准确的类型提示、代码补全和错误检查，提升开发体验。
  • Tailwind CSS IntelliSense: 如果您使用 Tailwind CSS，此插件能提供自动补全、语法高亮和悬停提示，极大地提高 Tailwind CSS 的开发效率。
  • Path Intellisense: 自动补全文件路径，避免手动输入路径的错误。
  • GitLens — Git supercharged: 增强 Git 功能，例如在代码行旁显示最后一次提交信息，查看文件历史等。

在 VSCode 中，您可以通过 settings.json 文件进行一些基本配置，例如设置保存时自动格式化：

// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.alwaysShowStatus": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

1.2 ESLint 和 Prettier 配置与规范化

ESLint 负责代码质量和规范，Prettier 负责代码格式化。它们通常协同工作，ESLint 负责检查代码逻辑和潜在问题，Prettier 负责统一代码风格，避免风格冲突。

1.2.1 ESLint 配置

Next.js 内置了 ESLint 支持，您可以通过 next lint 命令运行。

在项目根目录下的 .eslintrc.json 文件中，您可以扩展 Next.js 的 ESLint 配置，并添加自己的规则：

// .eslintrc.json
{
  "extends": ["next/core-web-vitals", "prettier"],
  "rules": {
    // 自定义 ESLint 规则，例如禁止使用 console.log
    "no-console": "warn",
    // 更多规则...
  }
}
  • next/core-web-vitals: 包含了 Next.js 推荐的用于优化 Core Web Vitals 的规则。
  • prettier: 集成 Prettier，禁用与 Prettier 冲突的 ESLint 规则。
1.2.2 Prettier 配置

在项目根目录创建 .prettierrc 文件来配置 Prettier 的格式化规则：

// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "trailingComma": "all"
}

1.3 TypeScript 在 Next.js 中的高级应用

Next.js 对 TypeScript 有着一流的支持。除了基本类型声明外，TypeScript 还能在 Next.js 项目中发挥更大的作用：

  • 类型安全的数据获取：结合 getServerSideProps, getStaticProps, getStaticPaths等函数，利用 TypeScript 定义返回数据的类型，确保数据的一致性和可靠性。
  • 组件 Props 类型定义：明确组件接收的 props 类型，提高组件的可维护性和可复用性。
  • API Routes 类型定义：为 API Routes 的请求体和响应体定义类型，确保前后端数据传输的类型安全。
  • 路径别名 (Path Aliases) ：在 tsconfig.json 中配置路径别名，简化模块导入路径，提高代码可读性。
// tsconfig.json 示例
{
  "compilerOptions": {
    "paths": {
      "@/components/*": ["./components/*"],
      "@/lib/*": ["./lib/*"]
    }
  }
}

1.4 项目依赖管理与 Git Hooks

随着项目规模的增长，依赖管理和代码提交规范变得尤为重要。

1.4.1 PNPM 或 Yarn Workspace (Monorepo)

对于大型项目或包含多个子应用的场景，Monorepo 是一种高效的解决方案。PNPM 或 Yarn Workspace 可以帮助您更好地管理 Monorepo 中的共享依赖。

在项目根目录创建 pnpm-workspace.yaml 或 package.json 中的 workspaces 配置：

# pnpm-workspace.yaml
packages:
  - 'apps/*'
  - 'packages/*'
1.4.2 Git Hooks：Husky 和 lint-staged

Git Hooks 允许您在 Git 操作（如 commit, push）前后执行自定义脚本。结合 Husky 和 lint-staged，可以实现在提交前自动检查和格式化代码，确保代码质量。

  1. 安装依赖：

pnpm add -D husky lint-staged # 或者 npm install -D husky lint-staged 2. **配置 Husky**：  bash pnpm husky init # 初始化 husky 这会在 `.husky/` 目录下创建一个 `pre-commit` 文件。 3. **配置 lint-staged**： 在 `package.json` 中添加 `lint-staged` 配置：  json // package.json { // ... "lint-staged": { "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write", "git add"] }, "scripts": { "prepare": "husky install" } } 然后修改 `.husky/pre-commit` 文件，添加 `npx lint-staged`：  bash #!/usr/bin/env sh . "0")/_/husky.sh"

npx lint-staged
```

这样，在每次 git commit 之前，Husky 会触发 lint-staged 检查并格式化您暂存区中的 JavaScript/TypeScript 文件，不符合规范的代码将无法提交，从而保证了代码库的整洁。

代码示例

2.1 配置 tsconfig.json, .eslintrc.json, prettierrc

参照理论讲解中的示例，在您的 Next.js 项目中创建或修改以下文件：

  1. .eslintrc.json (假设您使用了 create-next-app --eslint)

    // .eslintrc.json
{
  "extends": ["next/core-web-vitals", "prettier"],
  "rules": {
    "no-console": "warn", // 示例：将 console.log 视为警告
    "react/react-in-jsx-scope": "off" // Next.js 13+ 不需要导入 React
  }
}

  2. .prettierrc

    // .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "trailingComma": "all",
  "jsxSingleQuote": true
}

  3. tsconfig.json (添加路径别名)

    // tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/lib/*": ["lib/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

2.2 集成 Husky 和 lint-staged 进行 Git Hooks

按照理论讲解中的步骤，在您的项目中安装 Husky 和 lint-staged，并配置 package.json 和 .husky/pre-commit 文件。

完成后，尝试修改一个 TypeScript 文件，然后尝试提交：

# 故意留下一个 console.log，并尝试提交
git add .
git commit -m "Test commit with console.log"

如果配置正确，您会看到 ESLint 的警告或错误，阻止您提交代码。

实战项目

3.1 为项目配置完整的开发规范

目标：确保新创建的 Next.js 项目遵循一致的代码风格和质量标准。

  1. 初始化项目：如果您还没有项目，请使用 npx create-next-app my-nextjs-project --ts --eslint --app 创建一个新项目。

  2. 安装必要的工具：

pnpm add -D prettier husky lint-staged # 或者 npm install -D prettier husky lint-staged 3. **配置 `package.json`**: 添加 `prepare` 脚本和 `lint-staged` 配置。  json // package.json { "name": "my-nextjs-project", "version": "0.1.0", "private": true, "scripts": { // ... "prepare": "husky install" }, "dependencies": { "next": "^14.0.0", "react": "^18", "react-dom": "^18" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", "eslint-config-next": "14.0.0", "typescript": "^5", "prettier": "^3.0.0", "eslint-config-prettier": "^9.0.0", "husky": "^8.0.0", "lint-staged": "^15.0.0" }, "lint-staged": { "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write", "git add"] } } 4. **初始化 Husky**: 运行 `pnpm prepare` 或 `npm run prepare`。 5. **配置 `.husky/pre-commit`**: 确保其内容为：  bash #!/usr/bin/env sh . "0")/_/husky.sh"

npx lint-staged
```
  1. 配置 .prettierrc 和 .eslintrc.json (参照上述代码示例)。

3.2 编写一个简单的 TypeScript 组件，确保类型安全和代码风格统一

我们将创建一个简单的 Greeting 组件，并确保它遵循我们配置的规范。

  1. 创建 components/Greeting.tsx 文件：

    // components/Greeting.tsx
import React from 'react';

interface GreetingProps {
  name: string;
}

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  // 故意留一个 console.log，看是否会被 ESLint 警告
  console.log(`Hello, ${name}!`);
  return (
    <div>
      <p>Hello, {name}!</p>
    </div>
  );
};

export default Greeting;

  2. 在 app/page.tsx (App Router) 或 pages/index.tsx (Pages Router) 中使用组件：

    App Router (app/page.tsx)

    // app/page.tsx
import Greeting from '@/components/Greeting'; // 使用路径别名

export default function Home() {
  return (
    <main>
      <h1>欢迎来到我的 Next.js 教程！</h1>
      <p>这是一个使用 Next.js 构建的简单首页。</p>
      <Greeting name="Next.js 开发者" />
    </main>
  );
}

    Pages Router (pages/index.tsx)

    // pages/index.tsx
import Head from 'next/head';
import Greeting from '@/components/Greeting'; // 使用路径别名

export default function Home() {
  return (
    <>
      <Head>
        <title>我的 Next.js 教程</title>
        <meta name="description" content="Next.js 教程第一章" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <h1>欢迎来到我的 Next.js 教程！</h1>
        <p>这是一个使用 Next.js 构建的简单首页。</p>
        <Greeting name="Next.js 开发者" />
      </main>
    </>
  );
}

现在，尝试修改 Greeting.tsx 文件并提交。您应该会看到 ESLint 和 Prettier 自动修复了格式问题，并提示 no-console 警告。

通过本章的学习，您应该能够搭建一个规范、高效的 Next.js 开发环境，并通过自动化工具提升代码质量和开发效率。下一章我们将深入探讨 Next.js 的 Pages Router 路由机制。

最后感谢阅读！欢迎关注我，微信公众号：《鲫小鱼不正经》。欢迎点赞、收藏、关注，一键三连！！！

avatar
文章
阅读
粉丝