2015-05-18 16 views
46

W Atom Editor Po zainstalowaniu następujących wtyczekJak config ESLint dla Reaguj na Atom Editor

  1. LINTER
  2. linter-eslint

Wydaje się, że nie uznają JSX składniach.

Mam działa w linii poleceń, ale musiałem użyć innych wtyczek, takich jak esprima-fb i eslint-plugin-react. Wygląda na to, że nie ma takich wtyczek do edytora Atom i chciałbyś się dowiedzieć, czy ktokolwiek z was zna sposób na zhackowanie tego.

Odpowiedz

58

Aby uzyskać Eslint działa ładnie z React.js:

  1. Install LINTER & LINTER-eslint wtyczek
  2. Run npm install eslint-plugin-react
  3. Dodaj "plugins": ["react"] do pliku konfiguracyjnego .eslintrc
  4. Dodaj do listy "ecmaFeatures": {"jsx": true} Plik konfiguracyjny .eslintrc

Oto przykład pliku .eslintrc config:

{ 
    "env": { 
     "browser": true, 
     "node": true 
    }, 

    "globals": { 
     "React": true 
    }, 

    "ecmaFeatures": { 
     "jsx": true 
    }, 

    "plugins": [ 
     "react" 
    ] 
} 

Używam Eslint v1.1.0 w tej chwili.

uwaga Side: musiałem zainstalować zarówno eslint i eslint-plugin-reagować jako zależności projektowych (np npm install eslint eslint-plugin-react --save-dev). Mam nadzieję, że to pomaga.

+1

Czy napotkali Państwo kiedykolwiek "Błąd analizy ESLint: nieoczekiwany token"? – efkan

+2

Oprócz listy Jona musiałem zainstalować [Atom React Plugin] (http://orktes.github.io/atom-react/) – Dmitry

+1

Otrzymuję błąd importu na 'import React, {Component} from 'react' ; 'po skonfigurowaniu tak, jak powiedziałeś. –

0

Używam Atom i działa dobrze. Po prostu potrzebujesz .eslintrc w katalogu głównym projektu, który mówi ESLint, że używasz eslint-plugin-react.

34

Updated odpowiedź na rok 2016: wystarczy zainstalować pakiet react w Atom i dodać plik .eslintrc w katalogu głównym projektu (lub w domu dir) zawierający następujące:

{ 
    "parserOptions": { 
    "ecmaFeatures": { 
     "jsx": true 
    } 
    }, 
    "env": { 
    "es6": true 
    } 
} 

i ponownie otwierać żadnych plików zawierających JSX i powinno działać.

+1

Dzięki! Działa perfekcyjnie – brunetton

+0

Czy możesz dodać więcej szczegółów tutaj? – SuperUberDuper

+1

Nazwa pakietu po prostu "reaguje" teraz https://orktes.github.io/atom-react/ – Krishnan

6

Musisz edytować lokalny plik projektu .eslintrc, który zostanie pobrany przez ESLint. Jeśli chcesz zintegrować się z Atomem, możesz zainstalować wtyczki linter i linter-eslint.

Aby szybko skonfigurować ESLint dla React najlepszych praktyk, prąd najlepszym rozwiązaniem jest zainstalowanie pakietu npm eslint-plugin-react i rozszerzenie ich konfigurację recommended zamiast przełączania wiele zasad ręcznie:

{ 
    "extends": [ "eslint:recommended", "plugin:react/recommended" ], 
    "plugins": [ "react" ] 
} 

To pozwoli eslint-plugin-react i zalecane przepisy z ESLint & Gotowe ustawienia. Więcej informacji znajduje się w najnowszym ESLint user-guide.

Oto przykład opcji parsera zoptymalizowanych dla ES6 i WebPacka:

{ 
    "parserOptions": { 
    "sourceType": "module", 
    "ecmaVersion": 6, 
    "ecmaFeatures": { 
     "impliedStrict": true, 
     "experimentalObjectRestSpread": true, 
     "jsx": true 
    } 
    } 
} 
0
  1. dla użytkowników Mac: Przejdź do Atom -> Preferencje -> Install -> pakiet wyszukiwania linter-eslint -> kliknij zainstalować

  2. dla użytkowników Ubuntu: Przejdź do Edycja -> preferencje -> install -> pakiet wyszukiwania LINTER-eslint -> kliknij zainstalować

  3. odchodzenie t o wiersz polecenia ---> npm install --save-dev eslint-config-rallycoding

  4. Przyjdź do atomu, aby utworzyć nowy plik .eslintrc i przedłużyć rallycoding.

Powiązane problemy