Có trình định dạng JSX cho văn bản siêu phàm không?

Tôi đang sử dụng Sublime Text làm trình soạn thảo văn bản.

Có một jsFormat để định dạng tệp javascript nhưng tôi không thể tìm thấy một cái cho JSX.

Các bạn xử lý như thế nào với định dạng JSX?

Cập nhật 4

Kiểm tra đẹp hơn , không phải có thể định cấu hình như esformatter, nhưng hiện được sử dụng để định dạng một số dự án lớn ( như chính React )

Cập nhật 3

Kiểm tra jsfmt siêu phàm . Nếu bạn thêm esformatter-jsx vào cấu hình và cài đặt gói bên trong forlder for sublime-jsfmt. Bạn sẽ có thể định dạng tệp JSX trực tiếp từ Sublime. Đây là hướng dẫn cho điều đó

Cập nhật 2

từ dòng lệnh, bạn cũng có thể sử dụng esbeautifier . Nó là một trình bao bọc xung quanh esformatter chấp nhận một danh sách các quả địa cầu để định dạng

# install the dependencies globally
npm i -g esbeautifier

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

Cập nhật

Vì vậy, tôi đã kết thúc việc tạo một plugin cho esformatter để cho phép định dạng tệp JSX:

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

Đây là bản demo trực tiếp trên requestbin

Sẽ khả thi bằng cách nào đó khi gọi esformatter từ Sublime truyền tệp hiện tại làm đối số. Trong mọi trường hợp để sử dụng nó từ dòng lệnh, bạn có thể làm theo các hướng dẫn sau:

Từ dòng lệnh, nó có thể được sử dụng như sau:

# 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

==== câu trả lời cũ bên dưới ===

Vì vậy, nếu những gì bạn đang tìm chỉ là làm cho các tệp jsx của bạn được định dạng trong khi vẫn cho phép jsxcú pháp (về cơ bản làm đẹp tất cả các cú pháp javascript và bỏ qua jsxcác thẻ, nghĩa là giữ nguyên chúng), thì đây là những gì tôi đang làmesformatter

// 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);
});

Tôi thực sự muốn esformatter đó sử dụng phiên bản rocambole sử dụng esprima-fb thay vì esprima, để tránh proxyquire.

Có một cài đặt trong plugin HTML-CSS-JS Prettify cho phép bạn bỏ qua cú pháp xml trong tệp js / jsx. Bằng cách đó, nó không làm rối mã jsx. Cài đặt là: "e4x": truetrong phần "js" của tệp cài đặt

Tùy chọn> Cài đặt gói> HTML \ CSS \ JS Chỉnh sửa trước> Đặt tùy chọn chỉnh sửa trước

Điều này không hoạt động tốt nếu bạn có thẻ tự đóng ví dụ. thẻ kết thúc bằng />

Bạn có thể cài đặt gói JsPrettier cho Sublime 2 & 3. Đây là một trình định dạng JavaScript khá mới (tại thời điểm viết bài này: tháng 2 năm 2017). Nó hỗ trợ hầu hết các phát triển mới nhất như: ES2017, JSX và Flow.

Bắt đầu nhanh

1. Cài đặt đẹp hơn trên toàn cầu bằng cách sử dụng thiết bị đầu cuối: $ npm install -g prettier
2. Trong Sublime, vào Tools -> Command Palette ... -> Package Control: Install Package, gõ từ JsPrettier, sau đó chọn nó để hoàn tất cài đặt.
3. Định dạng tệp của bạn bằng menu ngữ cảnh bên trong trình chỉnh sửa hoặc liên kết tệp với phím tắt: { "keys": ["super+b"], "command": "js_prettier" }

Liên kết:

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

Để thêm vào những gì @Shoobah đã nói:

Có một cài đặt trong plugin HTML-CSS-JS Prettify cho phép bạn bỏ qua cú pháp xml trong tệp js / jsx. Bằng cách đó, nó không làm rối mã jsx. Cài đặt là: "e4x": true trong phần "js" của tệp cài đặt

Đi tới: Tùy chọn> Cài đặt gói> HTML \ CSS \ JS Kiểm tra trước> Đặt Tùy chọn Chỉnh sửa trước

Đi tới phần "js":

Thêm "jsx" vào "allow_file_extension", sau đó thay đổi "e4x" thành "true"

câu trả lời trên internet luôn nói với bạn rằng hãy đặt 'e4x' thành true, nhưng đôi khi, chúng tôi phải đặt tùy chọn 'format_on_save_extensions' rồi thêm 'jsx' vào mảng

sửa đổi jsFormat.sublime-settings

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

Sử dụng Trình cài đặt gói của Sublime, cài đặt Babel . Sau đó:

1. Mở tệp .jsx.
2. Chọn Xem từ menu,
3. Sau đó, Cú pháp -> Mở tất cả với phần mở rộng hiện tại là ... -> Babel -> JavaScript (Babel).

Không dành riêng cho Sublime Text, nhưng có một trình làm đẹp trong JavaScript cho React JSX.

http://prettydiff.com/?m=beautify tuyên bố hỗ trợ JSX tại: http://prettydiff.com/guide/react_jsx.xhtml