Why does Prettier choose to omit trailing commas?

After creating a brand new Angular application using ng new test-app, I added Prettier to the devDependencies and successfully installed it. I made sure to disable all extensions in VSCode except for Prettier.

The issue arises when I configure VSCode to format on save - it consistently removes trailing commas from TypeScript arrays and objects.

To address this problem, I have set 

"trailingComma":"all"
in .prettierrc.json file, as well as including these settings in the settings.json file:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "prettier.trailingComma": "all",
  "prettier.proseWrap": "always",
  "prettier.useEditorConfig": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.updateImportsOnFileMove.enabled": "always"
}

In addition, my User settings for all VSCode projects include the following configurations:

{
  "git.autoStash": true,
  "todo-tree.general.tags": [
    "BUG",
    "HACK",
    "FIXME",
    "TODO",
    "XXX",
    "[ ]",
    "[x]"
  ],
  "todo-tree.regex.regex": "(//|#|<!--|;|/\\*|^|^\\s*(-|\\d+.))\\s*($TAGS)",
  "git.autofetch": true,
  "files.autoSave": "afterDelay",
  "git.enableSmartCommit": true,
  "workbench.startupEditor": "newUntitledFile",
  "cSpell.userWords": [
    "Reorderable",
    "configcat",
    "datatable",
    "devkit",
    "initialise",
    "initialising",
    "primeng"
  ],
  "editor.largeFileOptimizations": false,
  "git.confirmSync": false,
  "diffEditor.wordWrap": "on",
  "explorer.confirmDelete": true,
  "explorer.confirmDragAndDrop": true,
  "workbench.editorAssociations": {
    "*.sqlite": "default"
  },
  "diffEditor.ignoreTrimWhitespace": false
}
javascripttypescriptvisual-studio-codeangular-cliprettier

Answer №1

It has been discovered that Prettier does include trailing commas, but only when the array spans multiple lines.

For example, the following code will receive a trailing comma from prettier

let x = [
  "aaaaaaaaaaaaaaaa",
  "bbbbbbbbbbbbbbbb",
  "cccccccccccccccc",
  "dddddddddddddddd",
  "eeeeeeeeeeeeeeee",
  "ffffffffffffffff"
];

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unidirectional Data Binding in Angular 2 Component Using Plain JavaScript

While working on an Angular2 app using TypeScript, I encountered numerous issues with third-party typings. Frustrated with these problems, I made a bold decision to switch to pure JavaScript. It may sound crazy, especially with the lack of resources availa ...

javascriptdata-bindingangular

Choose only one option from the dropdown menu at a time within the specified div

I attempted to utilize the "setSelected" option on my multiselect feature, but I noticed that it does not function with div elements (at least I could not make it work myself). I am endeavoring to create two synchronized multiselects using this example: b ...

javascriptbootstrap-4bsmultiselect

When creating a new instance of the Date object in Javascript, the constructor will output a date that is

In my project using TypeScript (Angular 5), I encountered the following scenario: let date = new Date(2018, 8, 17, 14, 0); The expected output should be "Fri Aug 17 2018 14:00:00 GMT-0400 (Eastern Daylight Time)", but instead, it is returning: Mon Sep ...

javascriptangulartypescriptdateangular5

The error message "Cannot access 'id' property of undefined" is being displayed

I have a file named auth.js along with a middleware called fetchuser. The code provided below is causing an error that I cannot figure out. The error occurs during the process of sending a token to the user and verifying whether the user is logged in or n ...

javascriptnode.jsexpress

Exporting static files in Next.js

I'm working on a Next.js project and I need to export the static code for publishing. However, when I try to create a build, I keep encountering the error below. I've attempted various solutions such as installing my own SWC, resetting the cache, ...

javascriptreactjsnext.js

Using Typescript: invoking static functions within a constructor

