Search code examples
visual-studio-codeeslintprettier

Prettier/VSCode Eslint weird format/syntax breaking bug

Sometimes when I startup VSCode and I save an JS file, everything gets messed up.

example

From: enter image description here To: enter image description here On save

What I found out:

When I change a VSCode User setting (something related to the prettier plugin | anything (I normally change the prettier.eslintIntegration but it could be that any change in the setting resolves it)) it stops breaking on save.

Possible related environment details

// Part of .eslintrc
{
    parser: 'babel-eslint',
    extends: ['airbnb', 'prettier'],
    plugins: ['prettier'],
    rules: {
        'prettier/prettier': 'error'
    }
    ...
}

// .prettierrc.yml
printWidth: 80
tabWidth: 4
useTabs: false
semi: false
singleQuote: true
trailingComma: es5
bracketSpacing: true
jsxBracketSameLine: false
arrowParens: always

// Part of my VSCode 'User Settings' file
"javascript.format.enable": false,
"javascript.validate.enable": false,
"prettier.eslintIntegration": true,
"typescript.format.enable": false

// Possible related modules from my package.json
"babel-eslint": "^8.2.1",
"eslint": "^4.16.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": "^2.9.0",
"eslint-import-resolver-webpack": "^0.8.4",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.5.1",
"prettier-eslint": "^8.8.1",

VSCode Extension suspects:

dbaeumer.vscode-eslint
esbenp.prettier-vscode

If any other (debugging) information needs to be provided, please shoot.

Solution

  • I had similar issues using ESLint and Prettier together in VS Code. After trying dozens of ways, the following configuration works for me.

    ESLint and Prettier are installed globally on my machine.

    I am using these extensions:

    https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

    https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

    My .eslintrc.json file looks like this:

    {
"env": {
    "browser": true,
    "commonjs": true,
    "es6": true
},
"extends": ["eslint:recommended"],
"parserOptions": {
    "sourceType": "module"
},
"rules": {
    "indent": ["error", 4],
    "quotes": ["error", "single"],
    "semi": ["error", "always"],
    "no-console": "off"
}

    }

    In your VS Code, please go to Preference > Settings > User Settings and add the following lines:

    "editor.formatOnSave": true,
"prettier.tabWidth": 4,
"prettier.eslintIntegration": true,
"prettier.stylelintIntegration": true

    I am not using eslint-config-prettier or eslint-plugin-prettier and everything works fine for me.

    Important: Please make sure you do not have any other automatic formatter (other than Prettier) extension installed.