VSCode的TypeScriptReact代码格式化失败怎么办？教你配置TSX的实用方法-VSCode-PHP中文网

答案：VSCode中TSX格式化失败通常因格式化工具冲突或配置不一致所致。解决方法包括：设置Prettier为默认格式化器，检查并创建.prettierrc文件以明确格式规则，通过eslint-config-prettier和eslint-plugin-prettier解决ESLint与Prettier冲突，并在.eslintrc.js中正确配置extends顺序。同时，检查项目级.vscode/settings.json是否覆盖了全局设置，确保各配置文件协调一致，最后重启VSCode使设置生效。

vscode的typescriptreact代码格式化失败怎么办？教你配置tsx的实用方法

VSCode的TypeScript React（TSX）代码格式化失败，通常是由于多个格式化工具（如Prettier、ESLint）之间的冲突，或者VSCode自身没有正确识别或应用默认的格式化器所致。解决这个问题，关键在于明确指定VSCode的默认格式化器，并确保你的项目配置（如

.prettierrc

登录后复制

、

.eslintrc.js

登录后复制

）与VSCode的设置协调一致。很多时候，我们只是需要一点点配置上的“推手”，让这些工具各司其职，又相互配合。

解决方案

当你的TSX代码在VSCode里拒绝“变整齐”时，别急着抓狂，我们一步步来。首先，最直接的办法是确保VSCode知道它应该用哪个格式化器来处理TSX文件。

全局设置默认格式化器： 打开VSCode设置（
```
Ctrl + ,
```
登录后复制
），搜索
```
editor.defaultFormatter
```
登录后复制
。如果你安装了Prettier扩展，我强烈建议你把它设置为默认。选择
```
esbenp.prettier-vscode
```
登录后复制
。这样，当你执行“格式化文档”时，VSCode就会优先调用Prettier。
文件类型特定设置： 有时候，你可能希望对特定文件类型有不同的格式化器。搜索
```
[typescriptreact]
```
登录后复制
，然后在该配置项下添加
```
"editor.defaultFormatter": "esbenp.prettier-vscode"
```
登录后复制
。这能确保TSX文件明确使用Prettier。
Prettier配置文件的检查与创建： 在你的项目根目录，确保有一个
```
.prettierrc
```
登录后复制
（或
```
.prettierrc.js
```
登录后复制
,
```
.prettierrc.json
```
登录后复制
等）文件。这个文件告诉Prettier如何格式化你的代码。一个简单的例子：
```
{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "jsxSingleQuote": true
}
```
登录后复制
特别是
```
jsxSingleQuote
```
登录后复制
，它能确保JSX属性值使用单引号，这对于React项目来说很常见。没有这个文件，Prettier可能就不知道该怎么“规矩”你的代码。

ESLint的集成与冲突解决： 如果你同时使用了ESLint（大多数React项目都会），它也可能有自己的格式化规则，这很容易和Prettier“打架”。

安装
eslint-config-prettier
登录后复制
和
eslint-plugin-prettier
登录后复制
：这两个包是用来让ESLint“听从”Prettier的格式化规则，并禁用ESLint中与Prettier冲突的格式化规则的。
```
npm install --save-dev eslint-config-prettier eslint-plugin-prettier
# 或者 yarn add --dev eslint-config-prettier eslint-plugin-prettier
```
登录后复制

修改
.eslintrc.js
登录后复制
：在

extends

登录后复制

数组中，确保

prettier

登录后复制

是最后一个，这样它才能覆盖之前可能存在的格式化规则。

module.exports = {
  // ...其他配置
  extends: [
    // ...其他规则集
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier', // 确保在最后，禁用与Prettier冲突的ESLint规则
    'plugin:prettier/recommended' // 启用eslint-plugin-prettier，将Prettier规则作为ESLint规则运行
  ],
  plugins: [
    'react',
    '@typescript-eslint',
    'prettier'
  ],
  rules: {
    'prettier/prettier': ['error', {
      // 可以在这里覆盖.prettierrc中的部分规则，但不推荐
      // 'endOfLine': 'auto' // 示例
    }],
    // ...其他规则
  },
  // ...其他配置
};

登录后复制

VSCode ESLint扩展设置： 确保VSCode的ESLint扩展配置了
```
eslint.format.enable: true
```
登录后复制
。这样，当你保存文件时，ESLint也能参与到格式化中，并应用Prettier的规则。

重启VSCode： 有时候，简单的重启就能解决很多插件或设置未生效的问题。

为什么我的VSCode突然无法格式化TSX代码？

