Next.js15 prettier3 eslint9

最爱睡觉睡觉睡觉
1,009 阅读4分钟

前言

最近准备使用Next.js去开启项目，为了方便记录，自行整理了一份使用Next.js、TS、ESLint、Prettier的实践。这里也给大家分享一下！！！

create-next-app

Next-create-next-app（中文文档）

npx create-next-app@latest

下面是我的执行过程

npx create-next-app@latest
Need to install the following packages:
create-next-app@15.1.5
Ok to proceed? (y) y

✔ What is your project named? … next-demo
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
Creating a new Next.js app in /Users/lizhanpeng/Desktop/demo/next-demo.

Using npm.

Initializing project with template: app-tw 


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- postcss
- tailwindcss
- eslint
- eslint-config-next
- @eslint/eslintrc


added 374 packages, and audited 375 packages in 1m

142 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created next-demo at /Users/xxx/Desktop/demo/next-demo

查看package.json知道npm run dev运行项目

ESLint

Next-ESLint（中文文档）

我们创建create-next-app的时候，选择了使用ESLint，所以可以开箱即用地提供了集成的 ESLint 体验

npm run lint

> next-demo@0.1.0 lint
> next lint

✔ No ESLint warnings or errors

Prettier

下面我们通过组合使用 ESLint 和 Prettier，可以实现代码风格的自动化管理，以及发现和修复潜在的代码问题。

1. 在根目录添加.prettierrc

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "endOfLine": "lf"
}

2. 更改eslint.config.mjs

首先安装相关依赖

npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-jsx-a11y prettier eslint-config-prettier

安装后package.json变化

下面是每个依赖的解释：

  1. @typescript-eslint/parser:

    • 这是一个解析器，用于将 TypeScript 代码解析为 ESLint 可以理解的格式，从而让 ESLint 能够检查 TypeScript 文件。
    • 不包含任何规则，只提供语法解析能力。

  2. @typescript-eslint/eslint-plugin:

    • 提供了专门针对 TypeScript 代码的 ESLint 规则。
    • 用于增强 ESLint 的功能，以便更有效地检查和报告 TypeScript 代码中的问题。

  3. eslint-plugin-react:

    • 提供了一组可以帮助对 React 项目进行代码质量检查的 ESLint 规则。
    • 确保 React 组件和代码遵循最佳实践。

  4. eslint-plugin-jsx-a11y:

    • 专注于检查 JSX 中的可访问性（a11y）问题。
    • 帮助开发者创建无障碍的网页应用程序，通过识别不符合可访问性标准的问题。

  5. prettier:

    • 一种流行的代码格式化工具，用于自动格式化代码。
    • 与 ESLint 配合使用，以确保代码不仅质量好，而且风格一致。

  6. eslint-config-prettier:

    • 禁用所有可能与 Prettier 冲突的 ESLint 规则。
    • 确保在使用 Prettier 格式化代码时，不会因为 ESLint 规则而出现冲突。

这些依赖通常作为开发环境的一部分安装（例如 --save-dev），以保持代码质量、可读性以及一致的编码风格。

import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";
// 导入 eslint-config-prettier，关闭与 Prettier 冲突的 ESLint 规则
import eslintConfigPrettier from "eslint-config-prettier";
// 导入 TypeScript 插件和解析器，为 TypeScript 提供 ESLint 支持
import tsPlugin from "@typescript-eslint/eslint-plugin";
import tsParser from "@typescript-eslint/parser"; // 确认导入解析器
// 导入 React 相关插件，为 JSX 和可访问性提供 ESLint 检查
import react from "eslint-plugin-react";
import jsxA11y from "eslint-plugin-jsx-a11y";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
  {
    // 指定在代码检查时要忽略的目录
    ignores: [
      ".next/", // Next.js build output
      "node_modules/", // Node modules
      "public/", // Static files
    ],
  },
  // 将兼容的扩展配置转化为新的配置格式，包括 Next.js 和 TypeScript 的核心规则
  ...compat.extends("next/core-web-vitals", "next/typescript"),
  {
    // 指定要应用这些规则的文件类型
    files: ["*.ts", "*.tsx", "*.js", "*.jsx"],
    languageOptions: {
      parser: tsParser, // 使用 TypeScript 的解析器
      ecmaVersion: 2020, // 支持 ECMAScript 2020 标准
      sourceType: "module", // 使用 ES 模块语法
    },
    plugins: {
      react, // 启用 React 插件以支持 JSX
      jsxA11y, // 启用 JSX 可访问性插件以增强无障碍检查
      "@typescript-eslint": tsPlugin, // 启用 TypeScript 插件以增强 TypeScript 检查
    },
    rules: {
      // 合并 Prettier 的规则以禁用所有与 Prettier 冲突的 ESLint 规则
      ...eslintConfigPrettier.rules,
      "@typescript-eslint/no-unused-vars": "warn", // 对未使用的变量发出警告而不是错误
      "react/react-in-jsx-scope": "off", // 在 React 17+ 中不再需要显式导入 React
    },
  },
];

export default eslintConfig;

更改之后的eslint.config.mjs变化

值得一说：

3. 在根目录添加.vscode/settings.json

下面实现让代码保存时自动格式化

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

有话说

这样，项目就简单实现了，后续如果自己在项目中遇到一下值得分享的，也会给大家分享出来，希望大家喜欢！！！

另外，如果有更好的建议或者其他，也欢迎大家留言。

不要见怪，第一次写文档。不要见怪，第一次写文档。不要见怪，第一次写文档。

avatar
文章
阅读
粉丝