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


91

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

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

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


Да, ищите пакет jsx textmate, который можно использовать практически с любым редактором.
Brigand

это похоже только на подсветку синтаксиса, я ищу средство форматирования, которое выполняет идентификацию и что-то вроде этого
фин

2
Я не знаю ни одного. Лучше спросить в группе response google.
Brigand

тоже не могу найти хорошего решения. В настоящее время можно анализировать источник с помощью esprima-fb и использовать escodegen-jsx для создания форматированного вывода. Параметры форматирования ограничены, и вы теряете белые линии ... плюс escodegen-jsx - это форк без отслеживания проблем ... не уверен, будет ли он активно поддерживаться. Интересно, как fb справляется со своей базой кода jsx.
user1600124 08

бета-версия esformatter, похоже, имеет некоторую возможность форматирования JSX, потому что она использует esprima-fb, но еще не готова к производству
фин

Ответы:


60

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


1
У меня это работало только с esformatter-jsx-ignore, но этого достаточно. Благодарность!
Джаспер

Я использую esformatter-jsx, и он работает так, как я ожидал. Однако мне также пришлось добавить "esformatter-jsx" в "options": {"plugins": {"esformatter-jsx"}} в "Preferences> Package Settings> Sublime JSFMT> Settings - Default" в Sublime 3, чтобы сделать это работает
Kuma

Это отличный ответ, я использую этот инструмент уже некоторое время, но мы перешли на использование es6 / es7 с babel, и он больше не работает.

1
проверьте свою возвышенную консоль, в Mac, чтобы открыть консоль, нажмите ctrl + `, вы можете открыть билет в репозитории esformatter-jsx или в репозитории JSFMT с ошибкой, которую вы видите в консоли
Рой Риохас

2
prettier делает работу за меня. sublime plugin здесь github.com/jonlabelle/SublimeJsPrettier, а также имеет поддержку eslint github.com/prettier/prettier#eslint . Рад, что этот вопрос наконец принят спустя почти 3 года.
Фин

57

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

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

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


1
Это по-прежнему хорошо работает с последними версиями babel-sublime и HTML-CSS-JS Prettify. Просто убедитесь, что вы добавили «jsx» или любое другое расширение файла, которое вы используете, в «allowed_file_extensions».
черт 01

Этот ответ устарел? />
Энди Дарвин

2
prettier (aka jsprettier) для возвышенного, безусловно, лучший !! См. Ответ ниже: stackoverflow.com/a/42169688/2178112
majorBummer

20

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

Быстрый старт

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

Ссылки:


1
На данный момент это, безусловно, лучший ответ! красивее да бомба!
majorBummer

1
Да, действительно, у меня это тоже сработало идеально. Самая важная вещь, на которую следует обратить внимание, - это «глобальная» часть.
Ionut Necula

19

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

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

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

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

Добавьте «jsx» в «allowed_file_extension», а затем измените «e4x» на «true»


16

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

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

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

Я сделал, как вы сказали, но у меня это не сработало. :(
Яш Векария

Где находится "jsFormat.sublime-settings" ? так что я могу изменить "format_on_save_extensions": ["js", "json", "jsx"]. Ближайшее, что я нашел о расширениях файлов, это:"js": { "allowed_file_extensions": ["js", "json",...]
Chris 22,

Вы можете найти его здесь: Настройки> Настройки пакета> jsFormat> Настройки - Пользователь. У меня не получилось, JSX все еще странно отступает :(
Никлас

Искали решение, и это решило мою проблему, спасибо!
Аль-Маамари Тарек,

4

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

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

Также можно использовать языковой пакет JSX
TabsNotSpaces

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.