Wie integriere ich ESLint und Prettier?

Question

Ich habe Probleme mit ESLint und Prettier zusammen. Was sind die notwendigen Schritte, um sie zur Zusammenarbeit zu bringen?

Answer 1

1) Installieren Sie ESLint und Prettier.

2) Installieren Sie die Plugins und Konfigurationen, die es ihnen ermöglichen zusammenzuarbeiten.

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

3) Fügen Sie die Ihre ESLint Konfigurationsdatei Folgendes:

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

4) zu package.json die lint und prettier Befehle als npm Skripte hinzufügen:

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

5) Sie jetzt fusseln und verschönern gleichzeitig Ihren Code:

$ npm run check-all 

Oder sie separat aufrufen:

$ npm run lint 
$ npm run prettier