你有没有遇到过，明明前一天还好好的，第二天一早打开项目，VSCode的TSX格式化就突然失灵了？这种“突然”通常不是真的突然，而是背后有那么一两个小变化你没注意到。我个人经验里，最常见的原因有这么几个：

首先，新的扩展安装。你可能为了某个功能装了一个新的VSCode扩展，而这个扩展恰好也带有自己的格式化能力，并且它比你之前用的Prettier优先级更高，或者直接产生了冲突。VSCode在处理多个格式化器时，有时会有点“懵圈”，不知道该听谁的。

其次，项目依赖更新。你或者你的团队成员可能更新了

package.json

登录后复制

里的某个依赖，比如Prettier、ESLint或者它们相关的插件。这些更新可能引入了新的默认配置，或者改变了它们的行为方式，导致与你VSCode的旧设置不再兼容。特别是当Prettier版本更新后，它的一些默认规则可能会调整，如果你的

.prettierrc

登录后复制

没有同步更新，就可能出现格式化效果不如预期的情况。

再来，VSCode自身更新。VSCode本身也在不断迭代，每次更新都可能对API或内置功能进行调整。虽然这种情况不常见，但偶尔也会出现VSCode更新后，某个格式化扩展需要同步更新才能正常工作。

最后，也是最容易被忽视的，工作区设置覆盖全局设置。你可能在某个项目里创建了

.vscode/settings.json

登录后复制

文件，并在这里面配置了特定的格式化器或规则。如果这个文件里的设置与你的全局设置不一致，或者有错误，它就会覆盖全局设置，导致该项目下的格式化行为异常。检查一下项目根目录下的

.vscode

登录后复制

文件夹，看看有没有什么“捣乱”的配置。

解决这类“突然失灵”的问题，最好的办法就是回溯最近的操作，从VSCode扩展、项目依赖到VSCode设置，逐一排查。通常，重新明确指定

editor.defaultFormatter

登录后复制

，并检查项目级的Prettier和ESLint配置，就能解决大部分问题。

Prettier和ESLint在TSX格式化中应该如何配置才不会打架？

让Prettier和ESLint在TSX项目中和平共处，甚至协同工作，而不是互相“打架”，是前端开发中的一个经典命题。它们各自的职责不同：Prettier侧重于代码风格的统一（如缩进、引号、换行），而ESLint则专注于代码质量和潜在错误的检查。要让它们不打架，核心思路是：让Prettier负责格式化，让ESLint负责代码质量，并告诉ESLint不要管那些Prettier已经处理过的格式问题。

这主要通过两个关键的npm包来实现：

```
eslint-config-prettier
```
登录后复制
：这个包的作用是禁用所有与Prettier冲突的ESLint规则。比如，如果Prettier规定JSX属性使用单引号，而ESLint的某个规则要求双引号，那么
```
eslint-config-prettier
```
登录后复制
就会禁用ESLint的这个规则。你需要在
```
.eslintrc.js
```
登录后复制
的
```
extends
```
登录后复制
数组中引入它，并且务必放在最后，确保它能覆盖之前引入的所有规则。
```
// .eslintrc.js
module.exports = {
  // ...
  extends: [
    // ...你的其他规则集，例如：
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    // 确保 'prettier' 在最后，这样它才能禁用冲突的ESLint规则
    'prettier'
  ],
  // ...
};
```
登录后复制
```
eslint-plugin-prettier
```
登录后复制
：这个包的作用是把Prettier的格式化规则作为ESLint的规则来运行。这意味着，如果你的代码不符合Prettier的格式，ESLint会把它当作一个错误（或警告）报告出来。这样，你就可以利用ESLint的报告机制，在保存时自动修复（通过VSCode的
```
editor.codeActionsOnSave
```
登录后复制
配置）或者在CI/CD流程中检查格式问题。
```
// .eslintrc.js
module.exports = {
  // ...
  plugins: [
    // ...
    'prettier' // 引入prettier插件
  ],
  extends: [
    // ...
    'prettier', // 禁用冲突规则
    'plugin:prettier/recommended' // 启用eslint-plugin-prettier，并应用其推荐配置
  ],
  rules: {
    'prettier/prettier': 'error', // 将Prettier的格式问题视为错误
    // ...你可能需要自定义的其他ESLint规则
  },
  // ...
};
```
登录后复制
这里
```
'plugin:prettier/recommended'
```
登录后复制
是
```
'prettier'
```
登录后复制
和
```
'plugin:prettier'
```
登录后复制
的组合，它会同时禁用冲突规则并启用
```
prettier/prettier
```
登录后复制
规则。

