VS代码-如何仅从键中删除引号但保留值

Question

什么扩展或快捷方式可以在不使用引号的情况下格式化 JavaScript 对象的键？

我在演示文稿中看到了这一点：他们将下面 A) 中的示例粘贴到 VS Code 中，然后将其转换为同一文件中 B) 中的示例。

请注意，并非所有双引号都被删除，因为在右侧（值 - “所有类型”）仍然存在，但只有左侧的键删除了“”

示例 A) 之前

"library" : {
  "books": 123,
  "genres": "all types",
  "hoursOpen": 8,
}

示例 B) 之后

library : {
  books: 123,
  genres: "all types",
  hoursOpen: 8,
}

我找不到正确的扩展名或弄清楚它是什么。 他们没有运行任何代码，这里做了什么捷径？谢谢！

Answer 1

一种选择是使用 ESLint 和 ESLint 扩展，启用 quote-props 规则，然后右键单击其中一个包含不必要引号的段并自动修复所有问题：

Answer 2

2 个从 JS 对象键中删除引号的流行扩展

---

正确配置后，ESLint 和 prettier 都会从您的属性键中删除引号。以下是两个扩展的链接。下面的链接在左侧和右侧是不同的。左侧是工具主页，右侧是工具在 VS Code Marketplace 中的扩展。

Extension Name	Extension ID
ESLint	dbaeumer.vscode-eslint
Prettier	esbenp.prettier-vscode

应该注意的是，并非所有格式化程序都会从​​属性中删除引号。另一个半流行的格式化程序——JS-Beautify— 没有从对象键中删除引号的规则。

最快最简单的方法

---

听起来您正在寻找“即插即用”类型的扩展。就很少的设置而言，快速开始：更漂亮是你最好的选择。 ESLint 需要一定程度的知识，或者花时间配置 .eslintrc.* 文件，以便获得知识。 Prettier 会让你格式化你的代码，并在 2 秒下载后从属性中删除引号，以及一个可以相当快速地编写的配置文件。

• 步骤1 -下载 The Prettier Extension for VS Code，确保它是下载次数最多的那个。该 ID 应与我在上面发布的 ID 相匹配。

• 第2步 -将以下设置添加到您的 settings.json 配置文件中。

任何 VS Code settings.json 配置文件都可以使用。您可以使用项目.vscode 目录中的工作区范围文件，或用户范围settings.json 文件配置文件。

  // @file "./.vscode/settings.json"
  {
    // Sets the formatter to format when the file is saved.
    "editor.formatOnSave": false,
    // Sets prettier to format your code
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    
  }

• 第 3 步 -在您正在处理的项目的基目录（又名根目录）中，添加一个名为.prettierrc 的文件。这些文件是大多数 linters 和格式化程序的标准文件。

• 第4步 -将以下配置添加到新的 .prettierrc 文件中。

  // @file "$PROJ_ROOTDIR/.prettierrc"
  
  {
    "quoteProps": "as-needed",
    "singleQuote": false,
    "printWidth": 80,
    "trailingComma": "none",
    "tabWidth": 4,
    "semi": true
  }

这"quoteProps": "as-needed"rule 将配置您的项目以从 JavaScript 允许的对象中删除所有引号。在某些情况下，ECMA-262 标准要求引用键，但两者之间的情况相差甚远。此规则将处理这些情况，因此您无需担心。

我将我通常配置的其他属性包含在文件中，以便您知道它们在那里。

另请注意，如果您的项目未配置为同时使用 ESLint 和 Prettier，则可能会出现问题。

如果您选择我建议的更漂亮的选项，您将需要查看文档，这样您就可以从内到外学习该工具，特别是如果您将经常编写 JavaScript。这是链接到Prettier Documentation & Rules List

Answer 3

不要重新发明轮子...

const jsonObj = {"foo": "bar", "key": "value"}
const javascriptObj = JSON.parse(obj)


console.log(javascriptObj) // { foo: "bar", key: "value" }
console.log(JSON.parse(jsonObj) // { foo: "bar", key: "value" }

需要注意的几件事...首先，如果密钥不是有效的javascript标识符，它将在其中抛出引号..也就是如果它以数字等开头...

另一件事...如果您希望它是可解析的，它应该是 JSON 字符串表示法。所以如果它不完全是一个字符串 - >你可以先将它字符串化。

JSON.parse(JSON.stringify(obj))