ESLint, Prettier and VSCode Troubleshooting

ESLint and Prettier can make coding so much easier with VSCode. I can’t tell you how many mistakes it catches in my code that are easily fixed in the moment — but would be difficult to track down as bugs later on.

But what if your problem is getting ESLint / Prettier to work with VSCode? See below for some troubleshooting tips. I’ve sorted the tips into three general symptoms:

• Symptom 1: VSCode does not highlight errors
• Symptom 2: VSCode does not format on save
• Symptom 3: ESLint generates hundreds of “Delete ␍ prettier/prettier error"s

Symptom 1: VSCode does not highlight errors

Let’s say you’ve gotten ESLint and Prettier set up, but VSCode is not highlighting errors:

Here are some things to look into:

1. ESLint and Prettier installation

Make sure ESLint and Prettier are installed for your project.

2. ESLint Plugin for VSCode

Make sure the ESLint plugin for VSCode is installed and enabled.

3. ESLint Configuration File

Make sure you have an ESLint configuration file at the top level of your project.

4. eslint-plugin-prettier

I strongly prefer to use eslint-plugin-prettier and configure Prettier within my ESLint configuration file (rather than maintain two configuration files).

5. VSCode Default Formatter Setting

Make sure the default formatter in VSCode Settings is set to ESLint. Check both the User settings and the Workspace settings (Workspace takes precedence over User).

6. VSCode “Workspace” Directory

Make sure the directory you opened in VSCode (aka the workspace) is the top level of your project. For example, say:

• your project lives at /usr/src/my-project
• your ESLint configuration file is at /usr/src/my-project/.eslintrc.json

If you open any directory other than /usr/src/my-project as the workspace in VSCode (for example /usr/src or /usr/src/my-project/client), then VSCode won’t recognize the ESLint configuration file.

7. ESLint Configuration Errors

Check for ESLint configuration errors: open the VSCode Terminal, go to the Output tab, and choose ESLint from the dropdown:

8. ESLint overrideConfigFile Configuration

Check to see whether you have an ESLint overrideConfigFile option in VSCode settings. If this option exists, make sure there’s a configuration file in that location.

9. ESLint Working Directories in VSCode

Check to see if your file is excluded from the ESLint Working Directories in your VSCode User or Workspace settings.

Symptom 2: VSCode does not format on save

1. VSCode “Format on Save” settings

Make sure your VSCode settings:

• have “Format on Save” enabled
• have “Format on Save Mode” set to “file”

2. VSCode “code actions on save” setting

Make sure your VSCode settings include ESLint in the “code actions on save”:

In settings.json, there should be an entry like this:

"editor.codeActionsOnSave": 

  {

    "source.fixAll.eslint": true

  },

1. Not all ESLint errors are “auto-fixable”

Note that some ESLint errors won’t be auto-fixed on save, because they are not auto-fixable. To use eslint-plugin-testing-library as an example, this error:

auto-fixes to this on save:

But this linting error:

is not auto-fixable, so doesn’t update on save.

Symptom 3: ESLint generates hundreds of “Delete ␍ prettier/prettier error”

This might occur if you are on a Windows computer, but the code was generated on a Mac or Linux computer. The error might also look like this:

Here are some things to try:

1. Run prettier from the command line

Run prettier on all of the files in the project (reference: create-react-app docs):

./node_modules/.bin/prettier --write "src/*/.{js,jsx,ts,tsx,json,css,scss,md}"

1. Update the prettier/prettier “endOfLine” rule

Update the prettier/prettier rule in the ESLint configuration file (reference: StackOverflow):

"prettier/prettier": [

  "error",

  {

    "endOfLine": "auto"

  }

],

1. Set line endings in VSCode settings

Set the line endings in .vscode/settings.json (reference: StackOverflow):

{

    "files.eol": "\n",

}

1. Update your global git settings

WARNING: this will update your global git settings and will affect ALL of your git projects.

Run git config --global core.autocrlf true and pull the code from GitHub again (or possibly re-clone the repo). (Reference: GitHub docs)

5. Consider using Windows Subsystem for Linux

Anecdotally, I did not get this error on my Windows laptop when using Ubuntu 20.04 on Windows Subsystem for Linux (even though other Windows users -- who were likely using PowerShell -- reported the error for the same GitHub repository).