Як отримати синтаксис JSX у бібліотеці реагування Facebook, щоб грати чудово з jslint?

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

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

React.renderComponent(, mountNode);

JSLint obviously does not like this ("expected an identifier and instead saw ' <';" - JavaScript syntax error), so how do I get around this in my .jshintrc file?

35
Ти не маєш Недійсний JavaScript, тому зрозуміло, що інструменти статичного аналізу JS не можуть з цим впоратися. Вам доведеться змінити JSLint/JSHint, щоб додати цю функцію.
додано Автор James Allardice, джерело
Ти так маєш рацію Хлопці, що підтримують репо, можуть створити вилку jshint.
додано Автор TYRONEMICHAEL, джерело

7 Відповіді

Я намагався слідкувати за Dustin та STRML's , що стосується цієї теми, і ось що найкраще для мене.

Налаштування розробки

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

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

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

Ви можете налаштувати linter для виконання через кожні кілька секунд, збереження файлу або вручну.

Build Step, Commit Hook тощо

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

Зараз ми використовуємо звичайний jshint як етап побудови після перетворення rea , тому він просто обробляє вихідні JS-файли.

Було б здорово, якби хтось видав grunt-contrib-jshint і зробив версію, яка працює з jsxhint , але це не схоже на легке завдання для мене. (Оновлення: хтось зробив це просто , але я не перевірив його.)

Ігнорування порушень у генеруваному коді

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

I didn't want to use ignore:start and ignore:end as suggested by Dustin since this would effectively disable all linting inside render methods. It is a bad idea in my book. For example, excluding render method from linting makes linter think I don't use some of the libraries and child components that I declare with require at the top of the file. Therefore, the need to ignore things spreads from render method to the rest of the file, and this defeats the purpose of ignore:start completely.

Замість цього я явно прикрашаю кожен метод render з трьома параметрами JSHint, які компілятор JSX (в даний час) порушує для мене:

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

Цього достатньо в моєму випадку; для вашого .jshintrc для цього може знадобитися певна настройка.

29
додано
@NilsMagneLunde Чи показує синтаксис JSX у нижньому правому куті? Ви перезапустили Sublime?
додано Автор Dan Abramov, джерело
@NilsMagneLunde Може бути, вам потрібно "Відкрити все з поточним розширенням як"? Див i.imgur.com/3thgqp6.png
додано Автор Dan Abramov, джерело
Я сподівався на більш загальну відповідь. Це припускає, що найвищий є використовуваним IDE. :(
додано Автор Yan Foto, джерело
Я виконував ваші вказівки, але мені не вдалося отримати Sublime, щоб використовувати правильний linter для .jsx-файлів. Він завжди використовує jshint замість jsxhint. Як ви вирішили цю проблему?
додано Автор Nils Magne Lunde, джерело
Ні, це не так. Зміна його на jsx, схоже, вирішила проблеми :-) Тепер мені просто потрібно з'ясувати, як зробити Sublime автоматично розпізнавати jsx-файли. Дякую!
додано Автор Nils Magne Lunde, джерело
Це зробив трюк. Знову дякую!
додано Автор Nils Magne Lunde, джерело

JsxHint і JSHint не мають найкращих інструментів для малювання JSX. JSHint не підтримує JSX, і всі дії JsxHint перетворює JSX, а потім запускає JSHint на перетвореному коді. Я використовую ESLint (і дуже рекомендую) Реагувати плагін . Це краще, оскільки 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 will soon be deprecated by Facebook. Use babel-eslint as a parser for eslint. A good place to know more about how you can setup Babel & Eslint to work with React is this Github project.

13
додано
Погодитися Подивіться це, щоб отримати додаткову інформацію: medium/@ dan_abramov/lint- like-it-s-2015-6987d44c5b48
додано Автор vasa, джерело
Як автор JSXHint ... з усією душею згоден. JSXHint - це хак, який я склав у вихідні, щоб я міг просто отримати деяку основну програму, яка працювала без страшних хакерів ignore . ESLint насправді правильно аналізує код та підтримує набагато більше функцій ES6/ES7 для завантаження. Це кращий проект, і я переключився на це в своїй роботі.
додано Автор STRML, джерело

(оновлення: цей пост з 2013 року і застарілий зараз)

Я використовую JSHint + JSX.

