React + TypeScript + ESLint + Prettier 完整设置 ✈

2025-05-27

React + TypeScript + ESLint + Prettier 完整设置 ✈

目录


📌简介

📌为什么要采用这种配置🤔？

📌配置🛠

👉在项目上配置 ESLint

👉在项目上配置 Prettier

📌启动项目

📌谢谢


介绍

介绍

各位出色的开发者，大家好🧑‍💻，在深入探讨这个话题之前，我想先给大家做个简单的介绍和说明。别担心，我会快速简洁地讲解😉。

我叫苏钦坦·达斯 (Suchintan Das)，是一名全栈开发人员，目前在两家初创公司工作。过去两年我一直从事Web 开发。

在 👉 Linkedin上联系我

注意：我将使用Windows机器💻进行此过程。因此，如果您使用其他机器，某些命令可能会有所不同。在这种情况下，请自行解决，尽管我会尽力涵盖所有此类命令。


为什么要采用这种配置🤔？

在开始本教程之前，了解为什么需要这种配置非常重要。因此，我将分别向您介绍这些堆栈，并帮助您了解它们的优势。


ESLint

您是否曾经遇到过由于某人编写的代码混乱且没有遵循编写代码时应该牢记的规则而出现的问题？

一个小例子-

import axios from 'axios'
const component = () => {
}
Enter fullscreen mode Exit fullscreen mode

就像这里一样，开发人员忘记在导入代码和主要功能组件之间添加一行空白。类似的问题是推送大量控制台日志production。

这些事虽然不大，但当代码库不断发展，代码行数不断增加时，就会让人烦心不已📚。没错，维护代码的整洁其实并不需要费那么多功夫，只要每次都遵循一些规则，就能让代码库变得非常干净🧹。

这就是ESLint的想法，是的，您需要它来使您的代码库对任何新开发人员来说都非常好用👍。


Prettier

与ESLint的理念相同，但它们的组合非常强大。许多开发人员非常喜欢 ESLint + Prettier 的配置，尤其是在希望代码库易于调试和上线的情况下。


TypeScript

我知道，你们大多数人应该都对这个框架很熟悉了。毕竟它很出名🤷。不过，这里还是简单介绍一下这个框架。

想要遵循结构化的代码库格式，预先设置好所有props代码function returns等等，以避免出错吗？是的，我知道在一个一切都以结构化的方式运行的项目中工作非常棒，如果任何代码不符合结构，就会出现错误。这真的能节省很多调试时间❗

TypeScript 有interfaces，function types以及更多。这里有一个小高峰。

apiCall.ts 📝

import axios from "axios";
import { AuthLogin, AuthRegister } from "../models/Auth";
import setAuthToken from "../utils/controllers/setAuthController";

const baseUrl: string = String(process.env.REACT_APP_SERVER_URL);

export const loginauth = async (email: string, password: string) => {
  //   console.log(baseUrl);
  const options: AuthLogin = {
    method: "post",
    url: `${baseUrl}auth/login`,
    data: {
      email,
      password,
    },
  };
  try {
    axios
      .request(options)
      .then((response) => {
        if (response?.status === 200) {
          setAuthToken(response?.data?.token);
        }
        return response?.status as Number;
      })
      .catch();
  } catch (e) {
    // console.log(e);
  }
};
Enter fullscreen mode Exit fullscreen mode

model.ts 📝

export interface AuthLogin {
  method: string;
  url: string;
  data: AuthLoginBody;
}

export interface AuthLoginBody {
  email: string;
  password: string;
}
Enter fullscreen mode Exit fullscreen mode

controller.ts 📝

const setAuthToken = (token: string) => localStorage.setItem("idtoken", token);

export default setAuthToken;
Enter fullscreen mode Exit fullscreen mode


看看模型如何定义API 调用主体的结构，控制器如何定义 token 的流程，以及主函数如何连接流程。在这样一个结构化的代码库中调试起来是多么轻松啊 🙂 。


反应

这个框架在开发者中也很有名。如果有人想用 JavaScript 轻松构建单页应用程序，那就用这个框架吧。它对新用户来说非常实用，你可以将页面拆分成组件，这样就不用再写冗长的代码了。使用 props 并编写 JavaScript 逻辑和 HTML 代码（它遵循 JSX，类似于 HTML，但有一些细微的变化）。

相信我！你一定会爱上它的😍，试试看吧。

React 中的文件结构

文件结构


配置🛠

是的，现在是时候开始整个配置了！

您的机器需要满足一些先决条件-

  1. 系统上安装了 NodeJS。
  2. 已在你的系统上安装 Git。如需帮助，可参考博客👉关于 Git 和 Github 的博客
  3. VSCode 已安装在你的系统上。你也可以自行选择。

太棒了！开始吧……


  • React TypeScript 模板下载

React TypeScript 模板
以下是命令👇

----------------npm users-----------------------
npx create-react-app ./ --template typescript

----------------yarn users----------------------
yarn create react-app ./ --template typescript
Enter fullscreen mode Exit fullscreen mode

下载需要 1-2 分钟。如果您遇到EPERM 错误，这里有一个快速修复方法！

对于 Windows

  1. 打开cmd as administrator。
  2. 如果项目位于不同的驱动器，则使用它来切换驱动器并导航到位置cd /d d:\<project_location>
  3. 使用此处的命令下载模板。


  • 在项目上配置 ESLint

ESLint

打开你的终端并让我们在项目上配置ESLint 。

使用命令👇

---------npm users-------------
npm init @eslint/config

---------yarn users-------------
yarn create @eslint/config
Enter fullscreen mode Exit fullscreen mode

以下是 ESLint CLI的答案。让我们按照相同的流程一起解答。

