1. To access Preferences in the File menu, press Ctrl + comma and search for "formatter"
2. Make sure to set Prettier as the default formatter. https://i.sstatic.net/2jrLr.png

If the above steps do not work:

ctrl+shift+p > Format Document With... > Configure Default Formatter... > Prettier - Code formatter

You can also try using ctrl+shift+I

If you're still having trouble after following @Simin Maleki's advice, it could be because your default formatter is not properly set:

Go to File > Preferences > Settings and search for "default formatter"

Ensure that the Editor: Default Formatter field is not empty but instead set to

Prettier - Code formatter (esbenp.prettier-vscode)

with all relevant languages selected. This should resolve the issue.

FOLLOW THESE STEPS

https://i.sstatic.net/DINkP.png

Additionally, confirm that format on save is turned on:

https://i.sstatic.net/xBmiH.png

Occasionally, Prettier ceases to function properly due to syntax errors in the code. To identify these errors, simply click on the x button located in the bottom right corner next to Prettier.

https://i.sstatic.net/Zd03Y.png

Formatting your files automatically can also be done by Prettier when you save them.

However, simply installing and enabling Prettier may not make it work as expected.

To ensure that formatting occurs on save in VSCode, you need to go to: Setting >> User >> Text Editor >> Formatting

https://i.sstatic.net/unii7.png

To get your formatting right, all you need to do is set up the Default Formatter and enable the Format On Save option in the settings after installing prettier. Keep it simple and avoid tinkering with other configuration files.

Step 1: Choose the Default Formatter

1. Go to

   Files -> Preferences -> Settings

   (or press Ctrl + , on Windows).
2. Look for Editor: Default Formatter
3. Set your default formatter to Prettier - Code Formatter;

Refer to the image below;

https://i.sstatic.net/gsqh8.png

Step 2: Enable Format On Save

1. Go to

   Files -> Preferences -> Settings

   (or press Ctrl + , on Windows).
2. Find Editor: Format on Save
3. Check the box next to Format On Save;

Refer to the image below;

https://i.sstatic.net/7jMCf.png

Disabling and re-enabling the prettier extension fixed the issue for me.

Even though I'm not utilizing Vue, I encountered a similar issue.

I had already configured the following settings:

• Editor: default formatter set to prettier
• Editor: Format on Save set to true
• I also had existing .eslintrc.js and .prettierrc files in place However, none of it seemed to resolve my problem.

The key to solving my dilemma was realizing that everything was properly configured, except for one crucial step:

• Command + Shift + p
• Enter format document with
• Choose Configure Default Formatter...
• Select Prettier as the default option.

It's baffling why setting Editor: Format on Save to true wasn't sufficient on its own. Only by using the steps outlined above to select the default formatter was I able to finally resolve the issue.

https://i.sstatic.net/6uamN.png

Could you please incorporate the following snippet into your settings.json file in VS Code?

"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
},

If you're facing an issue, try following these steps for a potential solution:

https://i.sstatic.net/8Ejlo.png

1 - Navigate to settings and search for auto format

2 - Choose the option for Text Editor

3 - Set esbenp.prettier-vscode as your Default Formatter.

To simplify, go to Settings > User tab > Text Editor > Editor: Default Formatter and switch it to prettier.

For Windows users:

To access the specified file, follow these steps:

Start > Run 

File Path:

%AppData%\Code\User\settings.json

Make the following change in the file: From:

"[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
},

To:

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},

Please note the following:

• If the above code is not already present, add it instead of modifying.
• Ensure that you have installed the "Prettier - code formatter" to observe the changes - https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Despite having all these settings in place, you may still encounter issues. In such scenarios, it is advisable to check the prettier notification at the bottom status bar in VSCode as mentioned in a previous response.

https://i.sstatic.net/S5buS.png

If you click on that status, the output panel will highlight the problem in the HTML file. In my case, the issue was caused by having a div inside a p tag, which goes against prettier/VSCode conventions. After removing it and ensuring all the aforementioned settings are configured (including default formatter and format on save), prettier started working smoothly.

.prettierrc file is not necessary unless you wish to customize VSCode settings further

One day, I encountered an issue with my HTML files where the formatting suddenly stopped working. Despite having set up Format On Save for all files, it mysteriously didn't apply to HTML files.

