PrettierとESLintを一緒に使うにはどうすればいいですか？

Question

崇高なテキスト3を使うとき、どうすれば一緒に働くことができますか？

ファイルセーブでは、Prettierは一重引用符を二重引用符で置き換え、ESLintは一重引用符を探します。

どうすれば2つのパッケージを連携させることができますか？デフォルトでは

.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

、きれい設定はデフォルトでは二重引用符を使用し、あなたが引っ張ってきたESLintのコンフィグと競合する可能性があります。

あなたは彼らがこれらのいくつかを経由して仕事を得ることができます方法：（最初にお勧めします）

1）eslint-config-prettierをインストールし、.eslintrcに拡張してください。これを行うと、ESLint内の書式関連ルールのうち、Prettierと競合する可能性があるものがオフになります。 .prettierrc設定ファイル

{ 
    "singleQuote": true, 
    ... 
} 

）あなたが起動し、コマンドラインオプションの追加変更

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

2）きれい

$ prettier --single-quote ... 

4）あなたの.eslintrc設定内ESLintのquotesルールをオフにしますファイル：

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