Search code examples
typescriptvisual-studio-codeeslintprettier

Why is VSCode suddenly only formatting my files partially? (Using ESLint + Prettier)

All of a sudden, VSCode ignores my semi-colon rule and whitespaces rule, but only enforces tabs and spacing when I save my Typescript files.

I'm using both ESLint and prettier.

For instance, my Prettier has semi set to true in VSCode

enter image description here

I also have this on my prettierrc file. Note the "semi: true".

module.exports = {
  arrowParens: "always",
  printWidth: 80,
  singleQuote: false,
  jsxSingleQuote: false,
  semi: true,
  trailingComma: "all",
  tabWidth: 2,
  plugins: [require.resolve("prettier-plugin-tailwindcss")],
  tailwindConfig: "./packages/config/tailwind",
};

But semi-colons aren't added to my Typescript files.

I tried making sure that Prettier is my default formatterenter image description here

I checked that "Format on Save is turned on"enter image description here

None of these seem to automatically add the semi-colon despite having "semi: true" in settings.

The interesting thing is that the my spacing=2 tabs are enforced when I hit save, so Prettier seems to be working.

Solution

  • It turns out that under my settings.json (Command+Shift+P, type settings and hit "Preferences: Open User Settings (JSON)", my Typescript default formatter was changed to "vscode.typescript-language-features" instead of "esbenp.prettier-vscode") I must have toggled the settings accidentally through the VSCode status bar.

    Wrong:

    Correct: enter image description here