Search code examples
typescriptvisual-studio-codeeslintprettier

How to disable prettier error highlitings in vscode


I'm not sure what I did to trigger this prettier code formatting thing . all I know is I opened up vscode to keep working on the same project I've been working on for months and all of a sudden I'm getting error messages and highlights about my double quotes and spacing.

what I see

here is what I've tried. first i stumbled across an answer to a similar question and looked for a file named .prettierrc edited it and set everything to false . When that didn't work i deleted the file all in all. Still nothing changed. Then tried looking for prettier settings based on another suggestion of go to file>preferences>settings and searching for prettier .that also didn't work, no search results related to prettier . I've been back and forth with this and tried other suggestions on disabling prettier but none seem to work .

here is what almost worked .adding the lines rules: { 'prettier/prettier': 0, }, to .eslintrc.js but it still lives some warnings of missing semi colon among a few others.

also I don't believe in need to edit any of the files that were initially available to remove something that initially wasn't


Solution

  • Update:

    Since writing the below, I discovered that it may be more economical to keep ESLint on with the following in settings.json:

    {
      // ...
      "eslint.enable": true,
      "eslint.run": "onSave",
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "editor.formatOnSave": true,
      "files.autoSave": "off",
      // ...
    }
    
    • Enable ESLint and only run it on save.
      • This avoids ESLint from reporting errors everywhere when you're writing code.
    • Enable Prettier and have it format on save.
      • ESLint will only check the file after Prettier has formatted it.
    • Disable auto-saving features in VS Code.
      • I choose to manually save because I can save it when I think the code doesn't have any syntax errors, which ensures that Prettier can format the file on save.
      • VS Code automatically saves your edit session to disk, so even if you quit with unsaved changes or if something untoward happens, you'll restore session with the same unsaved changes next time. So auto-saving of files is not really necessary.

    Note that if your entire project is not already formatted with Prettier, I suggest doing so using npx prettier --write ..

    Original answer:

    Quick Fix: Disable the ESLint extension in VSCode.

    Explanation: These errors are generated by a lint tool, most likely ESLint.

    It happens when you install both the eslint package as well as the "ESLint" extension in VS Code. The package checks to make sure the code is formatted well and throws errors if it's not. The extension runs the package seamlessly and dresses your VS Code window with those errors (hence the red squiggly lines). Good news is, you can have eslint package installed in your project without the extension. Prettier can still auto-format your code using the package without the extension.

    Answer: If you have installed the ESLint extension, you can simply disable it, either by using the "eslint.enable": false or by finding ESLint in the Extensions sidebar and disabling it.

    This Stack Overflow question has many answers which guide you on the matter.

    Note: Prettier is not a lint tool. It's a formatter.

    Bonus Tip: Run npx prettier --write . in your project to format all files according to your Prettier rules.