How to make Prettier, Eslint and Visual Studio Code play nice together

Question

I'm having problems getting prettier, eslint and visual studio code play nice together. I keep seeing red errors such as this in VSCode:

[eslint] Replace `↹` with `··` (prettier/prettier)

I have VSCode plugins eslint and prettier installed.

VSCode config { "javascript.validate.enable": false, "javascript.format.enable": false, "editor.formatOnSave": true, "prettier.singleQuote": true, "prettier.eslintIntegration": true, "window.zoomLevel": -1, "editor.fontSize": 13 } .eslintrc

    {
    "parser": "babel-eslint",
    "extends": [
        "airbnb",
        "plugin:react-native/all",
        "prettier",
        "prettier/react",
        "prettier/standard"
    ],
    "parserOptions": {
        "sourceType": "module",
        "ecmaFeatures": {
        "jsx": true
        }
    },
    "env": {
        "browser": true,
        "node": true,
        "mocha": true,
        "jest": true,
        "es6": true
    },
    "globals": {
        "expect": true,
        "sinon": true,
        "Promise": true,
        "__DEV__": true
    },
    "plugins": ["babel", "react", "react-native", "prettier"],
    "settings": {
        "import/resolver": {
        "node": {
            "paths": ["app"]
        }
        }
    },
    "rules": {
        "prettier/prettier": ["error"],
        "indent": [2, "tab", { "SwitchCase": 1 }],
        "comma-dangle": [2, "only-multiline"],
        "react/jsx-indent": [0, "tab"],
        "jsx-quotes": [2, "prefer-double"],
        "react/display-name": 0,
        "react/jsx-boolean-value": 1,
        "react/jsx-no-undef": 2,
        "react/jsx-sort-prop-types": 0,
        "react/jsx-sort-props": 0,
        "react/jsx-uses-react": 1,
        "react/jsx-uses-vars": 1,
        "react/jsx-filename-extension": 0,
        "react/no-did-mount-set-state": 2, // [2, "allow-in-func"],
        "react/no-did-update-set-state": 2,
        "react/no-multi-comp": 0,
        "react/no-unknown-property": 2,
        "react/prop-types": 1,
        "react/react-in-jsx-scope": 2,
        "react/self-closing-comp": 1,
        "react/sort-comp": 2,
        "react/jsx-wrap-multilines": 2,
        "react-native/no-color-literals": 1,
        "quotes": [
        2,
        "single",
        "avoid-escape"
        ]
    }
    }

dev dependencies package.json

"devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^7.2.3",
    "babel-plugin-module-resolver": "3.0.0-beta.5",
    "babel-plugin-react-intl": "^2.3.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
    "babel-preset-airbnb": "^2.4.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-native": "^4.0.0",
    "babel-preset-react-native-stage-0": "^1.0.1",
    "babel-register": "^6.24.1",
    "chai": "^4.1.0",
    "chai-as-promised": "^7.1.1",
    "chai-enzyme": "^0.8.0",
    "chai-immutable": "^1.6.0",
    "commitizen": "^2.9.6",
    "cz-conventional-changelog": "^2.0.0",
    "enzyme": "^3.1.0",
    "enzyme-adapter-react-16": "^1.0.2",
    "enzyme-to-json": "^3.1.4",
    "eslint": "^4.7.2",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-config-prettier": "^2.7.0",
    "eslint-plugin-babel": "^4.1.2",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-prettier": "^2.3.1",
    "eslint-plugin-react": "^7.4.0",
    "eslint-plugin-react-native": "^3.1.0",
    "eslint-plugin-standard": "^3.0.1",
    "expect.js": "^0.3.1",
    "flow": "^0.2.3",
    "flow-bin": "^0.56.0",
    "immutablediff": "^0.4.3",
    "jest": "^21.2.1",
    "jshint": "^2.9.5",
    "mocha": "^3.4.2",
    "prettier-eslint": "^8.2.1",
    "react-addons-test-utils": "^15.6.2",
    "react-dom": "16.0.0-beta.5",
    "react-intl-cra": "^0.2.8",
    "react-native-mock": "^0.3.1",
    "react-test-renderer": "^16.0.0",
    "redux-debounce": "^1.0.1",
    "redux-debounced": "^0.4.0",
    "redux-devtools": "^3.4.0",
    "redux-devtools-dock-monitor": "^1.1.2",
    "redux-devtools-log-monitor": "^1.3.0",
    "redux-mock-store": "^1.2.3",
    "regenerator-runtime": "^0.11.0",
    "remote-redux-devtools": "^0.5.12",
    "sinon": "^4.0.0"
}

Answer 1

You have to install eslint-config-prettier package and in your eslint config file add prettier to the extends array

{
  extends: ['prettier']
}