如何配置 VSCode 以完美支持 React 和 TypeScript 开发？

betcha

发布时间：2025-09-21 17:42:01

482人浏览过

来源于php中文网

原创

答案：配置VSCode完美支持React和TypeScript需精选扩展、合理设置编辑器及项目配置。安装ESLint、Prettier、Path Intellisense等扩展，配置settings.json实现保存时自动格式化与修复，确保使用项目本地TypeScript版本；通过tsconfig.json启用严格类型检查并配置路径别名；结合.eslintrc.js和.prettierrc.js统一代码风格，使Prettier与ESLint协同工作；优化性能需排除node_modules等无关文件，合理设置search.exclude和files.exclude，确保大型项目流畅运行。

如何配置 vscode 以完美支持 react 和 typescript 开发？

配置 VSCode 以完美支持 React 和 TypeScript 开发，核心在于一套精选的扩展、恰当的编辑器设置，以及项目层面

tsconfig.json

、ESLint 和 Prettier 的协同工作。这不仅仅是安装几个插件那么简单，它更关乎如何让编辑器真正成为你的开发伙伴，提供智能补全、精确类型检查和一致的代码风格，从而大幅提升开发效率和体验。

解决方案

要打造一个完美的 React 和 TypeScript 开发环境，我的经验是，你需要从几个关键维度入手。这不光是技术配置，更是构建一个高效工作流的思考过程。

首先，扩展是 VSCode 强大的基石。没有它们，VSCode 就像个空壳。对于 React 和 TypeScript，有几个是必装的：

ESLint: 代码规范检查，这太重要了，尤其是在团队协作中。它能帮你发现潜在的错误和风格问题。
Prettier - Code formatter: 自动化代码格式化，解放你的双手，让代码永远保持整洁一致。
TypeScript TSLint Plugin (或内置的 TypeScript 语言服务): 虽然 TSLint 已经不推荐使用，但 VSCode 内置的 TypeScript 语言服务本身就非常强大。确保它能正确解析你的项目。我通常会额外安装一些增强型的插件，比如
```
JavaScript and TypeScript Nightly
```
，来体验最新的语言服务功能。
React Native Tools (即使不开发 RN，它对 React JSX/TSX 也有很好的支持): 提供了 React 组件的智能感知、调试功能等。
Path Intellisense: 路径自动补全，对于模块导入非常方便。
Auto Rename Tag: 自动重命名配对的 HTML/JSX 标签，小细节，大方便。
CSS Peek (或 Tailwind CSS IntelliSense 如果你用 Tailwind): 样式文件跳转和智能提示。

安装完这些扩展，下一步就是调整 VSCode 的用户和工作区设置。我个人倾向于在工作区设置中覆盖用户设置，这样可以确保项目成员有统一的开发环境。

一些关键的

settings.json

配置项：

{
    // 启用文件保存时自动格式化
    "editor.formatOnSave": true,
    // 针对不同的语言设置默认格式化工具
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // 启用 ESLint 的自动修复
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    // 确保 VSCode 使用项目本地安装的 TypeScript 版本，而不是内置的
    "typescript.tsdk": "node_modules/typescript/lib",
    // 启用对 JSX/TSX 文件的 Emmet 支持
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "typescript": "typescriptreact"
    },
    // 禁用一些默认的 JavaScript/TypeScript 验证，交给 ESLint 处理
    "javascript.validate.enable": false,
    "typescript.validate.enable": false,
    // 确保 ESLint 知道如何处理 .ts 和 .tsx 文件
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact"
    ],
    // 字体和大小，纯粹个人喜好，但一个舒适的阅读环境很重要
    "editor.fontFamily": "Fira Code, 'Cascadia Code', Consolas, 'Courier New', monospace",
    "editor.fontLigatures": true,
    "editor.fontSize": 14,
    // 其他一些小优化，比如文件保存后自动删除尾随空格
    "files.trimTrailingWhitespace": true
}

项目级别的配置，主要是

tsconfig.json

、

.eslintrc.js

和

.prettierrc.js

。它们是 VSCode 智能提示和格式化规则的源头。一个好的

tsconfig.json

能让 TypeScript 类型检查如虎添翼，而 ESLint 和 Prettier 的配合则保证了代码风格的统一性。

TypeScript 在 VSCode 里总报错或提示不准？这样调整

tsconfig.json

和 VSCode 设置，让类型检查更智能！

说实话，TypeScript 在 VSCode 里有时候确实会有点“脾气”，莫名其妙的类型错误，或者明明没问题却一直红线。我的经验是，这往往不是 TypeScript 本身的问题，而是

