Чи існує форматор JSX для піднесеного тексту?

Я використовую Sublime Text як текстовий редактор.

Існує jsFormat для форматування файлів javascript, але я не можу знайти його для JSX.

Як ви, хлопці, маєте справу з форматуванням JSX?

Оновлення 4

Перевірте гарніший , не такий конфігуруваний як esformatter, але в даний час використовується для форматування деяких великих проектів ( наприклад, сам React )

Оновлення 3

Перевірте піднесений jsfmt . Якщо ви додасте esformatter-jsx до конфігурації та встановите пакет всередині фордера для sublime-jsfmt. Ви зможете форматувати файли JSX безпосередньо з Sublime. Ось посібник для цього

Оновлення 2

з командного рядка ви також можете використовувати esbeautifier . Це обгортка навколо esformatter, яка приймає список глобусів для форматування

# install the dependencies globally
npm i -g esbeautifier

# beautify the files under src/ and specs/ both .js and .jsx
esbeautifier src/**/*.js* specs/**/*.js*

Оновлення

Тож я закінчив робити плагін для esformatter, щоб увімкнути форматування файлів JSX:

https://www.npmjs.com/package/esformatter-jsx

Ось демо в реальному часі на requirebin

Це повинно бути якось доцільно викликати esformatter з Sublime, передаючи поточний файл як аргумент. У будь-якому випадку, щоб використовувати його з командного рядка, ви можете слідувати таким інструкціям:

З командного рядка його можна використовувати так:

# install the dependencies globally
npm i -g esformatter esformatter-jsx

# call it (this will print to stdout)
esformatter --plugins=esformatter-jsx ./path/to/your/file

# to actually modify the file
esformatter --plugins=esformatter-jsx ./path/to/your/file > ./path/to/your/file

# to specify a config file (where you can also specify the plugins)
# check esformatter for more info about the configuration options
esformatter -c ./path/to/.esformatter ./path/to/your/file > ./path/to/your/file

==== стара відповідь нижче ===

Отже, якщо те, що ви шукаєте, просто зробити ваші файли jsx відформатованими, дозволяючи jsxсинтаксис (в основному прикрашайте весь синтаксис javascript та ігноруйте jsxтеги, тобто залишайте їх як є), це те, що я роблю, використовуючиesformatter

// needed for grunt.file.expand
var grunt = require('grunt');

// use it with care, I haven't check if there
// isn't any side effect from using proxyquire to 
// inject esprima-fb into the esformatter
// but this type of dependency replacement
// seems to be very fragile... if rocambole deps change 
// this will certainly break, same is true for esformatter
// use it with care
var proxyquire = require('proxyquire');
var rocambole = proxyquire('rocambole', {
  'esprima': require('esprima-fb')
});

var esformatter = proxyquire('esformatter', {
  rocambole: rocambole
});

// path to your esformatter configuration
var cfg = grunt.file.readJSON('./esformatter.json');

// expand the files from the glob
var files = grunt.file.expand('./js/**/*.jsx');

// do the actual formatting
files.forEach(function (fIn) {
  console.log('formatting', fIn);
  var output = esformatter.format(grunt.file.read(fIn), cfg);
  grunt.file.write(fIn, output);
});

Я б насправді хотів, щоб esformatter використовував версію рокамболи, яка використовує esprima-fb замість esprima, щоб уникнути proxyquire.

У плагіні HTML-CSS-JS Prettify є параметр, який дозволяє ігнорувати синтаксис xml у файлі js / jsx. Таким чином він не псує код jsx. Налаштування: "e4x": trueу розділі "js" файлу налаштувань

Налаштування> Налаштування пакета> HTML \ CSS \ JS Prettify> Встановити налаштування Prettify

Це не працює добре, якщо у вас є самозакриваючі теги, наприклад. теги, що закінчуються на />

Ви можете встановити пакет JsPrettier для Sublime 2 & 3. Це досить новий форматтер JavaScript (на момент написання цього: лютого 2017 р.). Він підтримує більшість останніх розробок, таких як: ES2017, JSX та Flow.

Швидкий старт

1. Встановіть красивіше глобально за допомогою терміналу: $ npm install -g prettier
2. У Sublime перейдіть до Tools -> Command Palette ... -> Package Control: Install Package, введіть слово JsPrettier, а потім виберіть його, щоб завершити встановлення.
3. Відформатуйте файл за допомогою контекстного меню всередині редактора або прив'яжіть його до комбінації клавіш: { "keys": ["super+b"], "command": "js_prettier" }

Посилання:

• https://github.com/jonlabelle/SublimeJsPrettier
• https://github.com/jlongster/prettier

Щоб додати до сказаного @Shoobah:

У плагіні HTML-CSS-JS Prettify є параметр, який дозволяє ігнорувати синтаксис xml у файлі js / jsx. Таким чином він не псує код jsx. Параметр: "e4x": true у розділі "js" файлу налаштувань

Перейдіть до: Налаштування> Налаштування пакета> HTML \ CSS \ JS Prettify> Встановити налаштування Prettify

Перейдіть до розділу "js":

Додайте "jsx" до "дозволеного_файлу_розширення", а потім змініть "e4x" на "true"

відповідь в Інтернеті, який завжди говорив, що ви встановили для `` e4x '' значення true, але іноді нам потрібно встановити опцію 'format_on_save_extensions', а потім додати 'jsx' у масив

змінити jsFormat.sublime-settings

{
  "e4x": true,
  "format_on_save": true,
  "format_on_save_extensions": ["js", "json", "jsx"]
}

За допомогою програми встановлення пакетів Sublime встановіть Babel . Тоді:

1. Відкрийте файл .jsx.
2. Виберіть у меню Перегляд,
3. Потім Синтаксис -> Відкрити все з поточним розширенням як ... -> Babel -> JavaScript (Babel).

Не спеціально для Sublime Text, але в JavaScript є покращувач для React JSX.

http://prettydiff.com/?m=beautify претензії на підтримку JSX за адресою: http://prettydiff.com/guide/react_jsx.xhtml