VS代码 - 如何仅从键中删除报价，但值仍然存在

Question

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

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

注意，并非所有双引号都被

了

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

删除

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

请 右扩展或弄清楚它是什么。 他们没有运行任何代码，这里有什么快捷方式？谢谢你！

Answer 1

2个流行的扩展名，从JS Object Keys

---

Eslint＆amp;正确配置时，Prettier都会从您的属性键中删除引号。以下是两个扩展的链接。下面的链接在左侧是不同的。正确的。左侧是工具主页，右侧是该工具在VS代码市场中的扩展。

扩展名称	扩展ID
eslint eslint	> dbaeumer.vscode-eSlint
a href =“ https://prettier.io/” rel =“ nofollow noreferrer”> Prettier	esbenp.prettier-vscode ，

应注意的是，并非所有格式化者都从属性中删除了引号。另一个半广泛的格式化 - js-beautify - 没有删除引号的规则从对象的键。

最快＆amp;最简单意味着

---

您正在寻找“插头＆amp; play”类型的扩展名。就很少的设置而言，快速开始进行： Prettier 是您最好的选择。 ESLINT需要一定程度的知识，或者需要配置.eslintrc。*文件所花费的时间，以便获得知识。 Prettier将让您格式化代码，并在下载2秒后从属性中删除引号，以及可以很快撰写的配置文件。

• 步骤1- 下载VS代码的漂亮扩展名，请确保它是下载最多的扩展名。 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的文件。这些文件是大多数Linters的标准配置。格式化。

• 步骤4- 将以下配置添加到您的新.prettierrc file。

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

“ quoteprops”：“ as-neded” 规则将配置您的项目以从JavaScript允许这样做的对象中删除所有引号。在几个情况下， ecma-262 标准需要引用密钥，但它们是远的＆amp;介于两者之间。该规则将处理这些案件，因此您不必为此担心。

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

另请注意，如果您的项目不配置为同时使用，则将ESLINT与Prettier一起使用可能会有问题。

如果您选择了我建议的更漂亮的选项，则需要查看文档，因此您可以在内部学习该工具。尤其是如果您经常写JavaScript。这是 Prettier文档＆amp;规则列表

Answer 2

不要重新发明轮子...

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标识符，它将在其中扔引号。.aka，如果它以数字等开头等...

另一件事..另一件事.. 。因此，如果不是完全的字符串 - ＆gt;您可以先将其串起。

JSON.parse(JSON.stringify(obj))

Answer 3

一种选择是使用 eslint 和eslint扩展，启用 quote-props 规则，然后右键单击带有一个带有一个带有的段不必要的报价和自动框架所有问题：

Answer 4

使用Prettier Extension

在安装漂亮的扩展名，打开设置（齿轮图标）左下角，搜索“保存格式”，如下所示，该框应在您保存文件时可以格式化

代码。

​，默认情况下，Prettier删除了JS对象的键上的引号，因此您应该出于

某种原因，您想覆盖此默认行为并选择在键上有报价 ，然后创建一个名为.prettierrc.json的文件，在最大的项目级别（通常将与src文件夹中的级别相同）。 quoteprops的条目，并将其设置为保存

{
  "semi": true,
  "singleQuote": true,
  "endOfLine": "lf",
  "tabWidth": 2,
  "quoteProps": "preserve" // this will add quotes. "as-needed" is the default that will remove the quotes
}