Не слід вимагати вилки JSHint, має бути спосіб сказати JSHint, щоб вимкнути всі попередження для блоку коду. На жаль, неможливо відключити попередження всіх , лише певний набір попереджень, тому я можу в кінцевому підсумку представити запит тягнути, щоб додати це, або змінити лінте. Оновлення: Ми надіслали запит тягнути, який був прийнятий .

Як ви помітили робочий процес, використання Facebook і Instagram полягає в тому, щоб використовувати командний рядок за межами IDE.

Ваш інший варіант полягає в тому, щоб вилучити всі ваші шаблони JSX у власні файли та зробити їх функцією сфери, а не існуючими в неявній лексичній області. Ми спробували це і не сподобалося суму кошика.

(Я не пов'язаний з командою React)

7
додано
Потрібний запит об'єднується, до речі, принаймні з JSHint 2.4. Однак я настійно рекомендую використовувати гранульовані варіанти замість ignore: start : див. Пояснення .
додано Автор Dan Abramov, джерело
Спеціально працював над цим. Рекомендація каналу IRC полягає в тому, щоб вивести дані з jsx "transpiler". Я насправді працював над модулем вузлів, який обгорнув jshint, який перетворить всі знайдені jsx-файли.
додано Автор tkone, джерело

Див JSXHint , обгортка навколо JSHint я написав, що виводить вихід з re-tools . Це наближається до ігнорування блоку рядків, оскільки воно насправді створить сформований JavaScript.

Він може використовуватися з Sublime Text через SublimeLinter з цим плагіном .

5
додано
Існує також інтернет-версія: www.jsxhint.com
додано Автор Cezary Daniel Nowak, джерело

Хлопці, що підтримують репо, є неймовірно корисними. Ви просто повинні запустити його, кинув перетворення JSX для створення дійсного javascript, якщо хтось не створить вилку jshint. Якщо є достатньо інтересу, це може бути покладено на дорожню карту для майбутнього вивільнення реагування. Можна дивитись на обкладинну нитку тут .

2
додано
Нещодавно я поставив запит тягнути на jshint, який додає функцію ігнорування блоку лінії в JavaScript і відновити linting після цього. Особливо я мав на увазі JSX.
додано Автор Daniel Miladinov, джерело

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

Щоб налаштувати, встановіть звичайний спосіб . Потім встановіть грунт-contrib-watch, react-tools, grunt-react і grunt-contrib-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']);
};

У цьому файлі, запускаючи "grunt", буде компілювати ваш .jsx до .js, а потім завантажувати файли .js. Ви можете запустити "грот-годинник" для запуску після кожного збереження.

Більшість моїх звичайних налаштувань .jshintrc працюють під час виконання цього способу. Спочатку я вирішив кілька питань, але більшість з них вирішені шляхом внесення змін у файли .jsx. Для прикладу, у мене "newcap" встановлено на істину. Коли я виконував настанови щодо іменування Реакції підручника і впорядкував першу літеру тегів, це кинув помилку білого кольору Це було зафіксовано нижнім кожухом першої літери тегів.

Я повинен був встановити "trailing": false в моєму .jshintrc. Отримані файли .js мають кінцеві пробіли, де перетворюються теги в Javascript. Я не з'ясував, чи є конфігурація реактивних інструментів, щоб змінити це. Ви можете скористатись методом, описаним у публікації Dan, якщо ви не хочете змінювати свій .jshintrc.

Крім того, цей процес також допомагає уникнути проблем із перетворенням .jsx в .js.

Проблема/падіння з цим процесом полягає в тому, що ви не можете накладати файли .jsx у редакторі. Але відкриття термінального вікна, яке ви можете бачити під час редагування, є корисною заміною. Uing TMUX з Vim і Grunt в різних панелях є моїм кращим способом використовувати це.

1
додано

Відповідь Amey є правильною, але також може бути оновлена ​​сьогодні:

Пара eslint та eslint-plugin-реагувати тепер підтримують реакцію es6 + jsx +, тому babel-eslint потрібна, лише якщо ви використовуєте певні матеріали як властивості класу, декоратори, async/wait, типи.

Приклад .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-react для отримання додаткової інформації/інформації.

0
додано
We <3 React.js
We <3 React.js
2 040 учасників

dev-ua/reactjs

ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram