Die JSX-Syntax der react.js-Bibliothek von Facebook lässt sich gut mit jslint spielen?

Versuchte ich zu Folgen, Dustin und STRML ist Beratung in diesem thread, und hier ist, was funktioniert am besten für mich.

Entwicklung-Setup -

Verwende ich Sublime Text mit SublimeLinter + SublimeLinter-jshint + SublimeLinter-jsxhint.

Dies sind sehr schöne plugins, lassen Sie mich sehen Fehler, wenn ich die Datei speichern, beide für JS und JSX-Dateien:

Diese plugins Respekt für dein Projekt .jshintrc und ich kann nicht empfehlen Ihnen genug.

Stellen Sie sicher, Folgen Sie Installationsanweisungen für alle drei Pakete, oder Sie wird nicht funktionieren:

• Installieren SublimeLinter ist einfach (Anweisungen);

• SublimeLinter-jshint braucht eine Globale jshint in Ihrem system (Anweisungen);

• SublimeLinter-jsxhint braucht eine Globale jsxhint in Ihrem system, sowie JavaScript (JSX) bundle innen Packages/JavaScript (Anweisungen).

Können Sie konfigurieren, linter, um ausführen alle paar Sekunden auf "Datei speichern" oder "manuell".

Build-Schritt, Commit-Hook, etc

Sind wir mit JSHint als Teil unserer Git-workflow und als build-Schritt zur Durchsetzung der Richtlinien. Konnten wir verwendet haben jsxhint aber wir wollten uns trotzdem mit grunt-contrib-jshint also das war nicht eine option.

Recht jetzt, wir laufen normal jshint als build-Schritt nach react transformation, so ist es nur Prozesse, die Ausgabe JS-Dateien.

Es wäre cool, wenn jemand-Gabel - grunt-contrib-jshint und machte eine version, die funktioniert mit jsxhintaber es sieht nicht wie eine einfache Aufgabe für mich. (Update: jemand genau das Taten aber ich habe es noch nicht getestet.)

Ignorieren Verstöße im Generierten Code

JSX-compiler generiert code, der Pausen ein paar unserer Konventionen.

Wollte ich nicht verwenden ignore:start und ignore:end wie vorgeschlagen von Dustin denn das würde effektiv deaktivieren alle linting innen render Methoden. Es ist eine schlechte Idee, in meinem Buch. Zum Beispiel, ohne render Methode von linting macht linter glaube ich nicht, verwenden Sie einige der Bibliotheken und untergeordnete Komponenten, erkläre ich mit require am Anfang der Datei. Deshalb die Notwendigkeit, die Dinge zu ignorieren breitet sich aus render Methode, um den rest der Datei, und diese Niederlagen der Zweck der ignore:start komplett.

Stattdessen habe ich explizit schmücken jedes render - Methode mit drei JSHint-Optionen, die JSX-compiler (derzeit) bricht für mich:

render: function () {
  /* jshint trailing:false, quotmark:false, newcap:false */
}

Dies ist ausreichend, in meinem Fall; für Ihre .jshintrc dies kann einige tuning.

InformationsquelleAutor der Antwort Dan Abramov

Sehen JSXHintein wrapper um JSHint ich schrieb, dass die Fusseln der Ausgabe von react-tools. Dies ist ein Schritt aus ignorieren einen block von Zeilen, wie es tatsächlich lint der generierte javascript.

Es kann verwendet werden, mit Sublime Text über SublimeLinter mit dieses plugin.

InformationsquelleAutor der Antwort STRML

Nutze ich grunt + reagieren-tools + jshint zu Fusseln .js-Dateien, erstellt mit reagieren-tools. Die Ausgabe reagieren-tools ist sehr gut über das halten von Ihr Abstand, Einzug, etc, wenn Sie die Konvertierung Ihrer .jsx .js, so gibt es Ihnen, eine genaue Datei zu Fusseln vor.

Setup, install grunt der normale Weg,. Installieren Sie dann die grunt-contrib-watch, reagieren-tools, grunt -, reagieren, und grunt-contrib-jshint.

npm install grunt-contrib-watch react-tools grunt-react grunt-contrib-jshint --save-dev

hier ist ein Beispiel grunt Datei:

'use strict';

module.exports = function (grunt) {
    //Project configuration
    grunt.initConfig({
        //Task configuration
        jshint: {
            options: {
                jshintrc: true,
            },
            react: {
                src: ['react/**/*.js']
            }
        },
        react: {
            files: {
                expand: true,
                cwd: 'react/',
                src: ['**/*.jsx'],
                dest: 'react/',
                ext: '.js'
            }
        },
        watch: {
            jsx: {
                files: ['react/**/*.jsx'],
                tasks: ['react', 'jshint:react']
            }
        }
    });

    //These plugins provide necessary tasks
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-react');

    //Default task
    grunt.registerTask('default', ['react', 'jshint:react']);
};

In dieser Datei ausgeführt wird "grunt" wird kompiliert .jsx .js und dann Fusseln die .js-Dateien. Sie können ausführen "grunt watch", um führen Sie nach jedem speichern.

Meisten meiner üblichen .jshintrc Einstellungen funktionieren bei der Ausführung auf diese Weise. Ich lief in einige Probleme am Anfang, aber die meisten konnten gelöst werden, indem Sie Veränderungen in Ihr .jsx-Dateien. Exapmle, ich habe "newcap" auf true gesetzt. Wenn ich folgte die Reagieren tutorial Namenskonvention und aktiviert den ersten Buchstaben des tags, warf Sie ein lint-Fehler. Es wurde behoben, indem die unteren Gehäuse des ersten Buchstaben des tags.

Ich habe, um das set "trailing": false, meine .jshintrc. Die daraus resultierende .js-Dateien nachgestellten Leerzeichen, wo es wandelt die tags in Javascript. Ich habe nicht herausgefunden, ob es eine Reaktion-tools-Konfiguration zu ändern. Sie können die Methode verwenden, beschrieben in Dan ' s post, wenn Sie nicht wollen, ändern Sie Ihre .jshintrc.

Neben linting, diesen Prozess auch hilft catch Probleme mit Ihr .jsx .js-Konvertierung.

Den Ausgabe - /Untergang mit diesem Prozess ist, dass Sie nicht Fusseln .jsx-Dateien in den editor. Aber halten Sie ein terminal-Fenster öffnen, können Sie sehen während der Bearbeitung ist ein hilfreicher Ersatz. Ierlichen TMUX mit Vim und Grunzen in verschiedenen Bereichen ist meine bevorzugte Art, dies zu nutzen.

InformationsquelleAutor der Antwort shortpgh