代码小浣熊
代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节

51

查看详情

VSCode设置中的协同：

最后，别忘了VSCode的设置。为了让它们在保存时自动工作：

// .vscode/settings.json 或 用户设置
{
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 明确指定Prettier为默认格式化器
  "editor.formatOnSave": true, // 保存时自动格式化
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // 保存时通过ESLint自动修复问题，包括Prettier发现的格式问题
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

登录后复制

通过这些配置，当你保存TSX文件时，VSCode会先调用Prettier进行格式化，然后ESLint会运行，如果还有不符合Prettier规则的地方（理论上很少，除非Prettier没跑起来），或者有其他ESLint规则的问题，它会尝试修复。这样，你的代码就能保持一致的格式和高质量。

如何为不同的TSX项目设置个性化的格式化规则？

在实际开发中，我们经常会面对各种各样的项目，有些可能是你从零开始的新项目，有些则是历史遗留的旧项目，甚至是从外部团队接手的。这些项目可能有着各自独特的代码风格偏好，或者受限于特定的技术栈和团队规范。在这种情况下，为每个TSX项目设置个性化的格式化规则就显得尤为重要，这能避免因为强制统一而带来的不必要的冲突和工作量。

核心思路是利用项目级的配置文件来覆盖或补充全局设置。VSCode、Prettier和ESLint都支持这种层级配置。

项目级Prettier配置：
```
.prettierrc
```
登录后复制
文件这是最直接的方式。在你的项目根目录下创建一个
```
.prettierrc
```
登录后复制
（或
```
.prettierrc.js
```
登录后复制
,
```
.prettierrc.json
```
登录后复制
等）文件。VSCode的Prettier扩展会优先读取这个文件。这意味着，即使你的VSCode全局设置里有Prettier的默认规则，只要项目里有
```
.prettierrc
```
登录后复制
，它就会按照项目级的规则来格式化。

例如，一个老项目可能习惯了4个空格的缩进，而你的新项目偏爱2个空格。你可以在老项目的
```
.prettierrc
```
登录后复制
中这样配置：
```
// 老项目/.prettierrc
{
  "tabWidth": 4,
  "useTabs": false,
  "semi": true,
  "singleQuote": false
}
```
登录后复制
而在新项目里，你可以设置：
```
// 新项目/.prettierrc
{
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": true
}
```
登录后复制
这样，你切换项目时，格式化器会自动适应当前项目的规则，无需手动更改VSCode设置。
项目级ESLint配置：
```
.eslintrc.js
```
登录后复制
文件类似地，ESLint也会优先读取项目根目录下的
```
.eslintrc.js
```
登录后复制
（或其他支持的格式）文件。你可以在这里定义项目特有的ESLint规则，包括那些与Prettier协同的规则。

比如，某个项目可能对某些TSX组件的命名有更严格的要求，或者禁用了某些特定的React Hook规则。你可以在该项目的
```
.eslintrc.js
```
登录后复制
中添加这些规则：
```
// 项目/.eslintrc.js
module.exports = {
  // ...其他通用配置
  rules: {
    'react/jsx-filename-extension': [1, { 'extensions': ['.tsx'] }], // 确保JSX文件扩展名是.tsx
    'react/function-component-definition': [
      2,
      {
        'namedComponents': 'arrow-function', // 强制具名组件使用箭头函数
        'unnamedComponents': 'arrow-function'
      }
    ],
    // ...其他项目特定规则
  }
};
```
登录后复制
这允许你在不同项目中对代码质量和风格有不同的“尺度”。
VSCode工作区设置：
```
.vscode/settings.json
```
登录后复制
在某些极端情况下，你可能需要为某个项目专门调整VSCode的行为，而不仅仅是格式化工具的配置。这时，可以在项目根目录下创建
```
.vscode
```
登录后复制
文件夹，并在其中放置
```
settings.json
```
登录后复制
文件。这个文件里的设置只会应用于当前工作区，并会覆盖你的用户（全局）设置。

例如，某个项目可能需要你禁用某个特定的VSCode扩展，或者调整某个语言模式的默认格式化器：
```
// 项目/.vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "eslint.enable": true,
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 仅在此项目禁用某个扩展
  "extensions.ignoreRecommendations": true,
  "editor.tabSize": 4 // 仅在此项目使用4个空格的tabSize
}
```
登录后复制
这种方式虽然强大，但要小心使用，因为过多的工作区设置可能会让项目配置变得复杂，难以维护。