javascript - standard - jslint vs jshint

Obtener la sintaxis JSX de la biblioteca reaccionar.js de Facebook para jugar bien con jslint?

Question

Estoy jugando con la biblioteca de react.js de Facebook. Estoy tratando de usar su sintaxis JSX que describe la creación de una vista de la siguiente manera.

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

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

JSLint obviamente no le gusta esto ("esperaba un identificador y en su lugar vio ''<'';" - error de sintaxis de JavaScript), entonces, ¿cómo puedo solucionar esto en mi archivo .jshintrc?

Answer 1

(actualización: esta publicación es de 2013 y obsoleta ahora)

Yo uso JSHint + JSX.

No debería requerir un tenedor de JSHint, debería haber una manera de decirle a JSHint que desactive todas las advertencias para un bloque de código. Lamentablemente, no hay manera de desactivar todas las advertencias, solo un conjunto específico de advertencias, por lo que puedo terminar enviando una solicitud de extracción para agregar esto o cambiar linters. Actualización: presentamos una solicitud de extracción que fue aceptada .

Como notó, el flujo de trabajo que usa Facebook e Instagram es pasar la pelusa fuera del IDE desde la línea de comando.

Su otra opción es extraer todas sus plantillas JSX en sus propios archivos, y hacerlas una función de alcance en lugar de existir dentro de un alcance léxico implícito. Lo probamos y no nos gustó la cantidad de repetición.

(No estoy afiliado con el equipo React)

Answer 2

JsxHint y JSHint no son las mejores herramientas para deshilar JSX. JSHint no es compatible con JSX y todo JsxHint hace es transforma JSX y luego ejecuta JSHint en el código transformado. He estado usando (y lo recomendaría) ESLint con el plugin React . Esto es mejor, ya que Eslint puede analizar cualquier sabor de JavaScript utilizando analizadores personalizados como esprima-fb o babel-eslint (ver la actualización a continuación).

Ejemplo de archivo .eslintrc :

{
    "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"
    }
}

ACTUALIZAR

esprima-fb pronto será desaprobado por Facebook. Utilice babel-eslint como analizador para eslint. Un buen lugar para saber más sobre cómo configurar Babel & Eslint para trabajar con React es este proyecto de Github .

Answer 3

La respuesta de Amey es correcta, pero también podría actualizarse hoy:

Par de eslint y eslint-plugin-react ahora admiten es6 + jsx + reaccionar para que babel-eslint sea ​​necesario solo si usa algunas cosas específicas como class properties, decorators, async / await, types.

Ejemplo de configuración .eslintrc para reaccionar + jsx + es6 sin babel-eslint:

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

Puedes mirar las instrucciones de eslint-plugin-reaccionar para más detalles / información.

Answer 4

Los chicos que mantienen el repositorio son increíblemente útiles. Solo tiene que ejecutarlo, lanzó la transformación JSX para producir javascript válido a menos que alguien cree un fork de jshint. Si hay suficiente interés, podría incluirse en la hoja de ruta para la publicación futura del marco de reacción. Puede ver el hilo de coversation here .

Answer 5

Traté de seguir STRML''s consejos de Dustin''s y STRML''s sobre este hilo, y esto es lo que funcionó mejor para mí.

Configuración de desarrollo

Uso Sublime Text con SublimeLinter + SublimeLinter-jshint + SublimeLinter-jsxhint .
Estos son complementos muy agradables que me permiten ver los errores cuando guardo el archivo, tanto para archivos JS como JSX:

Estos complementos respetan el .jshintrc tu proyecto y no puedo recomendarlos lo suficiente.

Asegúrese de seguir las instrucciones de instalación para los tres paquetes, o no funcionarán:

• Instalar SublimeLinter es sencillo ( instructions );

• SublimeLinter-jshint necesita un jshint global en su sistema ( instructions );

