How can i get Prettier and ESLint to work together?

user_1901521 0
Viewed 1321

When using Sublime Text 3, how can I get the both to work together?

On file save, Prettier replaces single quotes with double quotes, whilst ESLint looks for single quotes.

How can I get the two packages to work together?

.eslintrc

{
      "parser": "babel-eslint",
      "extends": "airbnb",
      "plugins": [
        "react",
        "jsx-a11y",
        "import",
        "prettier"
      ],
      "rules": { 
        "no-use-before-define": 0,
        "no-underscore-dangle": 0,
        "no-tabs": 0,
        "no-nested-ternary": 0,
        "indent": 0,
        "no-multi-assign": 0,
        "no-param-reassign": 0,
        "no-var": 0,
        "no-mixed-operators": 0,
        "no-unused-expressions": 0,
        "no-plusplus": 0,
        "no-confusing-arrow": 0,
        "no-case-declarations": 0,
        "vars-on-top": 0,
        "block-scoped-var": 0,
        "global-require": 0,
        "react/sort-comp": 0,
        "react/forbid-prop-types": 0,
        "react/no-unused-prop-types": 0,
        "react/no-multi-comp": 0,
        "react/no-array-index-key": 0,
        "no-trailing-spaces": 0,
        "react/jsx-filename-extension": 0,
        "import/prefer-default-export": 0
      },
      "globals": {
        "window": true,
        "__DEV__": true,
        "expect": true,
        "it": true,
        "navigator": true,
        "fetch": true
      }
    }
sublimetext3 prettier eslint
1 Answers

By default, Prettier config uses double quotes by default and might conflict with the ESLint configs you have pulled in.

You can get them to work via these few ways (most recommended first):

1) Install eslint-config-prettier and extend from it in .eslintrc. Doing this turns off some of the formatting-related rules within ESLint that might conflict with Prettier.

{
  "extends": [
    "airbnb",
    "prettier"
  ]
}

2) Changing the .prettierrc config file

{
  "singleQuote": true,
  ...
}

3) Adding a command line option when you invoke Prettier

$ prettier --single-quote ...

4) Turn off ESLint's quotes rule within your .eslintrc config file: 

{
  "rules": {
    "quotes": "off",
   ...
  }
}
user_17519460
Related