tsconfig.json

配置不够完善，或者 VSCode 没有正确加载项目环境。

首先，

tsconfig.json

是 TypeScript 项目的“大脑”。它告诉编译器如何解析文件、生成代码以及进行类型检查。几个关键配置项，你得好好斟酌：

```
"compilerOptions.strict": true
```
: 这是我个人强烈推荐的设置。它开启了一系列严格的类型检查规则，比如
```
noImplicitAny
```
、
```
strictNullChecks
```
等。虽然初期可能会看到很多报错，但它能极大地提升代码的健壮性，减少运行时错误。适应了之后，你会发现类型系统真的能帮你省去很多调试时间。
```
"compilerOptions.jsx": "react-jsx"
```
(或
"react"
): 如果你在用 React，这个必须配置。它告诉 TypeScript 如何处理 JSX 语法。
```
"react-jsx"
```
是 React 17 引入的新转换方式，不需要在文件顶部
```
import React
```
，更推荐。

"compilerOptions.baseUrl"

和
"paths"
: 当你的项目结构变得复杂，需要进行模块别名（例如

import { Button } from '@components/Button'

）时，这两个配置就显得尤为重要。它们能让 TypeScript 正确解析这些非相对路径的导入，VSCode 的路径补全也会因此受益。

// tsconfig.json 示例
{
  "compilerOptions": {
    "target": "es2018",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true, // 开启严格模式
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx", // 或 "react"
    "baseUrl": "./src", // 根目录
    "paths": {
      "@components/*": ["components/*"], // 模块别名
      "@utils/*": ["utils/*"]
    }
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

其次，VSCode 自身的 TypeScript 语言服务加载也很关键。前面提到的

typescript.tsdk

设置就是为了确保 VSCode 使用你项目

node_modules

里安装的 TypeScript 版本。有时候，如果你全局安装了 TypeScript，或者项目里有多个 TypeScript 版本，VSCode 可能会混淆。明确指定路径能避免很多不必要的麻烦。

如果还是遇到问题，一个屡试不爽的方法是：在 VSCode 命令面板（

Ctrl/Cmd + Shift + P

）中输入

TypeScript: Select TypeScript Version...

，然后选择“使用工作区版本”。再不行，试试

Developer: Reload Window

，让 VSCode 完全重新加载一遍项目环境。很多时候，这些小动作就能解决大问题。

代码格式化与风格检查：如何让 Prettier 和 ESLint 在 VSCode 中无缝协作，告别手动调整？

让 Prettier 和 ESLint 在 VSCode 中“和平共处”并高效工作，这绝对是提升开发体验的关键一环。我见过太多团队因为代码风格不统一而争论不休，或者因为手动格式化浪费大量时间。有了它们，这些烦恼都能迎刃而解。

Prettier 负责格式化，ESLint 负责代码风格和潜在错误。 这是它们最清晰的分工。Prettier 几乎没有配置项，它就是“独裁者”，把代码格式化成一种统一的风格。ESLint 则更灵活，可以根据你的项目规则定义各种 linting 规则，包括一些 Prettier 无法处理的风格问题（比如单引号双引号、末尾逗号等），以及更重要的潜在逻辑错误。

MakeSong

AI音乐生成，生成高质量音乐，仅需30秒的时间

下载

要让它们无缝协作，关键在于以下几步：

安装必要的包：

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

```
eslint-config-prettier
```
: 禁用所有与 Prettier 冲突的 ESLint 规则。
```
eslint-plugin-prettier
```
: 将 Prettier 规则作为 ESLint 规则运行，这样 ESLint 就能报告 Prettier 的格式化问题。

@typescript-eslint/eslint-plugin

和

@typescript-eslint/parser

: 让 ESLint 支持 TypeScript。

```
eslint-plugin-react
```
: 提供 React 相关的 linting 规则。

配置

.eslintrc.js

：这是 ESLint 的核心配置文件。你需要告诉它使用哪些插件和配置。

// .eslintrc.js
module.exports = {
  parser: '@typescript-eslint/parser', // 使用 TS 解析器
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true, // 启用 JSX
    },
  },
  settings: {
    react: {
      version: 'detect', // 自动检测 React 版本
    },
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended', // React 推荐规则
    'plugin:@typescript-eslint/recommended', // TS 推荐规则
    'plugin:prettier/recommended', // Prettier 规则，并禁用冲突
  ],
  plugins: ['react', '@typescript-eslint', 'prettier'],
  rules: {
    // 在这里可以覆盖或添加自定义规则
    'prettier/prettier': ['error', { endOfLine: 'auto' }], // Prettier 规则作为错误报告
    'react/react-in-jsx-scope': 'off', // React 17+ 不需要导入 React
    '@typescript-eslint/explicit-module-boundary-types': 'off', // 视情况关闭，我个人觉得有时候太啰嗦
    // ... 其他你需要的规则
  },
};