• SublimeLinter-jsxhint necesita un jsxhint global en su sistema, así como un paquete de JavaScript (JSX) dentro de los Packages/JavaScript ( instructions ).

Puede configurar el linter para que se ejecute cada pocos segundos, al guardar archivos o manualmente.

Build Step, Commit Hook, etc.

Estamos utilizando JSHint como parte de nuestro flujo de trabajo de Git y como un paso de construcción para hacer cumplir las directrices. Podríamos haber usado jsxhint pero queríamos seguir usando grunt-contrib-jshint así que esta no era una opción.

En este momento, estamos ejecutando jshint normal como un paso de compilación después de la transformación de react , por lo que solo procesa los archivos JS de salida.

Sería genial si alguien bifurcara grunt-contrib-jshint e hiciera una versión que funcionara con jsxhint , pero no me parece una tarea fácil. (Actualización: alguien hizo eso pero no lo he probado).

Ignorar las violaciones en el código generado

El compilador JSX genera código que rompe algunas de nuestras convenciones.

No quise usar ignore:start e ignore:end Dustin''s ya que esto efectivamente desactivaría todas las salpicaduras dentro de los métodos de render . Es una mala idea en mi libro. Por ejemplo, excluir el método de render de linting hace que linter piense que no uso algunas de las bibliotecas y componentes secundarios que declaro que require en la parte superior del archivo. Por lo tanto, la necesidad de ignorar las cosas se extiende desde el método de render al resto del archivo, y esto frustra el objetivo de ignore:start completamente.

En cambio, adornaré explícitamente cada método de render con tres opciones JSHint que el compilador JSX (actualmente) rompe para mí:

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

Esto es suficiente en mi caso; para su .jshintrc esto puede necesitar un poco de ajuste.

Answer 6

Utilizo grunt + react-tools + jshint para eliminar los archivos .js creados con react-tools. La salida de react-tools es muy buena para mantener el espacio, la sangría, etc., al convertir su .jsx a .js, por lo que le brinda un archivo preciso contra el cual peinar.

Para configurar, instale gruñido de la manera normal . A continuación, instale grunt-contrib-watch, react-tools, grunt-react y grunt-contrib-jshint.

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

aquí hay un archivo gruñido de muestra:

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

En este archivo, ejecutar "gruñido" compilará su .jsx a .js y luego hilará los archivos .js. Puede ejecutar "grunt watch" para ejecutar después de cada guardado.

La mayoría de mis configuraciones habituales de .jshintrc funcionan cuando se ejecutan de esta manera. Inicialmente encontré algunos problemas, pero la mayoría se resolvió haciendo cambios en tus archivos .jsx. Por ejemplo, tengo "nuevo cap" establecido en verdadero. Cuando seguí la convención de nomenclatura del tutorial React y escribí en mayúscula la primera letra de las etiquetas, arrojé un error de pelusa. Se corrigió mediante la inserción de la primera letra de las etiquetas.

Tuve que establecer "seguimiento": falso en mi .jshintrc. Los archivos .js resultantes tienen espacios en blanco al final donde convierte etiquetas a Javascript. No he descubierto si hay una configuración de herramientas de reacción para cambiar esto. Puede usar el método descrito en la publicación de Dan si no desea cambiar su .jshintrc.

Además de lanzar pelusas, este proceso también ayuda a detectar problemas con su conversión de .jsx a .js.

El problema / caída con este proceso es que no se pueden eliminar archivos .jsx en el editor. Pero mantener una ventana de terminal abierta que puede ver mientras se edita es un reemplazo útil. Uing TMUX con Vim y Grunt en diferentes paneles es mi forma preferida de usar esto.

Answer 7

Ver JSXHint , un envoltorio alrededor de JSHint que escribí que filtra el resultado de react-tools de react-tools . Este es un paso adelante desde ignorar un bloque de líneas, ya que realmente afectará el javascript generado.

Se puede usar con Sublime Text mediante SublimeLinter con jsxhint .