使用 ESLint 和 Prettier 为 Visual Studio Code 设置 TypeScript

2025-06-10

使用 ESLint 和 Prettier 为 Visual Studio Code 设置 TypeScript

好吧，如果您偶然发现了这篇文章，您很可能希望尽可能快速、轻松地获取这些信息。

我会尽可能简短地讲解，但我们会逐步讲解所有内容。

以下是我们今天要设置的所有内容的简要介绍：

  • TypeScript 4是 JavaScript 的一次演进，它为 JavaScript 语言带来了严格类型（以及更多！）。如果你有兴趣了解更多，我这里有一篇完整的文章来介绍 TypeScript。
  • ESLint是一种工具，它可以扫描您的代码库中是否存在错误，并在使用过程中提供修复（也称为“linting”）。
  • Prettier是一个代码格式化程序，它可以格式化您的代码，使其看起来更漂亮（因此得名！）

喜欢视频吗？

在我们开始之前 - 我已经录制了一个视频，其中包含以下所有步骤：

该视频是完全免费的16集系列视频的一部分，您可以在我的YouTube频道上免费观看。点击此处获取完整课程！

等等——为什么这个指南这么长？！

还有其他方法可以快速启动和运行这些工具（例如运行npx命令、预先安装所有内容）。

这就是为什么我认为你应该遵循这个（更长的）指南：

  • 完全透明地逐步说明您正在安装的内容（没有不需要的库或膨胀）
  • 逐步安装所有内容（并附有说明）使得在任何工具出现故障时调试特定错误变得更加容易
  • 更好地了解各个工具将使以后扩展或更改任何工具的行为变得更加容易！

只想要代码吗？

综上所述，如果您只想快速上手，我已经写了一个 git repo，里面包含了本指南中描述的所有内容。您可以在这里获取。

如果有用的话，我会很感激一颗星！✨

还在吗？好啦！继续表演！

安装 TypeScript

步骤 1：我们首先创建一个新文件夹作为项目的根目录。在命令行中，输入以下命令（替换my-new-project为项目名称）：

mkdir my-new-project
Enter fullscreen mode Exit fullscreen mode

步骤2：接下来，我们需要使用Yarn设置我们的项目。为此，我们需要进入刚刚创建的文件夹并初始化我们的项目。

cd my-new-project
yarn init
Enter fullscreen mode Exit fullscreen mode

这将为我们提供一系列交互式步骤，我们可以在其中输入与项目相关的所有信息。

如果您有任何特定要求，请输入所有这些值，或者只需按 Enter 即可使用每个问题的默认值（显示在每个问题后的括号中）。

唯一需要注意的是入口点——确保你输入的./build/index.js是 而不是index.js。我将在文章后面重点介绍原因。

Yarn Init 交互步骤

步骤 3：好的，现在我们已经初始化了我们的项目，让我们继续将 TypeScript 安装到我们的项目中。

使用相同的命令行（仍然导航到my-new-project目录），输入以下命令：

yarn add typescript --dev
Enter fullscreen mode Exit fullscreen mode

这会将 TypeScript 添加到我们的。有关和devDependencies之间区别的更多信息，您可以在此处查看一篇文章。dependenciesdevDependencies

步骤 4：安装完成后，我们需要创建一个供 TypeScript 使用的配置文件。

要创建它，请输入以下命令：

touch ./tsconfig.json
Enter fullscreen mode Exit fullscreen mode

步骤 5：接下来，我们将创建一个文件夹来存储 TypeScript 文件，并创建一个index.ts文件来开始操作。返回命令行，输入以下命令：

mkdir ./src
touch ./src/index.ts
Enter fullscreen mode Exit fullscreen mode

太好了 - 现在我们在项目目录中创建了一个名为的文件夹src，并创建了一个名为index.tsinside 的文件。

第 6 步：接下来，您需要使用 VSCode 打开tsconfig.json我们刚刚创建的文件。

我们将使用尽可能简单的设置来设置 TypeScript 的配置，这样您就可以随时添加和扩展它。您可以随意复制并粘贴以下配置（注释并非必需，您可以随意删除，它们只是为了让您了解每一行的作用！）

{
    "compilerOptions": {
        "rootDir": "./src", // The entry point for all of our TypeScript files (make sure all .ts files are stored in a subdirectory of this!)
        "outDir": "./build", // The directory which we'll be exporting our compiled JavaScript files to
        "lib": ["ESNext", "DOM"], // The libraries we wish to use in TS (ESNext being the latest version of JavaScript, and DOM being JavaScript DOM libraries - like console.log)
        "strict": true // Stipulating we want strict mode on. I personally would recommend this to get the most out of TS - another great article on this here: https://dev.to/briwa/how-strict-is-typescript-s-strict-mode-311a
    }
}
Enter fullscreen mode Exit fullscreen mode