This is an illustration of my class containing the relevant methods. class Example { constructor(info) { // calling validateInfo(info) } static validateInfo(info):void { // validation of info } I aim to invoke validateInfo ...

javascripttypescriptoopstatic-methods

Dynamic Binding of Checkboxes in Vuex

I am encountering a problem with binding checkboxes using Vuex. Even though I am using v-model with a variable that has a getter and setter to set or get the value in the store, I keep getting incorrect data in the store. The issue arises when I click on a ...

javascriptcheckboxvue.jsvuex

Leverage require.js in combination with angular.js

Seeking assistance with require.js integration in Angular.js, encountering an error. Below is the code snippet: Configuration file: require.config({ paths: { angular: 'https://code.angularjs.org/1.5.5/angular.min', angularRo ...

javascriptangularjsrequirejs

correct usage of getServerSideProps with Typescript in a next.js project using i18n

I'm encountering challenges with integrating next-i18next into a Typescript NextJS project. There are very few recent examples available for reference. I have successfully set up internationalized routing, but I am facing difficulties in configuring i ...

typescriptnext.jsi18nextnext-i18next

Utilizing dynamically assigned ng directives in my unique custom directive

I'm in the process of creating a customized table element that looks like this: <datatable items='tableItems' columns='columnsConfig' /> Here, 'tableItems' represents my array of items and 'columnsConfig&apos ...

javascriptangularjsangularjs-directive

Tips for sending an Object within a multipart/form-data request in Angular without the need for converting it to a string

To successfully pass the object in a "multipart/form-data" request for downstream application (Java Spring) to receive it as a List of custom class objects, I am working on handling metadata objects that contain only key and value pairs. Within the Angula ...

javascriptangulartypescriptspring-bootmultipartform-data

Move the items downwards to occupy any empty space vertically

Just a quick overview of the code I'm working with (I am using Material UI in React). This container is meant to hold chat messages exclusively. const ChatContainer = ({ chatMessages }) => { const classes = useStyles(); return ( <Paper ...

javascriptcssreactjsmaterial-ui

Ways to utilize a React custom hook that returns a value within the useEffect hook?

I'm dealing with a custom hook that returns a value based on the parameters it receives. In order to update this value dynamically, I attempted to use useEffect but encountered issues as the hook cannot be called within it. How can I work around this ...

javascriptreactjsreact-hooks

The absence of defined exports in TypeScript has presented a challenge, despite attempting various improvement methods

I've exhausted all available resources on the web regarding the TypeScript export issues, but none seem to resolve the problem. Watching a tutorial on YouTube, the presenter faced no such obstacles as I am encountering now. After updating the tsconf ...

javascriptnode.jstypescript

When using props.onChange(e.target.value) in a textField component in Material UI, it unexpectedly returns an object instead of a value

function FormInput(props) { const classes = formInputStyles(); return ( <div> <TextField onChange={(e) => props.onChange(e.target.value)} InputProps={{ classes, disableUnderline: true }} {...pro ...

javascriptreactjsmaterial-ui

When you use jQuery's serialize() method on a form element, it will only serialize one form element at a time

Consider the form below: <form id="form" name="form"> <input name="name"/> <input name="version"/> <input name="template"/> <textarea name="elements"></textarea> <textarea name="features"></textarea> <tex ...

javascriptjquery

Combining values in an Angular project to create a new object with the same properties using TypeScript

Hey there! I hope your day is going well. I'm currently working on calculating multiple objects to create a new one with average values. Here's the schema: export class stats{ assists:number causedEarlySurrender:boolean champLevel:numb ...

jsonangulartypescriptobjectnested-loops

A spread operator is required to have a tuple type or be assigned to a rest parameter within a React component

I'm currently working with Typescript and have the following code snippet: const [history, setHistory] = useState([Array(9).fill(null)]); const newHistory = history.slice(0, currentStep + 1); When attempting to set a new State using spread operators ...

reactjstypescriptspread-syntax

Check to see if there is a value present in a JavaScript array

I am trying to validate the content of the data array in the code below. My goal is to ensure that when a user enters a packageid (a variable in the code), and if that packageid does not exist, the "else" statement in the conditional should be triggered. ...

javascriptjqueryif-statement

Koa.js route() isn't a defined function

Recently, I created a basic koa app that should return rss xml based on a tag using a parameter. However, for some reason the middleware is unable to read the router from the router file and I cannot figure out why it's not working as expected. The ap ...

javascriptnode.jsbabeljskoa2koa-router