javascript - 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

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

---

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

<表类=“s-表”> <标题> 扩展名 扩展 ID <正文> ESLint dbaeumer.vscode-eslint Prettier esbenp.prettier-vscode

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

最快最简单的方法

---

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

• 第 1 步 - 下载 VS Code 的 Prettier 扩展，确保它是下载量最多的扩展。该 ID 应该与我上面发布的 ID 一致。

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

任何 VS 代码 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 的文件。 。这些文件是大多数 linter 和格式化程序的标准文件。

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

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

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

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

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

如果您选择我建议的更漂亮的选项，您将需要查看文档，以便您可以深入了解该工具，特别是如果您经常编写 JavaScript。这是Prettier Documentation & Rules List的链接