After some investigation, I realized that I had mistakenly changed the Format On Save Mode to modification instead of file as an experiment, and completely forgot about it. This caused none of the changes in HTML files to be formatted, leaving everything untouched. Switching it back to file resolved the formatting issue.

https://i.sstatic.net/NZ1dI.png

The issue does not lie with Prettier itself, but rather with the VSCode extension prettier-vscode. As stated in the documentation of the extension, formatting for Vue files is turned off by default:

prettier.disableLanguages (default: ["vue"])

This setting includes a list of language IDs on which the extension should not be enabled. Restarting may be necessary. Note: Disabling a language that is enabled in a parent folder will stop formatting altogether instead of allowing another formatter to take over.

To enable formatting for Vue files, you need to set "prettier.disableLanguages": []. Since this pertains to an extension configuration, it should be done in the VSCode settings file and not in .prettierrc.

I was experiencing a problem where my code was constantly being reformatted by the typescript formatter.

It was really frustrating because it kept changing the spacing in my code!

To resolve this issue, I went to cmd+. (settings) and searched for "default formatter."

Then, I made sure to uncheck the box next to typescript.

https://i.sstatic.net/224tE.png

1 .If Prettier is not working for you, try using another extension like PrettierNow. I found success with this alternative extension. Check out PrettierNow here

2 .With the latest updates of Prettier, you should include a .prettierrc file in your project's root directory to continue using Prettier. Here is an example of what your .prettierrc file could look like-

{
  "tabWidth": 4,
  "singleQuote": true,
  "semi": false
}

Tips for Configuring Code Formatting with VScode's ESlint Plugin

Instead of focusing on how to utilize VScode's Prettier extension, let's delve into the process of integrating ESlint for code correctness checks and Prettier for formatting.

What are the Benefits of this Approach?

• Allows flexibility for team members who may prefer different code editors over VScode, promoting a tool-agnostic environment.
• Prioritizes code linting over formatting, but ensures that both aspects can coexist without conflicts.
• Reduces strain on hardware by minimizing the number of extensions running simultaneously.
• Streamlines configuration management by eliminating the need for separate personal configurations outside of the codebase.
• Enables automated ESlint checks before commits or in CI/CD pipelines.

How to Set up this Configuration?

To begin, install the ESlint extension exclusively, without adding the Prettier extension.

https://i.sstatic.net/0F3N6.png

Haven't Installed Vetur Yet?

If working with Vue2 apps (such as Nuxt), consider installing Vetur for simplified ESlint (+Prettier) integration with .vue files.

---

Once installed, access the Command Palette using ctrl + shift + p (Windows/Linux) or cmd + shift + p (Mac), then search for

Preferences: Open Default Settings (JSON)

.

https://i.sstatic.net/TP7oY.png

Your configuration should resemble the following:

{
  "workbench.colorTheme": "Solarized Dark",
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
  },
  "eslint.options": {
    "extensions": [
      ".html",
      ".js",
      ".vue",
      ".jsx",
    ]
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
  ],
}

Testing Your Configuration

To verify the setup, download the example Github repo, install Node.js version 14, and run yarn. Open VScode to ensure compatibility.

You can explore potential issues in .js or .vue files by checking the Problems view from the Command Palette (Problems: Focus on Problems View). Notable examples include nuxt.config.js and /pages/index.vue.

https://i.sstatic.net/2oDyc.png

Address any fixable concerns, which could involve both Prettier formatting issues and ESlint errors based on specific rules like vue/require-v-for-key.

If you desire inline ESlint warnings/errors like those shown above, consider installing Error Lens.

Saving the file triggers automatic fixes for identified issues, aligning with both Prettier formatting and Nuxt-defined ESlint standards.

Congratulations, your setup is now operational! If not, refer to troubleshooting steps at the end of the response.

Creating a New Project?

For new projects, use

npx create-nuxt-app my-super-awesome-project

and choose "Linting tools: Eslint + Prettier" during setup.

https://i.sstatic.net/r5Qtc.png

Note: Refer to an additional step mentioned in this Github issue for current installations until a future fix is released.

To rectify, execute

yarn add -D eslint-plugin-prettier

and confirm your .eslintrc.js file matches the updated structure provided.

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: '@babel/eslint-parser',
    requireConfigFile: false
  },
  extends: [
    '@nuxtjs',
    'plugin:prettier/recommended',
    'prettier'
  ],
  plugins: [

  ],
  rules: {}
}

