1

After reading and applying the suggestions on

How do you format code in Visual Studio Code (VSCode)

and

Why does Prettier does not format code in VS Code?

I still wasn't able to format the code on VS Code when I press Shift + Alt + F. Here's what I've tried so far:

Screenshot 1

Screenshot 2

What else should I try to make it work as expected?

UPDATE: Here's the screenshot of the HTML code I'm trying to format. I've circled some of the elements that are not being formatted.

Screenshot 3

UPDATE 2: Here's also the output message I get from the (!) Prettier link at the bottom right of the toolbar after pressing Shift + Alt + F:

["INFO" - 21:23:59] Formatting c:\Users\Home\OneDrive\Programming\Colt Udemy Course\chickens.html ["INFO" - 21:23:59] Using ignore file (if present) at c:\Users\Home\OneDrive\Programming\Colt Udemy Course.prettierignore ["INFO" - 21:23:59] File Info: { "ignored": false, "inferredParser": "html" } ["INFO" - 21:23:59] No local configuration (i.e. .prettierrc or .editorconfig) detected, falling back to VS Code configuration ["INFO" - 21:23:59] Prettier Options: { "arrowParens": true, "bracketSpacing": true, "endOfLine": "lf", "htmlWhitespaceSensitivity": "css", "insertPragma": false, "jsxBracketSameLine": false, "jsxSingleQuote": false, "printWidth": 120, "proseWrap": "preserve", "quoteProps": "as-needed", "requirePragma": false, "semi": true, "singleQuote": true, "tabWidth": 4, "trailingComma": "none", "useTabs": true, "vueIndentScriptAndStyle": false, "filepath": "c:\Users\Home\OneDrive\Programming\Colt Udemy Course\chickens.html", "parser": "html" } ["ERROR" - 21:23:59] Error formatting document. ["ERROR" - 21:23:59] Invalid arrowParens value. Expected "always" or "avoid", but received true. Error: Invalid arrowParens value. Expected "always" or "avoid", but received true. at Normalizer._applyNormalization (c:\Users\Home.vscode\extensions\esbenp.prettier-vscode-6.3.1\node_modules\prettier\index.js:8419:59) at applyNormalization (c:\Users\Home.vscode\extensions\esbenp.prettier-vscode-6.3.1\node_modules\prettier\index.js:8368:48) at Normalizer.normalize (c:\Users\Home.vscode\extensions\esbenp.prettier-vscode-6.3.1\node_modules\prettier\index.js:8374:7) at normalizeOptions (c:\Users\Home.vscode\extensions\esbenp.prettier-vscode-6.3.1\node_modules\prettier\index.js:10903:33) at Object.normalizeApiOptions (c:\Users\Home.vscode\extensions\esbenp.prettier-vscode-6.3.1\node_modules\prettier\index.js:11036:10) at normalize$1 (c:\Users\Home.vscode\extensions\esbenp.prettier-vscode-6.3.1\node_modules\prettier\index.js:13718:28) at format (c:\Users\Home.vscode\extensions\esbenp.prettier-vscode-6.3.1\node_modules\prettier\index.js:15111:46) at c:\Users\Home.vscode\extensions\esbenp.prettier-vscode-6.3.1\node_modules\prettier\index.js:57542:12 at Object.format (c:\Users\Home.vscode\extensions\esbenp.prettier-vscode-6.3.1\node_modules\prettier\index.js:57562:12) at t.default. (c:\Users\Home.vscode\extensions\esbenp.prettier-vscode-6.3.1\dist\extension.js:1:16946) at Generator.next () at s (c:\Users\Home.vscode\extensions\esbenp.prettier-vscode-6.3.1\dist\extension.js:1:9119) ["INFO" - 21:23:59] Formatting completed in 38.575899ms.

JCr
  • 11
  • 1
  • 3
  • Can you post the HTML you're trying to format? – superhawk610 Mar 26 '21 at 17:55
  • I've just posted the HTML. – JCr Mar 26 '21 at 19:19
  • You may need to give `prettier` permission to run - try clicking on `(!) Prettier` on the toolbar at the bottom right. – superhawk610 Mar 26 '21 at 20:15
  • I've applied your suggestion but I wasn't successful. I've added above the output message from the VS Code which seems to point out some kind of error that I don't quite understand what it is. – JCr Mar 26 '21 at 21:42
  • It looks like you have `arrowParens: true` in a `.prettierrc` file in a nearby directory. You should change it to `arrowParens: always` or `arrowParens: avoid` instead. – superhawk610 Mar 26 '21 at 21:52
  • I finally found out what the problem was through a comment that I found on GitHub. The problem was that I had two versions of a prettier extension installed: ***Prettier Now*** and ***Prettier - Code formatter***. I've deleted the Prettier Now extension and now it works fine. – JCr Mar 26 '21 at 22:49

0 Answers0