📌简介

📌为什么是这个配置🤔?

📌配置🛠

👉在项目上配置ESLint

👉在项目上配置 Prettier

📌启动项目

📌谢谢

[](https://res.cloudinary.com/practicaldev/image/fetch/s--ON6iE1pd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads .s3.amazonaws.com/uploads/articles/mt976ec6wqr61w4dz480.png)

你好,了不起的开发者🧑u200d💻,在深入探讨这个话题之前,让我给你一个小小的介绍和说明。别担心它会又快又脆_😉。

我是Suchintan Das,一位全栈开发人员,目前在两家初创公司工作。在过去的两年里,我一直从事_web 开发_。

联系我👉Linkedin

注意:在进行此过程时,我将使用 Windows 机器💻。因此,在某些情况下,如果使用不同的机器,您的命令可能会有所不同。在这种情况下请帮助自己,尽管我会尽力涵盖所有此类命令。

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

您是否曾经因为某人编写的杂乱代码而遇到问题,并且没有遵循编写代码时应该牢记的规则🥲?

一个小例子——

import axios from 'axios'
const component = () => {
}

进入全屏模式 退出全屏模式

就像这里一样,开发人员忘记在导入和主要功能组件之间添加一条线间隙。一个类似的问题是在production上推送大量控制台日志。

当代码库发展并且许多代码行进入其中时,这些东西很小但非常烦人📚。是的,为了保持干净的代码,他们不需要付出太多的努力,只需每次遵循一些规则就可以使代码库非常干净🧹.

这就是 ESLint 的想法,是的,您需要它来使您的代码库变得非常适合任何新开发人员编写代码👍。

与 ESLint 具有相同的想法,但它们的组合非常强大。许多开发人员非常喜欢 ESLint + Prettier 配置,当您想让您的代码库非常易于调试和板载时。

我知道,你们中的大多数人已经熟悉这个框架。毕竟非常有名🤷。但这里是这个框架的一个小介绍。

想要为您的代码库遵循结构化格式,其中所有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 
        return response?.status as Number;
      })
      .catch();
  } catch (e) {
    // console.log(e);
  }
};

进入全屏模式 退出全屏模式

model.ts 📝

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

export interface AuthLoginBody {
  email: string;
  password: string;
}

进入全屏模式 退出全屏模式

controller.ts 📝

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

export default setAuthToken;

进入全屏模式 退出全屏模式

看看model如何定义api call的body结构,controller定义token的流程和main函数连接流程。在这样一个结构化的代码库中调试有多容易🙂。

该框架也是开发人员中著名的框架之一。如果有人想用 JavaScript 构建一个单页应用程序,那也很容易。只需使用这个框架。这对新用户来说非常好,您将页面划分为组件,因此不再需要还原代码。使用 props 编写 JavaScript 逻辑和 HTML 代码(它遵循 JSX,它类似于 HTML 有一些小的改动)。

相信我 !你会爱上它😍,试试吧。

React 中文件结构的一个小高峰-

