javascriptvisual-studio-codeprettier

vscode format not formatting


I installed prettier plugin for vscode and have a .pretteirrc.js:

module.exports = {
  trailingComma: 'es5',
  tabWidth: 2,
  semi: true,
  singleQuote: true,
  printWidth: 60,
}

In settings the default formatter is set to: esbenp.prettier-vscode and format on save is checked but nothing is formatted on save and no indication is given that something is wrong.

Right clicking on a js file with the following content:

var test = [1, 2, 3, 4, 5, 2, 3, 4, 5, 2, 3, 4, 5, 2, 3, 4, 5, 2, 3, 4, 5, 2, 3, 4, 5, 2, 3, 4, 5, 2, 3, 4, 5, 2, 3, 4, 5, 2, 3, 4, 5, 2, 3, 4, 5, 2, 3, 4, 5, 2, 3, 4, 5, 2, 3, 4, 5, 2, 3, 4, 5, 2, 3, 4, 5, 2, 3, 4, 5, 2, 3, 4, 5, 2, 3, 4, 5, 2, 3, 4, 5, 6]

And choosing format document doesn't format it, neither does Format document with... => Prettier code formatter neither does chosing typescript and javascript language features.

Strange is that format with has typescript and javascript language features as default even though settings do not have that as default formatter.

I can see the prettier plugin in extensions and it is enabled.

vscode is version 1.41.0

Rebooted a couple of times and reloaded vscode window. Will try remove and re install vscode as auto formatting on save is a feature I can't do without.

Any suggestions what to check are welcome, the code does not have a syntax error (see example code above) so that should not stop vscode from formatting and not give any indication that something is wrong.

Removed .vscode directory from project directory and now default formatter is prettier but still nothing is formatted.


Solution

  • Uninistalled and re installed vscode and formatting was working again.

    My .vscode/settings.json looks like

    {
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "prettier.configPath": "./personal.yml"
    }
    

    So for the project I'm using personal formatting but before checking in files I created a task .vscode/tasks.json that will standard format all modified .js and .json files.

    {
      "version": "2.0.0",
      "tasks": [
        {
          "label": "Format",
          "command": "git status -s | grep '\\.js$\\|\\.json$' | cut -f3 -d' ' | xargs prettier --write --config ./.standard.yml;",
          "type": "shell"
        }
      ]
    }
    

    Regexp on mac works differently so I had to run prettier twice:

    {
      // See https://go.microsoft.com/fwlink/?LinkId=733558
      // for the documentation about the tasks.json format
      "version": "2.0.0",
      "tasks": [
        {
          "label": "format",
          "type": "shell",
          "command": "git status -s | grep '\\.js$' | cut -f3 -d' ' | xargs prettier --write --config ./.prettierrc.yml && git status -s | grep '\\.json$' | cut -f3 -d' ' | xargs prettier --write --config ./.prettierrc.yml"
        }
      ]
    }