So richten Sie ESLint und Prettier für Ihre React-Apps ein

Blog

Wollten Sie schon immer Eslint so konfigurieren, dass es mit Prettier und Ihrer Create React App richtig funktioniert? Dann lernen Sie in diesem Video die besten Einstellungen dazu.



Schritte:

1.Installieren Sie Eslint weltweit

npm i -g eslint

2. Öffnen Sie Ihr create-react-app-react-Projekt oder erstellen Sie eines durch Eingabe

npx create-react-app name-of-project

(benötigt npm 5.2+)

3. Initiieren Sie Eslint in Ihrem Projekt:

eslint --init

(beantworte die Fragen)



4. Bestätigen Sie die Installation von eslint-plugin-react

5. Belassen Sie dies in Ihrer ESlint-Konfiguration:

'env': { 'browser': true, 'es6': true }, 'extends': ['eslint:recommended'], 'plugins': ['react'], 'parserOptions': { 'ecmaVersion': 2018 }, 'rules': {}

6. Installieren Sie eslint-config-react-app-Peer-Abhängigkeiten:

npm install-peerdeps --dev eslint-config-react-app

7. Installieren Sie hübschere Abhängigkeiten:

npm i -D eslint-config-prettier eslint-plugin-prettier prettier

8. Konfigurieren Sie Prettier über das ESlint-Beispiel:

{ 'env': { 'browser': true, 'es6': true }, 'extends': ['react-app', 'prettier'], 'plugins': ['react', 'prettier'], 'parserOptions': { 'ecmaVersion': 2018 }, 'rules': { 'prettier/prettier': [ 'error', { 'printWidth': 80, 'trailingComma': 'es5', 'semi': false, 'jsxSingleQuote': true, 'singleQuote': true, 'useTabs': true } ] } }

9. Ändern Sie Ihre VScode-Einstellungen

'eslint.autoFixOnSave': true

10. Prüfen Sie mit dem folgenden Skript in package.json auf widersprüchliche Regeln:

{ 'scripts': 'eslint-check': 'eslint --print-config path/to/main.js }

Viel Spaß beim Codieren!

#reagieren #ESLint #Hübscher



www.youtube.com

So richten Sie ESLint und Prettier für Ihre React-Apps ein