What extension or shortcut will format a JavaScript object's keys without using quotation marks?

I saw this in a presentation: They Pasted the example in A) below into VS Code and then it converted into the example in B) in the same file.

Please note not all the double quotations were removed because on the right hand side (value - "all types") remains but only the keys on the left had the "" removed

Example A) Before

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

Example B) After

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

I couldn't find the right extension or figure out what it is. They didn't run any code, what shortcut is done here? Thank you!

What extension or shortcut will format a JavaScript object's keys without using quotation marks?

I saw this in a presentation: They Pasted the example in A) below into VS Code and then it converted into the example in B) in the same file.

Please note not all the double quotations were removed because on the right hand side (value - "all types") remains but only the keys on the left had the "" removed

Example A) Before

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

Example B) After

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

I couldn't find the right extension or figure out what it is. They didn't run any code, what shortcut is done here? Thank you!

• javascript
• visual-studio-code
• formatting
• double-quotes

• I think prettier does that – Bravo Commented Apr 22, 2022 at 3:16
• 1 Failing that just console.log(obj) will provide that format. – Andy Commented Apr 22, 2022 at 3:18
• @Andy - that won't fix code though :p – Bravo Commented Apr 22, 2022 at 3:21
• Just so you know suzy, you don't want to use multiple formatters together. Choose one, unless your going to add plugins, or use special extensions & configurations to harmonize them. Also ESLint will give you the error message, and auto fix your code, but you have to configure it correctly. IMO though, prettier is your best bet. I have included a full answer below. Prettier is easy to install, easy to use, and easy to configure. – AKUMA no ONI Commented Apr 22, 2022 at 6:43

4 Answers 4

2 Popular Extensions that Remove Quote Marks from JS Object Keys

ESLint & prettier will both remove the quotation marks from your properties keys when configured properly. Below are the links for the two extensions. The links below are different on the left & right. The left side is the tools homepage, and the right side is the Tool's extension in the VS Code Marketplace.

It should be noted that not all formatters remove quotation marks from properties. Another semi-popular formatter — JS-Beautify — has NO rule for removing the quotation marks from an object's keys.

The Quickest & Most Simple Means

It sounds like your looking for a "plug & play" type of extension. As far as little setup, and getting go quickly goes: Prettier is your best bet. ESLint requires a certain level of knowledge, or time spent configuring the .eslintrc.* file so that the knowledge is gained. Prettier will have you formatting your code, and removing quotes from properties after a 2 second download, and a configuration file that can be authored rather quickly.

• STEP 1 - Download The Prettier Extension for VS Code, make sure it is the one that has the most downloads. The ID should match the ID I posted above.

• STEP 2 - Add the following settings to your settings.json configuration file.

Any of the VS Code settings.json configuration files will work. You can use the workspace scoped file in your projects .vscode directory, or the user-scoped settings.json file configuration file.

  // @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",
    
  }

• STEP 3 - In the base directory (aka Root-directory) of which ever project you are working on, add a file named .prettierrc. These files are standard for most linters & formatters.

• STEP 4 - Add the following configuration to your new .prettierrc file.

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

The "quoteProps": "as-needed" rule will configure your project to remove all quotation marks from objects where JavaScript permits doing so. There are a couple cases where the ECMA-262 standard requires keys to be quoted, but they are far & few in between. This rule will handle those cases so you don't need to worry about that.

I included the other properties I typically configure into the file so that you are aware that they are there.

Also note that using ESLint with Prettier can be problematic if your project is not configured to use both.

If you opt for the prettier option I suggested, you will want to view the documentation, so you can learn the tool inside & out, especially if you will be writing JavaScript often. Here is the link to the Prettier Documentation & Rules List

Dont reinvent the wheel...

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" }

few things to note... First of all if the key is not a valid javascript identifier it will throw the quotes in there.. aka if it starts with a number etc...

another thing... it should be in JSON string notation if you want it to be parseable. so if it's not fully a string -> you can stringify it first.

JSON.parse(JSON.stringify(obj))

One option is to use ESLint and the ESLint extension, enable the quote-props rule, then right click on one of the segments with unnecessary quotes and auto-fix all problems:

Use prettier extension

In VsCode once you install the prettier extension, Open settings (gear icon on left bottom corner, search for "Format on save", and check the box as shown below. This should enable prettier to format the code whenever you save the file.

And to answer your question, by default the prettier removes the quotes on the keys of JS Objects so you should be good.

For some reason, if you want to override this default behaviour and choose to have quotes on keys, then create a file called .prettierrc.json in outer-most level of project (generally will be at same level as src folder). In this file, you can add an entry for quoteProps and set it to preserve

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