web-dev-qa-db-fra.com

Obtenir la syntaxe JSX de la bibliothèque react.js de Facebook pour bien jouer avec jslint?

Je joue avec la bibliothèque react.js de Facebook. J'essaie d'utiliser leur syntaxe JSX qui décrit la création d'une vue de la manière suivante.

/** @jsx React.DOM */
var HelloMessage = React.createClass({
  render: function() {
    return <div>{'Hello ' + this.props.name}</div>;
  }
});

React.renderComponent(<HelloMessage name="John" />, mountNode);

JSLint n'a évidemment pas aimé cela ("attendait un identifiant et a vu à la place '<';" - erreur de syntaxe JavaScript), alors comment contourner cela dans mon fichier .jshintrc?

javascriptfacebookjslintjshintreactjs
37
TYRONEMICHAEL

(mise à jour: cet article date de 2013 et est désormais obsolète)

J'utilise JSHint + JSX.

Cela ne devrait pas nécessiter un fork de JSHint, il devrait y avoir un moyen de dire à JSHint de désactiver tous les avertissements pour un bloc de code. Malheureusement, il n'existe aucun moyen de désactiver tous les avertissements , uniquement un ensemble spécifique d'avertissements, donc je peux finir par soumettre une demande d'extraction pour l'ajouter, ou changer les linters. Mise à jour: Nous avons soumis une demande de pull qui a été acceptée .

Comme vous l'avez noté, le flux de travail utilisé par Facebook et Instagram consiste à se pelotonner en dehors de IDE à partir de la ligne de commande.

Votre autre option consiste à extraire tous vos modèles JSX dans leurs propres fichiers et à en faire une fonction de portée au lieu d'exister à l'intérieur d'une portée lexicale implicite. Nous l'avons essayé et n'avons pas aimé la quantité de passe-partout.

(Je ne suis pas affilié à l'équipe React)

8
Dustin Getz

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

Configuration du développement

J'utilise Sublime Text avec SublimeLinter + SublimeLinter-jshint + SublimeLinter-jsxhint .
Ce sont des plugins très agréables qui me permettent de voir des erreurs lorsque j'enregistre le fichier, les deux pour les fichiers JS et JSX:

Ces plugins respectent le .jshintrc De votre projet et je ne saurais trop les recommander.

Assurez-vous de suivre les instructions d'installation des trois packages, sinon ils ne fonctionneront pas:

Vous pouvez configurer le linter pour qu'il s'exécute toutes les quelques secondes, lors de l'enregistrement du fichier ou manuellement.

Étape de construction, crochet de validation, etc.

Nous utilisons JSHint dans le cadre de notre flux de travail Git et comme étape de génération pour appliquer les directives. Nous aurions pu utiliser jsxhint mais nous voulions continuer à utiliser grunt-contrib-jshint donc ce n'était pas une option.

En ce moment, nous exécutons une jshint normale comme une étape de construction après la transformation react, donc il traite simplement le fichiers JS de sortie.

Ce serait cool si quelqu'un bifurquait grunt-contrib-jshint et faisait une version qui fonctionne avec jsxhint, mais cela ne me semble pas être une tâche facile. (Mise à jour: quelqu'un l'a fait juste mais je ne l'ai pas testé.)

Ignorer les violations dans le code généré

Le compilateur JSX génère du code qui rompt certaines de nos conventions.

Je ne voulais pas utiliser ignore:start Et ignore:endcomme suggéré par Dustin car cela désactiverait effectivement tout peluches à l'intérieur render méthodes. C'est une mauvaise idée dans mon livre. Par exemple, l'exclusion de la méthode render du linting fait penser à linter que je n'utilise pas certaines des bibliothèques et des composants enfants que je déclare avec require en haut du fichier. Par conséquent, la nécessité d'ignorer les choses se propage de la méthode render au reste du fichier, ce qui va complètement à l'encontre de l'objectif de ignore:start.

Au lieu de cela, je décore explicitement chaque méthode render avec trois options JSHint que le compilateur JSX rompt (actuellement) pour moi:

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

C'est suffisant dans mon cas; pour votre .jshintrc cela peut nécessiter un réglage.

29
Dan Abramov

JsxHint et JSHint ne sont pas les meilleurs outils pour linting JSX. JSHint ne prend pas en charge JSX et tout ce que JsxHint fait est de transformer JSX, puis d'exécuter JSHint sur le code transformé. J'ai utilisé (et je le recommande vivement) ESLint avec le plugin React . C'est mieux car Eslint peut analyser n'importe quelle saveur Javascript en utilisant des analyseurs personnalisés comme esprima-fb ou babel-eslint (voir la mise à jour ci-dessous).

Échantillon .eslintrc fichier:

{
    "parser": "esprima-fb",
    "env": {
        "browser": true,
        "node": true
    },

    "rules": {
        "no-mixed-requires": [0, false],
        "quotes": [2, "single"],
        "strict": [1, "never"],
        "semi": [2, "always"],
        "curly": 1,
        "no-bitwise": 1,
        "max-len": [1, 110, 4],
        "vars-on-top": 0,
        "guard-for-in": 1,
        "react/display-name": 1,
        "react/jsx-quotes": [2, "double", "avoid-escape"],
        "react/jsx-no-undef": 2,
        "react/jsx-sort-props": 0,
        "react/jsx-uses-react": 1,
        "react/jsx-uses-vars": 1,
        "react/no-did-mount-set-state": 2,
        "react/no-did-update-set-state": 2,
        "react/no-multi-comp": 0,
        "react/no-unknown-property": 1,
        "react/prop-types": 2,
        "react/react-in-jsx-scope": 1,
        "react/self-closing-comp": 1,
        "react/wrap-multilines": 2
    },

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

    "plugins": [ "react" ],

    "globals": {
        "d3": true,
        "require": "true",
        "module": "true",
        "$": "true",
        "d3": "true"
    }
}

[~ # ~] mise à jour [~ # ~]

esprima-fb sera bientôt déconseillé par Facebook. Utilisez babel-eslint comme analyseur pour eslint. Un bon endroit pour en savoir plus sur la façon dont vous pouvez configurer Babel & Eslint pour travailler avec React is ce projet Github .

14
Amey

Voir JSXHint , un wrapper autour de JSHint que j'ai écrit qui lints la sortie de react-tools. Ceci est une étape par rapport à l'ignorance d'un bloc de lignes car cela endommagera réellement le javascript généré.

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

5
STRML

Les gars qui maintiennent le repo sont incroyablement utiles. Il vous suffit de l'exécuter en lançant la transformation JSX pour produire du javascript valide à moins que quelqu'un ne crée un fork de jshint. S'il y a suffisamment d'intérêt, il pourrait être mis sur la feuille de route pour la future version du framework React. Peut regarder le fil de couverture ici .

2
TYRONEMICHAEL

J'utilise grunt + react-tools + jshint pour lint les fichiers .js construits à l'aide de react-tools. La sortie de react-tools est très bonne pour conserver votre espacement, votre indentation, etc., lors de la conversion de votre .jsx en .js, donc cela vous donne un fichier précis à comparer.

Pour configurer, installez grunt la manière normale . Installez ensuite grunt-contrib-watch, react-tools, grunt-react et grunt-contrib-jshint.

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

voici un exemple de fichier grunt:

'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" compilera votre .jsx en .js, puis lint les fichiers .js. Vous pouvez exécuter "grunt watch" pour exécuter après chaque sauvegarde.

La plupart de mes paramètres .jshintrc habituels fonctionnent lors de l'exécution de cette façon. J'ai rencontré quelques problèmes au départ, mais la plupart ont été résolus en apportant des modifications à vos fichiers .jsx. Par exemple, j'ai "newcap" défini sur true. Lorsque j'ai suivi la convention de nommage React tutorial et mis en majuscule la première lettre des balises, cela a généré une erreur de peluche. Il a été corrigé en mettant en minuscule la première lettre des étiquettes.

J'ai dû mettre "trailing": false dans mon .jshintrc. Les fichiers .js résultants ont des espaces blancs à la fin où il convertit les balises en Javascript. Je n'ai pas compris s'il existe une configuration de React-Tools pour changer cela. Vous pouvez utiliser la méthode décrite dans le post de Dan si vous ne souhaitez pas modifier votre .jshintrc.

Outre le peluchage, ce processus permet également de détecter les problèmes liés à votre conversion .jsx en .js.

Le problème/la chute de ce processus est que vous ne pouvez pas lint de fichiers .jsx dans l'éditeur. Mais garder une fenêtre de terminal ouverte que vous pouvez voir pendant la modification est un remplacement utile. Uing TMUX avec Vim et Grunt dans différents volets est ma façon préférée d'utiliser cela.

1
shortpgh

La réponse d'Amey est correcte mais pourrait également être mise à jour aujourd'hui:

Paire de eslint et eslint-plugin-react supporte maintenant es6 + jsx + react donc babel-eslint n'est nécessaire que si vous utilisez des trucs spécifiques comme les propriétés de classe, les décorateurs, les types asynchrones/attendent.

Exemple . Eslintrc configuration pour react + jsx + es6 sans babel-eslint:

{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "semi": 0
    },
    "plugins": [
        "react"
    ],
    "extends": ["eslint:recommended", "plugin:react/recommended"]
}

Vous pouvez simplement regarder eslint-plugin-react instructions pour plus de détails/informations.

0
alex_1948511