[](https://res.cloudinary.com/practicaldev/image/fetch/s--jwhPAi8T--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/tchbd1ud3qnagouprs1c.png)

是的,现在是时候开始整个配置了!

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

1.系统上安装NodeJS。

2. Git 安装在您的系统上。如果需要帮助,请参考博客 👉git 和 github 上的博客

3. VSCode 安装在您的系统上。你也可以有自己的选择。

凉爽的 !开始吧...

• React TypeScript 模板下载

[](https://res.cloudinary.com/practicaldev/image/fetch/s--1NFFXC1W--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/uploads/articles/z5qev7wm9oc0rf5li4j8.png)

这里是命令👇

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

----------------yarn users----------------------
yarn create react-app ./ --template typescript

进入全屏模式 退出全屏模式

下载相同的文件需要 1-2 分钟。如果您面临 EPERM 错误,这里有一个快速解决方案!

适用于 Windows

1.打开cmd as administrator。

2. 如果项目在不同的驱动器中,则使用它来切换驱动器并导航到位置cd /d d:<project_location>

3. 使用此处的命令下载模板。

• 在项目上配置 ESLint

[](https://res.cloudinary.com/practicaldev/image/fetch/s--047CREQ2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads .s3.amazonaws.com/uploads/articles/6rd5uyzsjd90aacjumdq.png)

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

使用命令👇

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

---------yarn users-------------
yarn create @eslint/config

进入全屏模式 退出全屏模式

这是 ESLint 的 CLI 的答案。让我们在同一个流程中一起回答它们。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--Ys54aYkn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/uploads/articles/x9u5evib7dx8t45o0q83.png)

[](https://res.cloudinary.com/practicaldev/image/fetch/s--qU3Gkbt6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/uploads/articles/wrqsg2uvrdhsyigvebpo.png)

[](https://res.cloudinary.com/practicaldev/image/fetch/s--KDBIUsdH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/uploads/articles/j095aw6loa0w50b3mr7e.png)

[](https://res.cloudinary.com/practicaldev/image/fetch/s--htSWlgOm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/uploads/articles/zbptv5gbg9z82tzhrejk.png)

[](https://res.cloudinary.com/practicaldev/image/fetch/s--i4kQPsYA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/uploads/articles/zj9mt6fw3yktq1umxpx7.png)

您也可以根据自己的需要在这些问题上选择其他选项。

你可以看到在你的根目录下创建了一个新文件📝,名为eslintrc.json。这是安装成功的标志!

注意:这里我们使用 Airbnb 模板,因为它在开发者社区中广为人知。你也可以有一些不同的选择。https://github.com/airbnb/javascript了解更多!

[](https://res.cloudinary.com/practicaldev/image/fetch/s--WULOSv8Z--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads .s3.amazonaws.com/uploads/articles/5k9a5c7htoopm2w66llm.png)

在使用 Airbnb 时,您需要一些模块。使用以下命令安装它们:

npm install eslint-config-airbnb-typescript --save-dev

进入全屏模式 退出全屏模式

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

使用这些配置更新文件🛠

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": {}
}

进入全屏模式 退出全屏模式

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 ."
  },

进入全屏模式 退出全屏模式

让我们测试🔬 ESLint:

使用npm run lint,这应该在您的终端上。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--4pU0OWNp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/uploads/articles/57adowcnlxlxqnznd8mr.png)

好的 !所以,现在您可以看到 React for TypeScript 的模板中已经存在一些 linting 问题。别担心,我们会前往并讨论如何解决它们🛠。

但首先让我们使用命令 👉npm run lint:fix帮助我们,该命令将运行 ESLint 提供的传统修复程序。就像单逗号到 double 一样,但它不能修复主要的逗号。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--ybSBqqLo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/uploads/articles/yf93qgdjdlb9i43jgdl9.png)

好的 ! _它为您修复了所有这些错误。是的,如果您无法修复这些错误,ESLint 确实可以帮助您解决这些错误_🤯。

您可以从eslintrc.json控制 ESLint 的规则。这是我最常应用的一些规则,您可以使用此更新文件 -

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"]
    }

进入全屏模式 退出全屏模式

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

• 在项目上配置 Prettier

在事物开始的技术中,它仅在这一点上结束。所以,让我们回到我们的_终端_并配置更漂亮!

[](https://res.cloudinary.com/practicaldev/image/fetch/s--yZYh5fBQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads .s3.amazonaws.com/uploads/articles/mo4j05fvlxst23z028rm.png)

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

---------------------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

进入全屏模式 退出全屏模式

我知道这次我们的根目录上没有任何文件,如 eslint。因此,让我们创建一个名称为.prettierrc的文件。而且,是的,该文件的 用途也与之前的文件相同。这是配置文件,它将包含您希望在项目中拥有的所有规则和控件!

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

.prettierrc 📝

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

进入全屏模式 退出全屏模式

您始终可以拥有自己的配置🛠。对于本教程,我使用大多数开发人员广泛使用的配置🧑u200d💻。

让我们也更新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"]
    }
}

进入全屏模式 退出全屏模式

在编码时,当您需要将文件结构更新为更漂亮的结构时,您可能会遇到一些问题,这可能会很累。这是我个人使用的小型extension,这将使您的生活更轻松。所以,安装它!

[](https://res.cloudinary.com/practicaldev/image/fetch/s--Pd18ZG5d--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/2h4nui5tbasj1wikdph3.png)

格式化文档快捷键是👇

视窗-

Shift + Alt + F

苹果电脑-

Shift + Options + F

Linux-

Ctrl + Shift + I

手动-

Right Click + "Format document with..." + Prettier

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

是的,您已完成配置。

使用命令👉npm start并运行项目。会有几个 prettier 错误。要修复它们,请继续文件并使用 Prettier 扩展名格式化文档。

这应该像这样开始你的项目 -

[](https://res.cloudinary.com/practicaldev/image/fetch/s--85YFYolw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/1ufr5ievy6vtx4k502nc.png)

这是GitHub 存储库的链接

你已经做到了这个博客的结尾🤗。更多这样的博客正在上线。

如果博客上能有一条小评论,那将是令人鼓舞的。我浏览了它们中的每一个,所以请发表评论😉。

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

最后我想说👇

继续编码#️⃣,继续摇摆🚀