【问题标题】:Is there a JSX formatter for sublime text?是否有用于崇高文本的 JSX 格式化程序?
【发布时间】:2015-02-17 22:56:13
【问题描述】:

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

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

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

【问题讨论】:

  • 是的,寻找几乎可以与任何编辑器一起使用的 jsx textmate 包。
  • 它似乎只是一个语法荧光笔,我正在寻找可以识别和排序的格式化程序
  • 我不知道。 React google 小组会是一个更好的提问场所。
  • 也找不到好的解决方案。目前可以使用 esprima-fb 解析源代码,并使用 escodegen-jsx 生成格式化输出。格式化选项是有限的,而且你会失去白线......加上 escodegen-jsx 是一个没有问题跟踪的分支......不确定它是否会被积极维护。我想知道 fb 如何处理他们的 jsx 代码库。
  • esformatter 的 beta 版本似乎有一些格式化 JSX 的能力,因为它使用的是 esprima-fb,但还没有准备好生产

标签: reactjs sublimetext react-jsx


【解决方案1】:

更新 4

检查prettier,不是可以配置成esformatter,但是目前用来格式化一些大项目(like React itself

更新 3

检查sublime jsfmt。如果您将esformatter-jsx 添加到配置中并在forlder 中为sublime-jsfmt 安装包。您将能够直接从 Sublime 格式化 JSX 文件。 Here is a guide for that

更新 2

您也可以在命令行中使用esbeautifier。它是 esformatter 的包装器,接受要格式化的 glob 列表

# 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

这是live demo on 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 语法(基本上美化所有 javascript 语法并忽略 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 使用一个使用 esprima-fb 而不是 esprima 的 rocambole 版本,以避免代理查询。

【讨论】:

  • 这只适用于我的 esformatter-jsx-ignore,但这已经足够了。谢谢!
  • 我正在使用 esformatter-jsx,它按预期工作。但是,我还必须在 Sublime 3 的“Preferences>Package Settings>Sublime JSFMT>Settings - Default”中将“esformatter-jsx”添加到“options”:{“plugins”:{“esformatter-jsx”}}作品
  • 这是一个很好的答案,我用这个工具已经有一段时间了,但是我们已经切换到使用 es6/es7 和 babel 并且它不再工作了。
  • 检查您的 sublime 控制台,在 mac 中打开控制台按 ctrl+` 您可以在 esformatter-jsx 存储库或 JSFMT 存储库中打开一张票,并显示您在控制台中看到的错误
  • prettier 为我完成了这项工作。 sublime 插件在这里 github.com/jonlabelle/SublimeJsPrettier 并且它也有 eslint 支持 github.com/prettier/prettier#eslint 。很高兴这个问题在将近 3 年后终于被接受了。
【解决方案2】:

HTML-CSS-JS Prettify 插件中有一个设置允许您忽略 js/jsx 文件中的 xml 语法。这样它就不会弄乱 jsx 代码。 设置为:"e4x": true在设置文件的“js”部分

首选项 > 包设置 > HTML\CSS\JS Prettify > 设置 Prettify 首选项

如果您有自闭合标签,例如,这将无法正常工作。以 /> 结尾的标签

【讨论】:

  • 这仍然适用于最新版本的 babel-sublime 和 HTML-CSS-JS Prettify。只需确保将“jsx”或您使用的任何文件扩展名添加到“allowed_file_extensions”即可。
  • 这个答案过时了吗?我的代码里没有/>,但是还是不行
  • prettier (aka jsprettier) for sublime 是迄今为止最好的!请参阅下面的答案:stackoverflow.com/a/42169688/2178112
【解决方案3】:

您可以为 Sublime 2 和 3 安装 JsPrettier 包。它是一个相当新的 JavaScript 格式化程序(在撰写本文时:2017 年 2 月)。它支持大多数最新开发,例如:ES2017、JSX 和 Flow。

快速入门

  1. 使用终端全局安装prettier:$ npm install -g prettier
  2. 在 Sublime 中转到 Tools -> Command Palette... -> Package Control: Install Package,输入单词 JsPrettier,然后选择它以完成安装。
  3. 使用编辑器内的上下文菜单格式化文件或将其绑定到键盘快捷键:{ "keys": ["super+b"], "command": "js_prettier" }

链接:

【讨论】:

  • 这是迄今为止最好的答案!漂亮就是炸弹!
  • 是的,确实,这对我来说也很完美。最需要注意的是“全局”部分。
【解决方案4】:

补充@Shoobah 所说的内容:

HTML-CSS-JS Prettify 插件中有一个设置允许您 忽略 js/jsx 文件中的 xml 语法。这样就不会乱了 jsx 代码。设置为: "e4x": true 在 "js" 部分 设置文件

转到:首选项 > 包设置 > HTML\CSS\JS Prettify > 设置 美化偏好

转到“js”部分:

将“jsx”添加到“allowed_file_extension”,然后将“e4x”改为“true”

【讨论】:

    【解决方案5】:

    互联网上总是告诉你将'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",...]
    • 您可以在此处找到它:首选项 > 包设置 > jsFormat > 设置 - 用户。不过对我不起作用,仍然奇怪地缩进 JSX :(
    • 一直在寻找解决方案,这个解决了我的问题,谢谢!
    【解决方案6】:

    使用 Sublime 的 Package Installer,安装 Babel。那么:

    1. 打开一个 .jsx 文件。
    2. 从菜单中选择查看,
    3. 然后语法 -> 以当前扩展名打开所有... -> Babel -> JavaScript (Babel)。

    【讨论】:

    • 还有一个JSX语言包可以使用
    【解决方案7】:

    不是专门针对 Sublime Text,但在 JavaScript 中有一个美化器用于 React JSX。

    http://prettydiff.com/?m=beautify 声称支持 JSX: http://prettydiff.com/guide/react_jsx.xhtml

    【讨论】:

      猜你喜欢
      • 2016-09-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-04-08
      • 2015-12-09
      • 1970-01-01
      • 2015-07-13
      • 1970-01-01
      相关资源
      最近更新 更多