Can't make prettier work

Glitch Feedback
1

I have a single very simple project, one server.js, one read.me, one package.json and one HTML, all in the same structure. I have added the following lines in the package.json:

“prettier”: {
“trailingComma”: “es5”,
“tabWidth”: 4,
“singleQuote”: true
},

but when I click on “Format this file” (on any of my four files), the indent level is still 2, and quotes are all switched to double quotes. I also tried having the same line in a separate .prettierrc.json file, with the same negative result.

What am I doing wrong? Thanks

2

Correct me if I am wrong, but you might not be able to customize the prettier button.

3

I’ve just tried to use the instructions posted on glitch:
here, [https://glitch.com/help/kb/article/5-will-glitch-clean-up-my-code-formatting/]
and here https://prettier.io/docs/en/configuration.html#basic-configuration

4

Ok then, try removeing this part:

5

Doesn’t make sense. Without that, it is not a properly formatted JSON file any more ( and of course it gives me immediately an error)

6

FYI, this is the entire package.json file

{
“//1”: “describes your app and its dependencies”,
“//2”: “https://docs.npmjs.com/files/package.json”,
“//3”: “updating this file will download and update your packages”,
“name”: “hello-express”,
“version”: “0.0.1”,
“description”: “A simple Node app built on Express, instantly up and running.”,
“main”: “server.js”,
“scripts”: {
“start”: “node server.js”
},
“dependencies”: {
“express”: “^4.17.1”,
“http”: “^0.0.0”,
“url”: “^0.11.0”,
“fetch”: “^1.1.0”,
“body-parser”: “^1.19.0”,
“node-fetch”: “^2.6.0”
},
“engines”: {
“node”: “12.x”
},
“repository”: {
“url”: “Glitch :･ﾟ✧”
},
“prettier”: {
“trailingComma”: “es5”,
“tabWidth”: 4,
“singleQuote”: true
},
“license”: “MIT”,
“keywords”: [
“node”,
“glitch”,
“express”
]
}

7

Hey @BobSpiders,

Welcome to the Glitch Support forum!

You need to add Prettier configuration to a file named .prettierrc in which you can add all the Prettier config as Glitch will look for this file for your Prettier config instead of the package.json. Once you create a .prettierrc file, you can add your config:

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "singleQuote": true
}

Hope this helps!

2 Likes