How do you reenable esLint squiggly lines after adding Prettier?

Question

Description

I am trying to configure esLint to work with Prettier in VSCode. I am able to successfully install esLint, but when I add Prettier and add it to extends in the esLint config, the squiggly lines provided by esLint disappear. I have provided more details below.

Setup Steps

1. Install esLint and VSCode extension

I installed the esLint VSCode extension, and followed the esLint getting started docs to enable esLint. It works exactly as expected. In this example test code,

console.log("This is a test")

it identifies three issues which is the desired result:

2. Install Prettier and VSCode extension

Next, I installed Prettier and the VSCode extension without any difficulty. In this part of the Prettier Docs, it says I will need to install eslint-config-prettier.

3. Install eslint-config-prettier

This is where the issue occurs. The installation goes fine, but in the eslint-config-prettier github page it says:

Then, add "prettier" to the "extends" array in your .eslintrc.* file. Make sure to put it last, so it gets the chance to override other configs.

{
  "extends": [
    "some-other-config-you-use",
    "prettier"
  ]
}

The moment I add this to my .eslintrc.json and save the config, the squiggly lines disappear:

I am not sure how to resolve this. I went through the docs for esLint, Prettier, and eslint-config-prettier but none of the optional settings listed in the docs are bringing back the squiggles.

Configurations

.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "airbnb-base",
    "prettier"
  ],
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {}
}

.prettierrc.json

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

esLint Output

[Info  - 1:48:20 PM] ESLint server is starting
[Info  - 1:48:20 PM] ESLint server running in node v16.14.2
[Info  - 1:48:20 PM] ESLint server is running.
[Info  - 1:48:21 PM] ESLint library loaded from: /Users/georgeciesinski/Documents/Repositories/todo-list/node_modules/eslint/lib/api.js

Additional Info

1. My desired behaviour is for esLint to provide the squiggly lines so I can fix the issues manually. At the end, I will run Prettier from the CLI.

2. I am also using the airbnb eslint config.

3. I am using an M1 macbook running MacOS Ventura in case this matters.

Answer 1

I was able to find an answer to my query. In short, the configuration works despite my console.log test appearing to fail. The eslint-config-prettier configuration turns off some esLint rules as expected. Per the github docs:

Extending "prettier" turns off a bunch of core ESLint rules, as well as a few rules from these plugins:

@typescript-eslint/eslint-plugin
@babel/eslint-plugin
eslint-plugin-babel
eslint-plugin-flowtype
eslint-plugin-react
eslint-plugin-standard
eslint-plugin-unicorn
eslint-plugin-vue

I was aware of this, but I did not realize that the single quotes and semicolon rules were included in this, both of which stopped working when I extended Prettier. Further testing proved that esLint is in fact linting code that doesn't adhere to the remaining airbnb-base rules which have not been disabled by eslint-config-prettier.