Получение Facebook'react.js синтаксис библиотеки с JSX, чтобы играть хорошо с 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?

Vjeux
Редактировал вопрос 11-го сентября 2013 в 7:49
Программирование
facebook javascript reactjs jslint jshint
22-го июня 2013 в 7:41
45 просмотров
Комментарии к вопросу (2)

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

Настройки Развития

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

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

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

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

Построить шаг, совершить крюк и т. д.

Мы're через у JSHint в рамках нашего рабочего процесса с Git и как строить шаг для реализации руководящих принципов. Мы могли бы использовать jsxhint но мы хотели сохранить, используя хрюкать-ВНО-у JSHint так это было'т вариант.

Прямо сейчас, мы'вновь работает Нормаль у JSHint как построить шаг после реагировать трансформации, так это просто процесс вывода JS файлы.

Было бы круто, если кто-то раскошелится хрюкать-ВНО-у JSHint и сделал версию, которая работает с jsxhint, но это вовсе'т выглядеть как простая задача для меня. (Обновление: кто-то сделал но я еще'т проверял.)

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

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

Я не'т хотите использовать игнорировать:начало и игнорировать:конец как предложил Дастин, поскольку это будет эффективно отключить все пылеобразования внутри "отрисовка" методами. Это плохая идея в моей книге. Например, кроме метод render от пылеобразования делает Линтер думаю, что я Дон'т использовать некоторые из библиотек и компонентов, ребенок, что я заявляю с требуют в верхней части файла. Следовательно, нужно игнорировать вещи, распространяется от рендеринг метод оставшейся части файла, и в этом теряется смысл игнорирования: "пуск" полностью.

Вместо этого, я явно украсить метода "отрисовка" с тремя вариантами у JSHint, что компилятор JSX (в настоящее время) льготы для меня:

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

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

Community
Редактировал ответ 23-го мая 2017 в 12:02
Комментарии (6)

JsxHint и JSHint не самые лучшие инструменты для пылеобразования JSX. У JSHint не поддерживает JSX и все JsxHint меняет JSX, а потом бежит у JSHint на преобразованный код. Я использую (и рекомендую) ESLint с плагин реагировал. Это лучше, так как Eslint может разобрать любой JavaScript аромат с помощью пользовательских парсеров, как esprima-ФБ или Бабель-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"
    }
}

Обновление

esprima-ФБ скоро будет устаревшим на Facebook. Используйте Бабель-eslint в качестве парсера eslint. Хорошее место, чтобы узнать больше о том, как вы можете настроить Бабеля & Eslint работать с реагировать Это этот GitHub проекта.

Amey
Редактировал ответ 30-го июля 2015 в 9:31
Комментарии (2)
Решение

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

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

Он должен'т требует развилке у JSHint, там должен быть способ, чтобы сказать у JSHint, чтобы отключить все предупреждения для блока кода. К сожалению, нет такого способа, чтобы отключить все предупреждения, только определенный набор предупреждений, так что я может закончиться отправкой pull-запрос, чтобы добавить это, или изменить Линта.

Обновление: мы подали запрос, которая была принята. Чтобы отключить все предупреждения, добавить /*у JSHint игнорировать: начало*/, чтобы начать раздел, и /*у JSHint игнорировать: в конце */ в конце его.

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

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

(Примечание: Я не связан с командой реагировать.)

Community
Редактировал ответ 14-го ноября 2019 в 9:34
Комментарии (2)

См. JSXHint, обертки у JSHint я писал, что Линц на выходе из реагировать-инструменты. Это шаг вверх от игнорирования блока строк, как оно будет на самом деле корпит сгенерированный JavaScript.

Он может быть использован с возвышенное текст через SublimeLinter с плагин.

Комментарии (1)

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

Комментарии (1)

Я использую грунт + реагируют-инструменты + у JSHint для корпит на .на JS файлов, используя реагировать инструменты. Выход из реагирую-инструменты очень хорошо хранила свой интервал, абзацный отступ и т. д. при преобразовании .jsx для .Яш, так это дает вам точный файл для ворса против.

Чтобы настроить, установить хрюкать обычным способом. Затем установите хрюкать-ВНО-смотреть, реагировать-инструменты, грунт-реагировать, и хрюкать-ВНО-у JSHint. 

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

вот пример хрюкать файл:

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

В этом файле, работает на "хрюкать" и будет компилироваться .jsx для .JS и затем корпия на .JS файлы. Вы можете работать на "хрюкать часы", чтобы запустить после каждого сохранения.

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

Мне пришлось установить, что "трал" и: ложь в мой .jshintrc. В результате .JS файлы имеют конечные пробелы, где он преобразовывает теги в JavaScript. Я еще'т понял, если есть реагировать-средства настройки, чтобы изменить это. Вы можете использовать метод, описанный в ДАН'ы сообщение, если вы не'т хотите изменить свой .jshintrc.

В дополнение к пылеобразования, этот процесс также помогает поймать проблемы с вашим .jsx для .преобразования в JS.

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

Комментарии (0)

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

Пара eslint и eslint-плагин-реагировать теперь поддержка на ES6+jsx+реагируют так Бабель-eslint нужен только если вы используете некоторые специфические вещи, как класс свойства, декораторов, асинхронный/ждут, типы.

Пример .eslintrc конфигурации на реагировать+jsx+ЕС6 без Бабеля-eslint:

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

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

Naveed Aheer
Редактировал ответ 29-го апреля 2017 в 10:59
Комментарии (0)