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!

CodePudding user response：

One option is to use

CodePudding user response：

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.

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

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,
    
    // Enable for JavaScript
    "[javascript]": {
      "editor.formatOnSave": true
    }
  }

• 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