숭고한 텍스트를위한 JSX 포맷터가 있습니까?

Sublime Text를 텍스트 편집기로 사용하고 있습니다.

javascript 파일 형식화를위한 jsFormat이 있지만 JSX 용을 찾을 수 없습니다.

JSX 포맷을 어떻게 처리합니까?

업데이트 4

확인 예뻐를 (즉 esformatter로 구성 할 수 있지만, 현재 몇 가지 큰 프로젝트를 포맷하는 데 사용되지, 같은 자체 반응 )

업데이트 3

숭고한 jsfmt를 확인하십시오 . esformatter-jsx 를 구성에 추가 하고 sublime-jsfmt의 forlder 내에 패키지를 설치하는 경우. Sublime에서 직접 JSX 파일을 포맷 할 수 있습니다. 여기에 대한 가이드가 있습니다.

업데이트 2

명령 줄에서 esbeautifier 를 사용할 수도 있습니다 . 형식화 할 glob 목록을 허용하는 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*

최신 정보

그래서 JSX 파일의 형식을 활성화하기 위해 esformatter 에 대한 플러그인을 수행했습니다 .

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

다음은 requirebin에 대한 라이브 데모입니다.

Sublime에서 현재 파일을 인수로 전달하여 esformatter 를 호출하는 것이 가능해야합니다 . 어떤 경우에도 명령 줄에서 사용하려면 다음 지침을 따를 수 있습니다.

명령 줄에서 다음과 같이 사용할 수 있습니다.

# 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가 proxyquire를 피하기 위해 esprima 대신 esprima-fb를 사용하는 rocambole 버전을 사용하기를 바랍니다.

HTML-CSS-JS Prettify 플러그인에는 js / jsx 파일의 xml 구문을 무시할 수있는 설정이 있습니다. 그렇게하면 jsx 코드가 엉망이되지 않습니다. 설정은 다음 "e4x": true과 같습니다. 설정 파일의 "js"섹션

기본 설정> 패키지 설정> HTML \ CSS \ JS Prettify> Prettify 기본 설정 지정

예를 들어 자체 닫는 태그가 있으면 제대로 작동하지 않습니다. />로 끝나는 태그

Sublime 2 & 3 용 JsPrettier 패키지를 설치할 수 있습니다. 상당히 새로운 JavaScript 포맷터입니다 (작성 당시 : 2017 년 2 월). ES2017, JSX 및 Flow와 같은 대부분의 최신 개발을 지원합니다.

빠른 시작

1. 터미널을 사용하여 전 세계적으로 더 예쁜 설치 : $ npm install -g prettier
2. Sublime에서 도구-> 명령 팔레트 ...-> 패키지 제어 : 패키지 설치로 이동하고 JsPrettier라는 단어를 입력 한 다음 선택하여 설치를 완료합니다.
3. 편집기 내 컨텍스트 메뉴를 사용하여 파일 형식을 지정하거나 키보드 단축키에 바인딩합니다. { "keys": ["super+b"], "command": "js_prettier" }

연결:

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

@Shoobah가 말한 내용을 추가하려면 :

HTML-CSS-JS Prettify 플러그인에는 js / jsx 파일의 xml 구문을 무시할 수있는 설정이 있습니다. 그렇게하면 jsx 코드가 엉망이되지 않습니다. 설정 : "e4x": 설정 파일의 "js"섹션에서 true

이동 : 기본 설정> 패키지 설정> HTML \ CSS \ JS Prettify> Prettify 기본 설정 지정

"js"섹션으로 이동 :

"allowed_file_extension"에 "jsx"를 추가 한 다음 "e4x"를 "true"로 변경합니다.

인터넷에서 항상 'e4x'를 true로 설정한다고 말했지만 때로는 'format_on_save_extensions'옵션을 설정 한 다음 배열에 'jsx'를 추가해야합니다.

jsFormat.sublime-settings 수정

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

Sublime의 패키지 설치 프로그램을 사용하여 Babel을 설치 합니다. 그때:

1. .jsx 파일을 엽니 다.
2. 메뉴에서보기를 선택하고
3. 그런 다음 Syntax-> Open all with current extension as ...-> Babel-> JavaScript (Babel).

Sublime Text를위한 것은 아니지만 React JSX를위한 JavaScript에는 미화가 있습니다.

http://prettydiff.com/?m=beautify 는 JSX를 지원한다고 주장합니다. http://prettydiff.com/guide/react_jsx.xhtml