ESLint + Prettier integration

I’m trying to configure ESLint with Prettier in VSCode and that is how it looks like:

package.json:

{
  "scripts": {
    "start": "nodemon bin/www",
    "lint": "eslint src",
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "src/**/*.js": [
      "eslint --fix src",
      "git add"
    ]
  },
  "devDependencies": {
    "eslint": "^5.5.0",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-config-prettier": "^3.0.1",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-prettier": "^2.6.2",
    "husky": "^0.14.3",
    "lint-staged": "^7.2.2",
    "nodemon": "^1.18.4",
    "prettier": "^1.14.2"
  }
}

.eslintrc.json:

{
  "extends": ["airbnb-base", "plugin:prettier/recommended"]
}

The prettier extension is installed on VSCode, the only thing left was to put this on the settings:

{
  "editor.formatOnSave": true,
  "prettier.eslintIntegration": true,
}

It worked like a charm, now the thing is that I’m trying to override a few settings like singleQuote: true and semi: false. I tried to create a .prettierrc file like this:

{
  "singleQuote": true,
  "semi": false
}

It does work in the VsCode, it fix the code from double quotes to single and removes all the semicolons, the problem is that it appears this error:

It’s like a conflict between ESLint and Prettier.

I was reading the documentation and I saw that "plugin:prettier/recommended" in the .eslintrc already adds "rules": { "prettier/prettier": ["error"] } so I did like this:

• Removed the .prettierrc file
• Added the "rules": { "prettier/prettier": ["error"] } as "rules": { "prettier/prettier": ["error", { "singleQuote": true, "semi": false }] }

It worked, but now I’m wondering if I’m duplicating anything as the plugin is already adding this, or if .prettierrc is better suited for this.

What are your solutions for this?

[hasusozam]

For some (God knows what) reason it works now, I don’t know if it’s a vscode problem but it seems to be working now. Thank you very much.

[hasusozam]

That is weird, I really don’t know what is happening.