ESLint, Prettier and VSCode Troubleshooting
Tags: vscode, eslint, prettier, javascript
Published: 2022-06-02 21:54:48

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-1)
  - [**Symptom 2**: VSCode does not format on save](#symptom-2)
  - [**Symptom 3**: ESLint generates hundreds of “Delete `␍` prettier/prettier error"s](#symptom-3)

---
## Symptom 1: VSCode does not highlight errors<a name="symptom-1"></a>

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

![No errors or warnings highlighted](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z1f76gjg674tf584ydbe.png)

![Errors and warnings highlighted](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yohsg4c2khwsrec23vuh.png)

Here are some things to look into:
### 1. ESLint and Prettier installation
Make sure [ESLint](https://eslint.org/docs/user-guide/getting-started#installation-and-usage) and [Prettier](https://prettier.io/docs/en/install.html) are installed for your project.

### 2. ESLint Plugin for VSCode
Make sure the [ESLint plugin for VSCode](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) is installed and enabled.
![What the ESLint plugin looks like in VSCode when it’s installed and enabled](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qfftwqieub2sekmvsrz7.png)

### 3. ESLint Configuration File
Make sure you have an [ESLint configuration file](https://eslint.org/docs/user-guide/configuring/configuration-files#configuration-file-formats) at the top level of your project.

### 4. eslint-plugin-prettier

I strongly prefer to use [eslint-plugin-prettier](https://github.com/prettier/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](https://code.visualstudio.com/docs/getstarted/settings) is set to ESLint. Check both the User settings and the Workspace settings (Workspace takes precedence over User).
![Default Formatter in VSCode settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cmry5x7bol7jlsc6u817.png)

### 6. VSCode “Workspace” Directory
Make sure the directory you opened in VSCode (aka the [workspace](https://code.visualstudio.com/docs/editor/workspaces)) 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](https://code.visualstudio.com/docs/editor/integrated-terminal), go to the Output tab, and choose ESLint from the dropdown:

![the Output tab of the VSCode terminal, with ESLint selected](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/teanxtkqbpur5k4dir55.png)

### 8. ESLint overrideConfigFile Configuration

Check to see whether you have an ESLint `overrideConfigFile` [option](https://eslint.org/docs/developer-guide/nodejs-api#-new-eslintoptions) in [VSCode settings](https://code.visualstudio.com/docs/getstarted/settings). If this option exists, make sure there’s a configuration file in that location.

![ESLint option settings in VSCode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pa52y4z77oqx0qipuhnl.png)

### 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](https://code.visualstudio.com/docs/getstarted/settings).

![Settings search for ESLint working directories](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1e5n7mew1sv7dll5hea7.png)

---
## Symptom 2: VSCode does not format on save<a name="symptom-2"></a>

### 1. VSCode “Format on Save” settings
Make sure your [VSCode settings](https://code.visualstudio.com/docs/getstarted/settings):

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

![“Format on Save” settings in VSCode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3675vpkzfmcqwkcotfdf.png)

### 2. VSCode “code actions on save” setting

Make sure your [VSCode settings](https://code.visualstudio.com/docs/getstarted/settings) include ESLint in the “code actions on save”:

![VSCode "code actions on save" settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwtuwzgwtfn4vyg7jiud.png)

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

```
"editor.codeActionsOnSave": 
  {
    "source.fixAll.eslint": true
  },
```

### 3. 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](https://github.com/testing-library/eslint-plugin-testing-library) as an example, this error:

![highlighted error for using toHaveAttribute("checked") instead of toBeChecked](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6sstsoclsccy7ofs1re1.png)

auto-fixes to this on save:

![corrected syntax using toBeChecked](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0k8tmyr1gp5hxy20ikjz.png)

But this linting error:

![Linting highlight for using screen.debug()](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0h8adyjwui4z6ikuaub5.png)

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

---
## Symptom 3: ESLint generates hundreds of “Delete `␍` prettier/prettier error”<a name="symptom-3"></a>

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:

![Alternate representation of ␍ character](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i2boebsfdasjxjza07tw.png)

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](https://create-react-app.dev/docs/setting-up-your-editor/#formatting-code-automatically)):

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

### 2. Update the prettier/prettier “endOfLine” rule

Update the prettier/prettier rule in the [ESLint configuration file](https://eslint.org/docs/user-guide/configuring/configuration-files#configuration-file-formats) (reference: [StackOverflow](https://stackoverflow.com/questions/53516594/why-do-i-keep-getting-delete-cr-prettier-prettier/53769213#53769213)):

```
"prettier/prettier": [
  "error",
  {
    "endOfLine": "auto"
  }
],
```

### 3. Set line endings in VSCode settings

Set the line endings in [.vscode/settings.json](https://code.visualstudio.com/docs/getstarted/settings#_settingsjson) (reference: [StackOverflow](https://stackoverflow.com/questions/53516594/why-do-i-keep-getting-delete-cr-prettier-prettier/64712055#64712055)):

```
{
    "files.eol": "\n",
}
```

### 4. Update your global git settings

**WARNING:** this will update your [global git settings](https://www.git-scm.com/book/en/v2/Customizing-Git-Git-Configuration) 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](https://docs.github.com/en/get-started/getting-started-with-git/configuring-git-to-handle-line-endings#global-settings-for-line-endings))

### 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](https://apps.microsoft.com/store/detail/ubuntu-20044-lts/9MTTCL66CPXJ?hl=en-us&gl=US) (even though other Windows users -- who were likely using PowerShell -- reported the error for the same GitHub repository).