L'obtention de Facebook est react.js bibliothèque JSX syntaxe de jouer gentiment avec jslint?

J'ai essayé de suivre Dustin est et STRML de l' des conseils sur ce fil, et voici ce qui a fonctionné le mieux pour moi.

Développement De Configuration

J'utilise Sublime Text avec SublimeLinter + SublimeLinter-jshint + SublimeLinter-jsxhint.

Ce sont de très belle plugins que permettez-moi de voir des erreurs lorsque j'enregistre le fichier, les deux pour JS et JSX fichiers:

Ces plugins respect de votre projet .jshintrc et je ne peux pas le recommander assez.

Assurez-vous de suivre les instructions d'installation pour tous les trois paquets, ou ils ne fonctionnent pas:

• Installation SublimeLinter est simple (instructions);

• SublimeLinter-jshint mondiale jshint dans votre système (instructions);

• SublimeLinter-jsxhint mondiale jsxhint dans votre système, ainsi que JavaScript (JSX) bundle à l'intérieur de Packages/JavaScript (instructions).

Vous pouvez configurer le linter pour exécuter toutes les quelques secondes, sur fichier enregistrer, ou manuellement.

Étape de génération, Commit Hook, etc

Nous utilisons JSHint dans le cadre de notre workflow Git et comme une étape de génération d'appliquer les lignes directrices. Nous aurions pu utiliser jsxhint mais nous voulions garder à l'aide de grunt-contrib-jshint ce n'était pas une option.

Droit maintenant, nous sommes en cours d'exécution normale jshint comme une étape de génération après react de transformation, et donc les processus de la sortie JS fichiers.

Ce serait cool si quelqu'un fourchue grunt-contrib-jshint et fait une version qui fonctionne avec jsxhint, mais il ne me semble pas une tâche facile pour moi. (Mise à jour: quelqu'un fait mais je n'ai pas testé.)

En ignorant les Violations au Code Généré

JSX compilateur génère du code qui rompt un peu de nos conventions.

Je ne voulais pas utiliser de ignore:start et ignore:end comme suggéré par Dustin car ce serait effectivement désactiver tous peluchage à l'intérieur de render méthodes. C'est une mauvaise idée dans mon livre. Par exemple, en excluant render méthode de peluchage fait linter crois que je ne vais pas utiliser certaines des bibliothèques et de l'enfant composants que je déclare avec require en haut du fichier. Par conséquent, la nécessité d'ignorer les choses se propage à partir render méthode pour le reste du fichier, et cela va à l'encontre de l'objectif de ignore:start complètement.

Au lieu de cela, j'ai choisi de décorer chaque render méthode avec trois JSHint options JSX compilateur (actuellement) des pauses pour moi:

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

Cela est suffisant dans mon cas; pour votre .jshintrc, cela peut nécessiter quelques aménagements.

Voir JSXHint, un wrapper autour de JSHint, j'ai écrit que les peluches de la sortie de react-tools. C'est un ignorant, un bloc de lignes qu'il sera en fait de la charpie le javascript généré.

Il peut être utilisé avec Sublime Text via SublimeLinter avec ce plugin.

- Je utiliser grunt + réagissent-outils + jshint à de la poussière de la .fichiers js construit à l'aide de réagir-outils. La sortie de réagir-outils est très bon sur la tenue de votre espace, de l'indentation, etc, lors de la conversion de votre .jsx pour .js, il vous donne une exacte du fichier à de la poussière contre.

À l'installation, installer grunt la façon normale. Puis installer grunt-contrib-montre, réagissent-outils, grunt-réagir, et grunt-contrib-jshint.

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

voici un exemple de grunt fichier:

'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']);
};

Dans ce fichier, l'exécution de "grunt" compiler votre .jsx pour .js et ensuite les peluches .js fichiers. Vous pouvez exécuter "grunt de la montre" pour exécuter après chaque sauvegarde.

La plupart de mes habituels .jshintrc paramètres de travail lors de l'exécution de cette manière. J'ai rencontré quelques problèmes au départ, mais la plupart ont été résolus par faire des changements dans votre .jsx fichiers. Pour exapmle, j'ai "newcap" la valeur true. Quand j'ai suivi le Réagir tutoriel convention de nommage et en majuscule la première lettre de balises, c'jeta un chiffon en erreur. Il a été fixé par la baisse du corps de la première lettre de balises.

J'ai dû mettre "fin": false dans mon .jshintrc. Le résultant .js fichiers ont de fuite des espaces où il convertit les balises Javascript. Je n'ai pas compris si il y est une réaction-outils de configuration pour changer cela. Vous pouvez utiliser la méthode décrite dans Dan post si vous ne voulez pas changer votre .jshintrc.

En plus de peluchage, ce processus permet également de traiter les problèmes avec votre .jsx pour .js conversion.

La question/chute avec ce processus est que vous ne pouvez pas les peluches .jsx fichiers dans l'éditeur. Mais en gardant une fenêtre de terminal ouverte que vous pouvez voir lors de l'édition est un utile de remplacement. Uing TMUX avec Vim et Grunt dans différents volets est ma manière préférée de l'utilisation de ce.