ESLint 问题 1
ESLint 问题 2
ESLint 问题 3
ESLint 问题 4
ESLint 问题 5


您还可以根据需要在这些问题上选择其他一些选项。

您可以看到在根目录中创建了一个名为 的新文件 📝 eslintrc.json。这表示安装成功！

注意：这里我们使用Airbnb模板，因为它在开发者社区中广为人知。您也可以选择其他模板。访问 https://github.com/airbnb/javascript了解更多信息！


Airbnb

使用Airbnb时，你需要一些模块。使用以下命令安装它们：

npm install eslint-config-airbnb-typescript --save-dev
Enter fullscreen mode Exit fullscreen mode

现在您必须更新一些文件：

使用这些配置更新文件🛠

eslintrc.json 📝

{
    "env": {
        "browser": true,
        "es2021": true,
        "jest": true
    },
    "extends": [
        "react-app",
        "react-app/jest",
        "airbnb",
        "airbnb-typescript",
        "plugin:import/typescript"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module",
        "project": "./tsconfig.json"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {}
}
Enter fullscreen mode Exit fullscreen mode

package.json 📝

用这个更新脚本

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint .",
    "lint:fix": "eslint --fix ."
  },
Enter fullscreen mode Exit fullscreen mode


让我们测试一下🔬 ESLint：

使用npm run lint后它应该会出现在你的终端上。

ESLint 第一个命令

太棒了！现在你可以看到 React 的 TypeScript 模板中已经存在一些 linting 问题。别担心，我们接下来会深入探讨如何修复它们🛠。

但首先让我们使用命令👉来帮助我们，此命令将运行ESLintnpm run lint:fix提供的传统修复程序。例如将单逗号转换为双逗号，但它无法修复主要问题。

ESLint Fix 命令

太棒了！它帮你修复了所有错误。没错，如果你自己无法修复这些错误，ESLint 确实能帮你解决。

你可以通过 来控制 ESLint 的规则eslintrc.json。以下是我最常用的一些规则，你可以用这个来更新文件 -

eslintrc.json 更新规则📝：

    "rules": {
        "react/react-in-jsx-scope": ["off"],
        "react/jsx-uses-react": ["off"],
        "react/jsx-props-no-spreading": ["warn"],
        "react/no-unescaped-entities": ["off"]
    }
Enter fullscreen mode Exit fullscreen mode

现在让我们深入了解Prettier 🌊！


  • 在项目上配置 Prettier

在科技领域，一切始于此，止于彼。所以，让我们回到终端，配置 Prettier！

Prettier

让我们安装相同的所有依赖项👇

---------------------npm users------------------------------------
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

---------------------yarn users-----------------------------------
yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev
Enter fullscreen mode Exit fullscreen mode

我知道这次我们的根目录下没有像eslint这样的文件。所以，让我们创建一个同名的文件.prettierrc。没错，这个文件的用途和之前那个一样。这是一个配置文件，它包含了你项目中想要的所有规则和控件！

让我们用这个代码填充它 -

.prettierrc 📝

{
    "tabWidth": 2,
    "semi": true,
    "singleQuote": false,
    "trailingComma": "all",
    "printWidth": 80,
    "useTabs": false,
    "endOfLine":"auto"
  }
Enter fullscreen mode Exit fullscreen mode

你始终可以拥有自己的配置🛠。在本教程中，我使用的是大多数开发人员广泛使用的配置🧑‍💻。

让我们也更新eslintrc.json一下，让它现在更漂亮 -

eslintrc.json 📝

{
    "env": {
        "browser": true,
        "es2021": true,
        "jest": true
    },
    "extends": [
        "react-app",
        "react-app/jest",
        "airbnb",
        "airbnb-typescript",
        "plugin:import/typescript",
        "plugin:prettier/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module",
        "project": "./tsconfig.json"
    },
    "plugins": [
        "react",
        "@typescript-eslint",
        "prettier"

    ],
    "rules": {
        "react/react-in-jsx-scope": ["off"],
        "react/jsx-uses-react": ["off"],
        "react/jsx-props-no-spreading": ["warn"],
        "react/no-unescaped-entities": ["off"]
    }
}
Enter fullscreen mode Exit fullscreen mode

在编写代码时，你可能会遇到一些问题，比如需要像 Prettier 那样更新文件结构，这可能会很麻烦。这里有一个extension我个人使用的小工具，它能让你的工作更轻松。所以，安装它吧！

Prettier 扩展

格式化文档的快捷键是👇

Windows -
Shift + Alt + F

苹果-
Shift + Options + F

Linux -
Ctrl + Shift + I

手动-
Right Click + "Format document with..." + Prettier


因此，如果您遇到任何Prettier错误，请不要忘记使用此命令正确格式化文档。

是的，您已完成配置。


启动项目

使用命令👉npm start并运行项目。可能会出现一些Prettier错误。要修复这些问题，请在文件上使用 Prettier 扩展程序格式化文档。

您的项目应该像这样启动 -

启动项目

这是GitHub 存储库的链接


谢谢

您已读完本篇博客🤗。更多类似的博客即将上线。

如果博客上能有个小评论就更好了。我每篇博文都会看，所以请留言😉。

如果您想在发布时收到通知🔔，请不要忘记点击关注按钮☝。

最后我想说👇

继续编码#️⃣，继续摇滚🚀

文章来源：https://dev.to/suchintan/reacttypescripteslint-prettier-full-setup-p7j
Devto 翻译
PREV
学习数据结构和算法的完整路线图🐱‍🏍👨‍💻👩‍💻
NEXT
使用 Kafka、SpringBoot、ReactJS 和 WebSockets 的实时聊天应用程序最终结果