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

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

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

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

ОТВЕТЫ

Ответ 1

Обновление 4

Отметьте prettier, а не тот, который настраивается как esformatter, но в настоящее время используется для форматирования некоторых крупных проектов (как и само реагирование)

Обновление 3

Отметьте sublime jsfmt. Если вы добавите esformatter-jsx в конфигурацию и установите пакет внутри forlder для 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

Ниже приведена живая демонстрация по требованию

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

Ответ 2

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

Настройки > Параметры пакетa > HTML\CSS\JS Prettify > Установить префиксные настройки

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

Ответ 3

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

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

Перейдите к: Настройки > Параметры пакетa > HTML\CSS\JS Prettify > Установить Предоставить предварительные настройки

Перейдите в раздел "js":

Добавьте "jsx" в "allowed_file_extension", а затем измените "ex4" на "true"

Ответ 4

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

изменить jsFormat.sublime-settings

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

Ответ 5

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

Quickstart

  • Установите более красивый глобальный терминал: $ npm install -g prettier
  • В Sublime перейдите в Инструменты → Палитра команд... → Управление пакетами: установите пакет, введите слово JsPrettier, затем выберите его, чтобы завершить установку.
  • Отформатируйте файл в контекстном меню внутри редактора или привяжите его к сочетанию клавиш: { "keys": ["super+b"], "command": "js_prettier" }

Ссылки:

Ответ 6

Используя Sublime Package Installer, установите Babel. Тогда:

  • Откройте файл .jsx.
  • Выберите "Вид" в меню,
  • Затем синтаксис → Открыть все с текущим расширением как... → Babel → JavaScript (Babel).