VS Code 格式 - .prettierrc jsx singleQuote 不起作用 - JavaScript

简介

在使用 VS Code 进行开发时，我们经常会使用代码格式化的功能。其中，Prettier 是一款非常受欢迎的代码格式化工具。不过，使用 Prettier 的时候可能出现某些设置不起作用的情况。本文将介绍一种常见的问题：在 .prettierrc 中设置 jsx.singleQuote 为 true，但不起作用的情况。

问题描述

当我们在项目根目录下创建 .prettierrc 文件，并设置 jsx.singleQuote 为 true 时，发现代码中的 JSX 的属性值并没有以单引号包裹，而是双引号包裹的。

// .prettierrc
{
  "jsxSingleQuote": true
}

// 源代码
function Hello() {
  return (
    <div className="hello">
      <span>Hello, World!</span>
    </div>
  );
}

// 格式化后的代码
function Hello() {
  return (
    <div className="hello">
      <span>Hello, World!</span>
    </div>
  );
}

原因分析

这个问题的原因是因为 VS Code 自带了一个代码格式化的功能，也和 Prettier 有冲突。在 VS Code 自带的代码格式化中，使用的是另一个库，即 js-beautify。而这个库中并没有对 JSX 属性值的单引号双引号做出特殊处理，导致 .prettierrc 中的设置不会对 JSX 属性值生效。

解决方案

解决这个问题可以通过设置 VS Code 使用 Prettier 进行格式化。具体操作如下：

1. 安装 Prettier：

npm install prettier -D

2. 安装 Prettier for VS Code 插件。

3. 打开 VS Code 的设置，搜索 "Format On Save"，并勾选这个选项。

4. 在 VS Code 的设置中搜索 "Extensions"，找到 "Edit in settings.json"，并点击"edit settings.json"。

5. 在打开的 "settings.json" 文件中添加以下代码：

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

6. 再次打开源代码，并格式化代码。此时，代码中的 JSX 属性值就会按照 .prettierrc 中的配置来格式化了。

// 格式化后的代码
function Hello() {
  return (
    <div className='hello'>
      <span>Hello, World!</span>
    </div>
  );
}

总结

本文介绍了在 VS Code 中使用 Prettier 时，修改 .prettierrc 中的配置不起作用的问题，并提供了解决方案。如果你在使用 Prettier 时也遇到了一些奇怪的问题，可以尝试通过类似的方式来解决。