Я играл вокруг с 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?
Я пытался следовать Дастин'с и STRML'с советы по этой теме, и здесь's то, что работал лучше для меня.
Я использую Sublime текст с SublimeLinter + SublimeLinter-у JSHint + SublimeLinter-jsxhint. Это очень хорошие плагины, которые позволяют мне увидеть ошибки, когда я Сохранить файл, и для JS и JSX файлы:
Эти плагины уважаю ваш проект'ы `.jshintrc и я могу'т рекомендовать им достаточно.
Обязательно следуйте инструкции по установке для всех трех пакетов, или они выиграли't работа:
Установка SublimeLinter прост (instructions);
SublimeLinter-у JSHint нужна глобальная `у JSHint в системе (инструкция);
SublimeLinter-jsxhint нужна глобальная jsxhint
в вашей системе, а также на JavaScript (JSX) bundle внутри пакеты/JavaScript с
(инструкция).
Вы можете настроить Линтер для выполнения каждые несколько секунд, на сохранение файла или вручную.
Мы're через у JSHint в рамках нашего рабочего процесса с Git и как строить шаг для реализации руководящих принципов. Мы могли бы использовать jsxhint но мы хотели сохранить, используя хрюкать-ВНО-у JSHint так это было'т вариант.
Прямо сейчас, мы'вновь работает Нормаль у JSHint как построить шаг после реагировать
трансформации, так это просто процесс вывода JS файлы.
Было бы круто, если кто-то раскошелится хрюкать-ВНО-у JSHint и сделал версию, которая работает с jsxhint, но это вовсе'т выглядеть как простая задача для меня. (Обновление: кто-то сделал но я еще'т проверял.)
JSX компилятор генерирует код, который ломает несколько наших конвенций.
Я не'т хотите использовать игнорировать:начало
и игнорировать:конец
как предложил Дастин, поскольку это будет эффективно отключить все пылеобразования внутри "отрисовка" методами. Это плохая идея в моей книге. Например, кроме метод render
от пылеобразования делает Линтер думаю, что я Дон'т использовать некоторые из библиотек и компонентов, ребенок, что я заявляю с требуют
в верхней части файла. Следовательно, нужно игнорировать вещи, распространяется от рендеринг
метод оставшейся части файла, и в этом теряется смысл игнорирования: "пуск" полностью.
Вместо этого, я явно украсить метода "отрисовка" с тремя вариантами у JSHint, что компилятор JSX (в настоящее время) льготы для меня:
render: function () {
/* jshint trailing:false, quotmark:false, newcap:false */
}
Этого достаточно в моем случае; для вашего.jshintrc` это может понадобиться некоторые настройки.
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 проекта.
(Обновление: этот пост с 2013 года и устарел.)
Я использую у JSHint + JSX.
Он должен'т требует развилке у JSHint, там должен быть способ, чтобы сказать у JSHint, чтобы отключить все предупреждения для блока кода. К сожалению, нет такого способа, чтобы отключить все предупреждения, только определенный набор предупреждений, так что я может закончиться отправкой pull-запрос, чтобы добавить это, или изменить Линта.
Обновление: мы подали запрос, которая была принята. Чтобы отключить все предупреждения, добавить /*у JSHint игнорировать: начало*/
, чтобы начать раздел, и /*у JSHint игнорировать: в конце */
в конце его.
Как вы заметили, процесс, использование Facebook и Instagram для корпит вне IDE из командной строки.
Другим вариантом является, чтобы извлечь все ваши JSX шаблоны в свои собственные файлы, и сделать их функцией в области вместо существующих внутри имплицитной лексической области. Мы попробовали его, и я'т, как количество boilerplate.
(Примечание: Я не связан с командой реагировать.)
Ребята поддержания РЕПО невероятно полезная. Вы просто должны запустить его бросили JSX преобразования для получения допустимым в JavaScript, если кто-то создает форк у JSHint. Если есть достаточный интерес, он может быть внесен в план для будущего выпуска платформы реагируют. Можете посмотреть на нить общения здесь.
Я использую грунт + реагируют-инструменты + у 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 и хрюкать в различных областях-это мой любимый способ использовать это.
Амей'ы ответ является правильным, но также может быть обновлен сегодня:
Пара 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-плагин-реагировать инструкция для получения дополнительной информации/информации.