Linting Fehler bei der Verwendung von Bower und Xo-reagieren reagieren

Question

Ich habe eine React App. Ich verwende xo-react für meine Linter-Konfiguration.
Wenn ich webpack oder systemjs als Modul-Manager verwende, ist alles in Ordnung, aber wenn ich Bower verwende, habe ich Probleme wie react/jsx-no-undef oder react-in-jsx-scope kommt aus meinen JSX-Vorlagen.

Beispiel:

return (
    <Title/> 
); 

wirft 'Title' is not defined (react/jsx-no-undef)

Answer 1

Normalerweise, wenn Webpack verwenden Sie import Title from './title.js'; oder var Title = require('./title.js'); tun werde. Der Linter kann sehen, dass Title dann in diesem Bereich deklariert ist. Für SystemJS wäre das Äquivalent System.import('./title.js').then(function (Title) { /* Title exists here */ });, und wieder gibt es einen Title im Bereich. Bower mit nur <script> Tags basiert auf Globals, aber der Linter weiß nicht über sie, es sei denn, Sie sagen es. Es gibt zwei Möglichkeiten, das zu tun:

1. Inline Kommentare: /*global Title*/
2. Fügen Sie sie dem globals Abschnitt Ihrer .eslintrc: { "globals": { "Title": true } }

finden Sie in der Dokumentation auf specifying globals für mehr.