どのようにESLintとPrettierを統合しますか？

Question

ESLintとPrettierの両方を一緒に使用するのに問題があります。一緒に働くために必要なステップは何ですか？

Answer 1

1）ESLintとPrettierをインストールします。

$ npm install --save-dev eslint prettier 

2）プラグインと設定をインストールして、連携させることができます。今

{ 
    ... 
    "scripts": { 
    ... 
    "lint": "eslint 'src/**/*.js'", 
    "prettier": "prettier --write 'src/**/*.js'", 
    "check-all": "npm run prettier && npm run lint", 
    ... 
    }, 
} 

5）あなたは：

$ npm install --save-dev eslint-plugin-prettier eslint-config-prettier 

3）あなたのESLint設定ファイルに以下を追加します。

{ 
    "plugins": [ 
    "prettier" 
    ], 
    "extends": [ 
    "prettier" 
    ], 
    "rules": { 
    "prettier/prettier": "error" 
    } 
} 

4）package.jsonにNPMスクリプトなどlintとprettierコマンドを追加します。次のようにしてコードを整列させて整理することができます。

$ npm run check-all 

または、それらを個別に呼び出します。

$ npm run lint 
$ npm run prettier