注意

extends

数组的顺序，

plugin:prettier/recommended

应该放在最后，以确保它能覆盖其他配置中与 Prettier 冲突的规则。

配置

.prettierrc.js

：这是 Prettier 的配置文件，通常很简单。

// .prettierrc.js
module.exports = {
  semi: true, // 语句末尾是否带分号
  trailingComma: 'all', // 对象或数组的最后一个元素是否带逗号
  singleQuote: true, // 使用单引号
  printWidth: 100, // 每行最大字符数
  tabWidth: 2, // 缩进宽度
  endOfLine: 'lf', // 保持一致的换行符
};

VSCode 设置： 最关键的是让 VSCode 在保存时自动运行格式化和修复。

// .vscode/settings.json (工作区设置)
{
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true // 保存时自动修复所有 ESLint 问题
    },
    // 确保 Prettier 是默认格式化工具
    "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
    "[javascriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
    "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
    "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
}

有了这些配置，当你保存文件时，Prettier 会先进行格式化，然后 ESLint 会运行并修复它能自动修复的问题。整个过程几乎是无感的，你的代码永远保持着统一的风格和高标准。

VSCode 性能优化：React/TS 项目过大导致卡顿？这些设置帮你找回丝滑体验！

面对大型 React/TypeScript 项目，VSCode 有时候会变得有些迟钝，甚至卡顿，特别是当你打开一个庞大的 monorepo 或者包含大量

node_modules

文件的项目时。这种体验真的让人抓狂，效率直线下降。要解决这个问题，我们需要从几个方面入手，告诉 VSCode 哪些文件不需要它“操心”。

排除文件和文件夹： 这是最直接也最有效的方法。

node_modules

文件夹是性能杀手，里面成千上万的文件，VSCode 如果都去索引、分析，那肯定慢。在工作区

settings.json

中配置

files.exclude

和

search.exclude

可以显著提升性能。

// .vscode/settings.json
{
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true,
        "**/node_modules": true, // 隐藏 node_modules
        "**/build": true,        // 隐藏构建输出
        "**/dist": true          // 隐藏分发目录
    },
    "search.exclude": {
        "**/node_modules": true, // 搜索时排除 node_modules
        "**/build": true,
        "**/dist": true,
        "**/coverage": true,     // 排除测试覆盖率报告
        "**/*.log": true         // 排除日志文件
    },
    "typescript.tsc.autoDetect": "off", // 关闭 TypeScript 自动检测，手动配置更稳定
    "javascript.preferences.use
    Project
    Version": true, // 确保使用项目本地的 JS 版本
    "typescript.preferences.useProjectVersion": true // 确保使用项目本地的 TS 版本
}

files.exclude

负责在文件浏览器中隐藏这些文件，

search.exclude

则在全局搜索时忽略它们。这能大大减少 VSCode 需要处理的文件数量。

TypeScript 语言服务优化： TypeScript 语言服务是 VSCode 智能提示、类型检查的核心。如果它卡顿，整个开发体验都会受影响。
- tsconfig.json
  中的
  exclude
  和
  include
  ：确保你的
```
tsconfig.json
```
  只包含需要编译和检查的文件。比如，
```
"exclude": ["node_modules", "build", "dist"]
```
  告诉 TypeScript 编译器不要理会这些文件夹。这也能减轻 VSCode 语言服务的负担。
- 禁用不必要的插件： 有些插件虽然功能强大，但在特定项目或机器上可能会成为性能瓶颈。如果你发现 VSCode 变慢了，可以尝试禁用一些不常用的插件，特别是那些需要大量文件索引或实时分析的插件。VSCode 的扩展管理器里可以按需禁用或启用。
- typescript.disableAutomaticTypeAcquisition
  : true (可选): 如果你发现 VSCode 总是自动下载
```
@types
```
  包导致卡顿，可以尝试禁用这个。然后手动在
```
package.json
```
  中安装需要的
```
@types
```
  。
硬件和系统层面： 这一点虽然不是 VSCode 配置，但不得不提。
- SSD 硬盘： 这是最基本的。机械硬盘在处理大量小文件时，性能表现会非常差。
- 足够的内存： 大型项目，特别是带有 TypeScript 和各种语言服务的，会消耗大量内存。16GB 是起步，32GB 更好。
- CPU 性能： 编译、代码分析都需要 CPU 算力。