注意：如果您计划稍后使用 React 设置此项目，tsconfig.json您可以参考此处的React 特定基础框架

有关设置期间可以使用的所有可能参数的更多信息tsconfig.json，请参阅官方 TypeScript 手册。

步骤 7：最后，在 VSCode 中打开根文件夹（不仅仅是单个文件！）。

现在你应该可以在index.ts文件中编写 TypeScript 了！只需确保所有文件都创建在文件夹（或其中的子目录）.ts内，以确保编译器能够捕获所有内容。srcsrc

要将 TypeScript 构建到 JavaScript 文件中，只需从根目录运行以下命令：

yarn tsc -p ./tsconfig.json
Enter fullscreen mode Exit fullscreen mode

ESLint

好吧，让我们用 ESLint 来检查我们的代码库！

步骤 1：首先，我们需要安装 VSCode 相关的 ESLint 插件。只需在屏幕左侧的扩展栏中搜索ESLint ，然后点击“安装”即可。

在 Visual Studio Code 中安装 ESLint

步骤 2：再次打开命令行，并导航到项目的根目录。从那里，我们需要安装所有必需的库，以使 ESLint 启动并运行。

为此，请输入以下命令：

yarn add eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser --dev
Enter fullscreen mode Exit fullscreen mode

这将安装：

  • eslint ——ESLint 核心包
  • @typescript-eslint/eslint-plugin - 专门支持 TypeScript 的 ESLint 插件
  • @typescript-eslint/parser - 进一步支持 ESLint 来检查 TypeScript 源文件

步骤 3：接下来，当我们仍在命令行中时，我们需要设置 ESLint 的配置文件。

为此，请输入以下命令：

touch .eslintrc
Enter fullscreen mode Exit fullscreen mode

（请注意.开头的eslintrc。这非常重要 - 确保您不会错过它！）

步骤 4：为了完成设置，我们需要对.eslintrc刚刚创建的文件进行一些更改。如果您已经打开了 VSCode，现在应该能够.eslintrc在项目树中导航到该文件。

这是在 Visual Studio Code 上的样子：

在 Visual Studio Code 的项目树中打开 .eslintrc 文件

现在.eslintrc已打开，请更新它，使其看起来如下所示：

{
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 2021
    },
    "extends": [
        "plugin:@typescript-eslint/recommended",
    ]
}
Enter fullscreen mode Exit fullscreen mode

此配置应用了我们刚刚安装的所有库。

第 5 步：重新启动 VSCode！

第 6 步：现在您应该能够ESLint在状态栏（屏幕右下角）中观察到一个标记。

ESLint 的积极状态

如果看起来像上图那样——太棒了！一切就绪！

但是，如果它看起来像这样：

ESLint 的错误状态

...您需要单击它，然后授予工作区使用 ESLint 所需的权限。之后，最后一次重启 IDE 应该就能启动并运行了！

Prettier

快完成了！让我们配置环境以使用 Prettier……

步骤 1：再次打开命令行，并导航到项目的根目录。我们将安装一些新软件包以添加对 Prettier 的支持……

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

既然在这里，我们来创建一个配置文件。无需编辑 - 它只要存在就行。

touch .prettierrc
Enter fullscreen mode Exit fullscreen mode

第 2 步：接下来，让我们打开.eslintrc文件并将这些新库添加到extends我们的配置中的数组中……

{
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 2021
    },
    "extends": [
        "plugin:@typescript-eslint/recommended",
        "prettier/@typescript-eslint",
        "plugin:prettier/recommended"
    ]
}
Enter fullscreen mode Exit fullscreen mode

（注意：数组内容的顺序extends非常重要，以确保您以后不会遇到任何问题！）

步骤 3：最后 - 最后一次重新启动 VSCode。

就这样——松一口气吧。你成功了！你已经用TypeScript、ESLint和Prettier 搭建了一个项目！

概括

光是准备好环境就感觉工作量巨大，但我真心相信，一旦你完成了这个过程，并了解了所有独立组件是如何组合在一起的，万一这些工具出现故障，处理起来就会简单得多。既然你已经克服了困难，那么你也应该能够根据自己的喜好定制 ESLint 和 Prettier 了。

最后一件事...

CodeSnap 宣传图片

我制作了一个16 部分的TypeScript 课程，专门为 JavaScript 开发者编写，而且完全免费。如果您感兴趣，可以访问我的网站（此处）。您也可以通过订阅我或直接关注我来支持此内容，获取更多 TypeScript 内容。

非常感谢您的阅读！

鏂囩珷鏉ユ簮锛�https://dev.to/sam_piggott/setting-up-typescript-with-eslint-prettier-for-visual-studio-code-1e3h
Devto 翻译
PREV
使用 Framer Motion 在 React 中实现页面转换
NEXT
使用策略模式（C# 示例）先决条件示例问题输入策略模式。踩刹车。