Wie kann ich Prettier und ESLint zusammenarbeiten?

Question

Wenn Sie Sublime Text 3 verwenden, wie kann ich beide zusammen arbeiten lassen?

Bei der Dateispeicherung ersetzt Prettier einfache Anführungszeichen durch doppelte Anführungszeichen, während ESLint nach einfachen Anführungszeichen sucht.

Wie kann ich die beiden Pakete zusammenarbeiten?

.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 
     } 
    } 

Answer 1

standardmäßig Prettier Config verwendet doppelte Anführungszeichen standardmäßig und möglicherweise in Konflikt mit den ESLint configs Sie gezogen haben.

Sie erhalten können sie über diese wenigen zu arbeiten Möglichkeiten (am meisten empfohlen zuerst):

1) Installieren Sie eslint-config-prettier und erweitern Sie es in .eslintrc. Dadurch werden einige Formatierungsregeln in ESLint deaktiviert, die Konflikte mit Prettier verursachen könnten.

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

2) Ändern der .prettierrc Konfigurationsdatei

{ 
    "singleQuote": true, 
    ... 
} 

3) eine Befehlszeilenoption Hinzufügen, wenn Sie Prettier

rufen in Ihrem .eslintrc Config

$ prettier --single-quote ... 

4) Schalten Sie ESLint der quotes Regel Datei:

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