search

prettier / eslint-config-prettier

Turns off all rules that are unnecessary or might conflict with Prettier.
MIT License
5.46k stars 255 forks source link

Not working with eslint #152

Closed prashanthwagle closed 4 years ago

prashanthwagle commented 4 years ago

Hello, I'm using eslint v7.2.0. Everything was working fine until I ran a few updates which updated VSCode and some other programs. I've configured eslintrc to work with prettier, but when saving the file, prettier formats it in a different way (eslint config allows 2 spaces for tabs whereas prettier includes 4 spaces per tab). Below is my eslintrc.js

Any solutions on how to fix this and make eslint work with prettier?

module.exports = { env: { browser: true, es2020: true, }, extends: ['plugin:react/recommended', 'plugin:prettier/recommended'], parserOptions: { ecmaFeatures: { jsx: true, }, ecmaVersion: 11, sourceType: 'module', }, plugins: ['react'], rules: { quotes: [2, 'single', { avoidEscape: true }], 'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }], 'prettier/prettier': 'error', }, };

Edit: In VSCode, the following is the error thrown after running eslint filename.js

image

lydell commented 4 years ago

Hi!

Your config looks good other than the quotes rule which you should remove. You could also add "prettier/react" to "extends" to be more future proof.

To troubleshoot things like this, it’s the easiest to first take VSCode out of the question. Focus on getting it working on the command line.

Try to make a minimal repo that reproduces the issue. Many times, you’ll find the issue while doing so! Remove stuff until it doesn’t happen anymore. Then you should find what’s wrong! If not, push your minimal repo to github and I can take a look at it.

When it’s working from the command line it’s time to start trying in VSCode again.

prashanthwagle commented 4 years ago

Thank you for the response lydell. I did the whole thing all over again, and it seems that .prettierrc file was missing. I really didn't bother about it much as there was only one rule in that which was { "singleQuote": true}. But adding this file and this single rule surprisingly fixed the issue. Now eslint and prettier are going along well.

lydell commented 4 years ago

Ah, makes sense. Prettier defaults singleQuote to false (which means double quotes), so if you want single quotes you need to configure that in Prettier. (Also using the quotes rule in ESLint provides nothing but potential conflicts, though.)