For JSX (and other file types, like HTML) this can be done setting “bracketSameLine”: true in your .prettierrc see https://prettier.io/docs/en/options.html#bracket-line (or jsxBracketSameLine for versions < 4.2.0)
Same for me. I managed to solve it as follow: { “editor.formatOnSave”: true, “editor.formatOnPaste”: true, “editor.formatOnType”: true, “editor.defaultFormatter”: “esbenp.prettier-vscode”, “[html]”: { “editor.defaultFormatter”: “vscode.html-language-features” } } This allowed me to use prettier globally and use built in html formatter for html. Also allowed the formatting to happen on save and while typing. The part responsible for … Read more
You can update .prettierrc.json and set option trailingComma to none like: { “trailingComma” : “none”, … }
Edit setting with following in settings.json of VScode “[typescriptreact]”: { “editor.defaultFormatter”: “esbenp.prettier-vscode” },
Follow these steps: CTRL + SHIFT + P Format Document (in pop-up bar) Select Format Document Select Configure Default Formatter… Select Prettier – Code formatter Done!
First, remove any .prettierrc from the working directory. Because it overrides user settings and uses the default values. Second, set Prettier: Tab Width to 4. Third, Unchecked Prettier: Use Tabs And if you have to use .prettierrc file then specify all the options. { “singleQuote”: true, “printWidth”: 80, “editor.formatOnSave”: true, “proseWrap”: “always”, “tabWidth”: 4, “requireConfig”: … Read more
This is a solution that worked for me 1. Install Prettier Globally via npm if you have never installed it globally npm i prettier -g 2. Search & Use the Prettier Path Extension Settings in your VS Code Settings // You can navigate to VS Code Settings > Extensions > Prettier for all Prettier Extension … Read more
You can try the following to change indentation/tab width: 1. At the bottom of your Editor window, check for the ‘Spaces: 2’ (in case your code is getting indented with 2 spaces). Click on that and choose Indent using Tab and choose the value according to your need. 2. Alter Prettier options in Visual Studio … Read more
I think eslint-config-prettier was created just for this purpose: https://prettier.io/docs/en/eslint.html#turn-off-eslint-s-formatting-rules Basically it turns off all rules that have to do with code styling because prettier will take care of it anyway. So you just install this config along with any other desired eslint config (like eslint-config-airbnb) and in your eslint configuration file you just add … Read more
For those trying to quickly change Prettier settings for VS Code. Here are the steps: Go to FILE -> PREFERENCES -> SETTINGS. (VS Code Menus) Settings window should open. Above (Top) there is a search. Type “Prettier” You should see the available Prettier settings. You can modify them 🙂