서브슬라이밍 텍스트용 JSX 포메터가 있나요?

서브슬라이밍 텍스트용 JSX 포메터가 있나요?

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

jascript 파일을 포맷하기 위한 jsFormat이 있는데 JSX용 파일을 찾을 수 없습니다.

JSX 포맷은 어떻게 해요?

업데이트 4

esformater로 구성할 수는 없지만 현재 일부 대형 프로젝트(React 자체 등)를 포맷하는 데 사용되므로 더 예쁘게 체크할 수 있습니다.

업데이트 3

Sublime jsfmt를 확인합니다.설정에 esformatter-jsx를 추가하고 sublime-jsfmt용 패키지를 Forlder 내부에 설치하는 경우.Sublime에서 직접 JSX 파일을 포맷할 수 있습니다.여기 안내서가 있습니다.

업데이트 2

명령줄에서 esautifier를 사용할 수도 있습니다.포맷할 글로브 목록을 받아들이는 esformater 주위의 래퍼입니다.

# 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구문(모든 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는 esprima가 아닌 esprima-fb를 사용하는 rocambole 버전을 사용하여 프록시 쿼리를 회피하고 싶습니다.

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

[ Preferences ]> [ Package Settings ]> [ HTML \ CSS \ JS Prettify ]> [ Prettify Preferences ]의 설정

태그가 />로 끝나는 등의 자동 닫힘 태그가 있는 경우 이 작업은 제대로 작동하지 않습니다.

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

퀵 스타트

1. 더 $ npm install -g prettier
2. Sublime에서 Tools -> Command Palette로 이동합니다.-> 패키지 관리:패키지를 설치하고 JsPretier라는 단어를 입력한 다음 이를 선택하여 설치를 완료합니다.
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가 있습니다.

[ Preferences ]> [ Package Settings ]> [ HTML \ CSS \ JS Prettify ]> [ Prettify Preferences ]으로 이동합니다.

"js" 섹션으로 이동합니다.

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

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

jsFormat을 변경합니다.숭고하다

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

Sublime의 패키지 설치 프로그램을 사용하여 Babel을 설치합니다.그 후, 다음과 같이 입력합니다.

1. .jsx 파일을 엽니다.
2. 메뉴에서 [보기]를 선택합니다.
3. 그런 다음 구문 -> 현재 내선번호로 모두 열기...-> Babel -> JavaScript (Babel).

Sublime Text 전용은 아니지만, JavaScript for React JSX에는 미인이 있습니다.

http://prettydiff.com/?m=JSX를 지원한다는 주장을 미화하려면 http://prettydiff.com/guide/react_jsx.xhtml를 방문하십시오.

언급URL : https://stackoverflow.com/questions/27558699/is-there-a-jsx-formatter-for-sublime-text