Closed prashanthwagle closed 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.
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.
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.)
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