Как синхронизировать синтаксис JSX библиотеки Facebook react.js, чтобы хорошо играть с jslint?

Я играю с библиотекой Facebook react.js. Я пытаюсь использовать их синтаксис JSX, который описывает создание представления следующим образом.

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

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

JSLint, очевидно, не нравится это ( "ожидал идентификатор и вместо этого видел" < "; - синтаксическую ошибку JavaScript), так как мне обойти это в моем файле .jshintrc?

Ответы

Ответ 1

(обновление: этот пост с 2013 года и устарел сейчас)

Я использую JSHint + JSX.

Для него не требуется вилка JSHint, должен быть способ сообщить JSHint об отключении всех предупреждений для блока кода. К сожалению, нет такого способа отключить все предупреждения, только определенный набор предупреждений, поэтому я могу закончить подачу запроса на перенос, чтобы добавить это, или изменить линт. Обновление: Мы отправили запрос на перенос, который был принят.

Как вы отметили, рабочий процесс Facebook и использование Instagram заключается в том, чтобы вырвать из IDE из командной строки.

Другой вариант - извлечь все ваши шаблоны JSX в свои собственные файлы и сделать их функцией области действия, а не существующей внутри неявной лексической области. Мы опробовали его и не понравились количество шаблонов.

(Я не являюсь аффилированным лицом команды React)

Ответ 2

Я попытался следовать советам Dustin's и в этой теме, и вот, что лучше всего для меня работало.

Настройка разработки

Я использую Sublime Text с SublimeLinter + SublimeLinter-jshint + SublimeLinter-jsxhint.
Это очень красивые плагины, которые позволяют мне видеть ошибки при сохранении файла, как для JS, так и для файлов JSX:

Эти плагины уважают ваш проект .jshintrc, и я не могу рекомендовать их достаточно.

Обязательно следуйте инструкциям по установке для всех трех пакетов, или они не будут работать:

Вы можете настроить linter для выполнения каждые несколько секунд, сохранения файла или вручную.

Шаг сборки, фиксатор и т.д.

Мы используем JSHint как часть нашего рабочего процесса Git и как шаг сборки для обеспечения соблюдения рекомендаций. Мы могли бы использовать jsxhint, но мы хотели продолжать использовать grunt-contrib-jshint, поэтому это не вариант.

В настоящий момент мы запускаем обычный jshint как шаг построения после react, поэтому он просто обрабатывает выходные файлы JS.

Было бы здорово, если бы кто-то искал grunt-contrib-jshint и сделал версию, которая работает с jsxhint, но она не выглядит как легкая задача для меня. (Обновление: кто-то сделал именно это, но я его не тестировал.)

Игнорирование нарушений в сгенерированном коде

Компилятор JSX генерирует код, который разбивает несколько наших соглашений.

Я не хотел использовать ignore:start и ignore:end как было предложено Dustin, так как это фактически отключит все линии внутри методов render. Это плохая идея в моей книге. Например, исключая метод render из linting делает linter думаю, что я не использую некоторые библиотеки и дочерние компоненты, которые я объявляю с помощью require в верхней части файла. Следовательно, необходимость игнорировать вещи распространяется от метода render до остальной части файла, и это полностью преувеличивает цель ignore:start.

Вместо этого я явно украшаю каждый метод render тремя параметрами JSHint, которые JSX-компилятор (в настоящее время) ломает для меня:

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

Это достаточно в моем случае; для вашего .jshintrc для этого может потребоваться некоторая настройка.

Ответ 3

JsxHint и JSHint arent - лучшие инструменты для перебора JSX. JSHint не поддерживает JSX, и все JsxHint делает преобразование JSX, а затем запускает JSHint в преобразованном коде. Я использовал (и очень рекомендую) ESLint с плагином React. Это лучше, так как Eslint может анализировать любой Javascript-вкус с использованием пользовательских парсеров, таких как esprima-fb или babel-eslint ( см. обновление ниже).

Пример .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"
    }
}

UPDATE

esprima-fb скоро будет устаревать Facebook. Используйте babel-eslint как синтаксический анализатор для eslint. Хорошее место, чтобы узнать больше о том, как вы можете настроить Babel и Eslint для работы с React, этот проект Github.

Ответ 4

См. JSXHint, обертка вокруг JSHint. Я написал, что выводит вывод из react-tools. Это шаг от игнорирования блока строк, поскольку он фактически наполнит созданный javascript.

Он может использоваться с Sublime Text через SublimeLinter с этим плагином.

Ответ 5

Ребята, поддерживающие репо, невероятно полезны. Вам просто нужно запустить его, чтобы преобразовать JSX для создания допустимого javascript, если только кто-то не создает вилку jshint. Если будет достаточно интереса, он может быть включен в дорожную карту для будущего выпуска реактивной структуры. Можете посмотреть на поток покрытия здесь.

Ответ 6

Я использую grunt + react-tools + jshint, чтобы вставлять файлы .js, созданные с помощью реагирующих инструментов. Выход из инструментов реагирования очень хорош в сохранении вашего интервала, отступов и т.д. При преобразовании вашего .jsx в .js, поэтому он дает вам точный файл, который можно использовать.

Чтобы настроить, установите grunt обычный путь. Затем установите часы-вкладыши, инструменты реагирования, grunt-react и grunt-contrib-jshint.

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

вот пример файла 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']);
};

В этом файле запуск "grunt" скомпилирует ваш .jsx в .js, а затем lint.js файлы. Вы можете запускать "grunt watch" для запуска после каждого сохранения.

Большинство моих обычных настроек .jshintrc работают при этом. Сначала я столкнулся с несколькими проблемами, но большинство из них были решены путем внесения изменений в ваши .jsx файлы. Для exapmle у меня "newcap" установлено значение true. Когда я последовал за соглашением об именовании, и запустил первую букву тегов, это привело к ошибке lint. Он был зафиксирован нижним корпусом первой буквы тегов.

Мне пришлось установить "trailing": false в my.jshintrc. Результирующие .js файлы имеют завершающие пробелы, где они преобразуют теги в Javascript. Я не понял, есть ли конфигурация реагирующих инструментов, чтобы изменить это. Вы можете использовать метод, описанный в сообщении Dan, если вы не хотите изменять свой .jshintrc.

В дополнение к linting этот процесс также помогает уловить проблемы с преобразованием .jsx в .js.

Проблема/падение с этим процессом заключается в том, что вы не можете вставлять файлы .jsx в редактор. Но держать окно терминала открытым, что вы можете видеть, а редактирование - полезная замена. Uing TMUX с Vim и Grunt в разных панелях - это мой предпочтительный способ использовать это.

Ответ 7

Ответ Amey правильный, но также может быть обновлен сегодня:

Пара eslint и eslint-plugin-react теперь поддерживают es6 + jsx +, поэтому babel-eslint требуется, только если вы используете некоторые специфические вещи, такие как свойства класса, декораторы, асинхронные/ожидающие, типы.

Пример конфигурации .eslintrc для реакции + jsx + es6 без babel-eslint:

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

Вы можете просто посмотреть инструкции eslint-plugin-реагировать для получения дополнительной информации/информации.