是否有用于崇高文本的 JSX 格式化程序? [英] Is there a JSX formatter for sublime text?

问题描述

我使用 Sublime Text 作为文本编辑器.

I'm using Sublime Text as a text editor.

有一种用于格式化 javascript 文件的 jsFormat，但我找不到用于 JSX 的.

There's a jsFormat for formatting javascript files but I can't find one for JSX.

你们是如何处理 JSX 格式的?

How you guys deal with formatting JSX?

推荐答案

更新 4

检查 prettier，不像 esformatter 那样可配置，但目前用于格式化一些大项目(就像 React 本身)

Check prettier, not that configurable as esformatter, but currently used to format some big projects (like React itself)

更新 3

检查 sublime jsfmt.如果您将 esformatter-jsx 添加到配置中并在 forlder 中安装包以实现 sublime-jsfmt.您将能够直接从 Sublime 格式化 JSX 文件.这是一个指南

Check sublime jsfmt. If you add esformatter-jsx to the config and install the package inside the forlder for sublime-jsfmt. You will be able to format JSX files directly from Sublime. Here is a guide for that

更新 2

您还可以从命令行使用 esbeautifier.它是 esformatter 的包装器，它接受要格式化的 glob 列表

from the command line you can also use esbeautifier. It is a wrapper around esformatter that accept a list of globs to format

# 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 文件的格式:

So I ended up doing a plugin for esformatter to enable the formatting of JSX files:

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

这是关于 requirebin 的现场演示

Here is a live demo on requirebin

从 Sublime 传递当前文件作为参数调用 esformatter 应该是可行的.在任何情况下，要从命令行使用它，您都可以按照以下说明进行操作:

It should be somehow feasible to call esformatter from Sublime passing the current file as the argument. In any case to use it from the command line you can follow these instructions:

从命令行可以这样使用:

From the command line it can be used like this:

# 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

So if what you're looking is just to make your jsx files to be formatted while allowing the jsx syntax (basically beautify all the javascript syntax and ignore jsx tags, meaning leave them as is), this is what I'm doing using 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-fb 而不是 esprima 的 rocambole 版本，以避免使用 proxyquire.

I would actually like that esformatter use a version of rocambole that use esprima-fb instead of esprima, to avoid proxyquire.

这篇关于是否有用于崇高文本的 JSX 格式化程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！