Есть ли форматер JSX для sublime text?

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

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

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

7 ответов


обновление 4

Регистрация красивше, не настраивается как esformatter, но в настоящее время используется для форматирования некоторых больших проектов (как сама реагируешь)

обновление 3

Регистрация возвышенный 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

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


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

Настройки > настройки пакета > HTML\CSS\JS Prettify > установить настройки Prettify

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


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

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

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

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

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


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

краткое руководство

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

ссылки:


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

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

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

используя установщик пакетов Sublime, установите Бабель. Затем:

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

не специально для возвышенного текста, но есть украшатель в JavaScript для React JSX.

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