Following these adjustments, your setup should seamlessly integrate ESlint and Prettier functionalities. Save the changes to trigger sequential ESlint and Prettier checks.

---

Troubleshooting Tips

• Restart the ESLint server or reload the window via the Command Palette if encountering issues.
• Feel free to reach out or seek assistance through contact options if further help is needed.

To address formatting issues in your code, you can follow these steps:

Right-click in the area where the formatting is incorrect.

Next, choose "Format Document With.." from the options provided.

If needed, access the "Configure Default Formatter..." option.

Select "Prettier" from the list of formatters available.

Make any necessary changes to your code and save the file.

In case Prettier automatically formats all files except HTML ones upon saving:

Simply press Cmd + P or Ctrl + P to open the command palette and enter the following text:

> open settings

Select

Preferences: Open Settings (JSON)

from the suggestion dropdown. Within the settings.json file, verify if the "[html]" key is present. If it exists and is set to utilize a different formatting extension within Visual Studio Code, revert it back to utilizing Prettier.

"[html]": {
    "esbenp.prettier-vscode"
}

As an example, at times, the value of the "[html]" key might be

"remimarsal.prettier-now"

if you have the Prettier Now extension installed.

If there are no other formatting extensions apart from Prettier, feel free to delete the "[html]" key entirely from the settings.json document.

This is the solution that helped me resolve the issue (my default formatter was already set to Prettier)

1. Set the default formatter to default
2. Restart Visual Studio Code
3. Switch back the default formatter to Prettier.

Access the Manage section (located at the bottom-left corner) -> Navigate to Settings -> Click on the Users tab -> Select Text-Editor -> Go to Formatting -> Make sure to verify the format upon saving

If this method doesn't work, try closing and reopening your vscode editor

Activating the "format on Save" feature within VSCode: Preferences >> User Settings >> Text Editor >> Formatting, has proven to be effective for me!

Recently, I encountered a similar issue where Prettier was not auto-formatting code upon saving. Upon inspecting Prettier settings, I came across an error message stating: Invalid "arrowParens" value. It expected either "always" or "avoid", but instead, it received true.

The error message popped up when I clicked on this link: https://i.sstatic.net/FeRfA.png

Upon further investigation, I realized that I also had Prettier Now installed, which had a boolean value in my configuration file. Once I uninstalled Prettier Now, the issue was resolved, and Prettier started working correctly again.

Through my experience, I discovered that I had set up prettier to utilize a configuration file that wasn't present (refer to the screenshot below). It was challenging to pinpoint this issue because there were no error messages; prettier simply wouldn't function properly. Hopefully, this information can assist someone else facing a similar problem.

https://i.sstatic.net/haoOQ.png

If you're still having trouble with the previous solutions, make sure to verify that there isn't a conflicting prettier configuration file .prettierrc in your current directory or double-check if .prettierignore is ignoring any files or folders.

To avoid potential conflicts, it is important to ensure that your project directory (workspace) does not contain a .vscode/settings.json file. I once encountered a situation where someone mistakenly included this file:

{
  "editor.formatOnSave": false
}

The solution is simple: Remove the file from your project (also remove it from source control) and make sure to add .vscode/ to your .gitignore file (if you are using git).

There are instances when you need to install prettier as a dependency before prettier vscode can recognize it. To do this, you can use one of the commands below based on your package manager:
npm i or yarn

To access the desired function, follow these steps: view -> Command Palette Once in the command palette, search for Format Document and choose Prettier as your formatting tool.

Although I already had Prettier set up for a different project, I needed to go through this process again to enable it for my new project.

Ensure to review your package.json file for the presence of a property named prettier as this will be given priority.

{
  "name": "example",
  "scripts": { ... },

  "prettier": {},

  "dependencies": { ... },
  "devDependencies": { ... },
}

If you remove this property, the settings in the .prettierrc file will take effect.

For more information on precedence, please refer to the guidelines provided in the prettier documentation.

It is common for necessary files used by Prettier to go missing during automatic plugin updates.

To ensure that the required files are intact, please verify if the specified path contains the necessary files or if the folder is empty:

C:\Users\YOURUSERNAME\.vscode\extensions\esbenp.prettier-vscode-2.2.2\out

If the files are indeed missing, you may need to uninstall and then reinstall Prettier to resolve the issue.

After reverting back to prettier version 1.7.3, the issue was resolved successfully.