Есть ли форматировщик JSX для возвышенного текста?

Question

Я использую Sublime Text как текстовый редактор.

Существует jsFormat для форматирования файлов javascript, но я не могу найти его для JSX.

Как вы, ребята, имеете дело с форматированием JSX?

Answer 1

Update 4

Проверить prettier, не то, что можно сконфигурировать как esformatter, но в настоящее время используется для форматирования несколько крупных проектов (like React itself)

Update 3

Проверить sublime jsfmt. Если вы добавите esformatter-jsx в конфигурацию и установите пакет внутри forlder для sublime-jsfmt. Вы сможете форматировать файлы JSX непосредственно из Sublime. Here is a guide for that

Update 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* 

Update

Так что я в конечном итоге делаю плагин для esformatter, чтобы включить форматирование JSX файлы:

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

live demo on 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 (в основном украсьте весь яваскрипт синтаксис и игнорировать 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 использовал версию rocambole, которая использует esprima-fb вместо esprima, чтобы избежать использования proxyquire.

Answer 2

В плагине HTML-CSS-JS Prettify есть параметр, позволяющий игнорировать синтаксис xml в файле js/jsx. Таким образом, это не испортит код jsx. Установка является: "e4x": true в разделе «Js» из файла настроек

Настройки> Пакет Настройки> HTML \ CSS \ JS приукрасить> Set приукрасить Preferences

Это не работает хорошо, если у вас есть закрывающиеся теги например. теги, оканчивающиеся на />

Answer 3

Не специально для Sublime Text, но есть JavaScript в JavaScript для React JSX.

http://prettydiff.com/?m=beautify претендует на поддержку JSX по адресу: http://prettydiff.com/guide/react_jsx.xhtml

Answer 4

Чтобы добавить к тому, что сказал @Shoobah:

Существует установка в плагин HTML-CSS-JS приукрасить, что позволяет игнорировать xml в файле js/jsx. Таким образом, он не испортил код jsx . Установка: "e4x": правда, в разделе "Js" из файла настроек

Перейти к: Настройки> Пакет Настройки> HTML \ CSS \ JS приукрасить> Set приукрасить Предпочтения

Go в разделе «Js»:

Добавить «JSX» в «allowed_file_extension», а затем изменить «ex4» к «истинным»

Answer 5

ответ в Интернете, который всегда говорил вам установить «e4x» в true, , но иногда, мы должны установить опцию «format_on_save_extensions», затем добавить «JSX» в массиве

изменить jsFormat.sublime-настройки

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

Answer 6

Использование пакета установщика возвышенное, установите Babel. Затем:

1. Открыть файл .jsx.
2. Выберите вид из меню,
3. Затем синтаксис -> Открыть все с текущим расширением, ... -> Вавилон -> JavaScript (Babel).

Answer 7

Вы можете установить пакет JsPrettier для Sublime 2 & 3. Это довольно новый JavaScript форматировщик (на момент написания этого: Feb-2017). Он поддерживает большинство последних разработок, таких как ES2017, JSX и Flow.

Quickstart

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

Ссылки:

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