如何在VSCode中覆盖react-beautify设置？

Question

4

我有一个React Native项目。在Visual Studio Code中，我使用react-beautify插件来实时美化我的代码。该插件内部使用了一个名为prettydiff的工具。

唯一让我不满意的是它压缩了代码。

import { Componentname } from packagename

到

import {Componentname} from packagename

正确的prettydiff设置以更改这种行为是将brace_style设置为collapse-preserve-inline。但是，我无法让prettydiff接受更改。

我尝试在项目的根目录中创建一个.jsbeautifyrc文件，并添加：

{
    "brace_style": "collapse-preserve-inline"
}

但是这似乎不起作用：我不想要的行为仍在发生。

我该如何正确处理？

- Pekka

你确定“bracepadding”不是你想要的选项吗？ - Mark

你尝试过明确设置配置文件路径吗？（例如react.beautify.configFilePath） - Whymarrh

@Whymarrh 我没有这样做，也不想这样做，因为设置可能因项目而异。我使用 bracepadding 设置成功地让它工作了，见下文。 - Pekka

2个回答

1

是的，存在一个问题，react-beautify 插件似乎没有读取 .jsbeautifyrc 文件。

插件的设置在 安装过程中 提到，但似乎不起作用，我还尝试在系统中安装了 prettydiff 和 esformatter-jsx 并更改了配置，但它 无法读取文件

解决方法

您可以尝试使用以下 beautify 插件，并在此处查看相应的 repo.

请将文件.jsbeautifyrc添加到您的文件树结构中，设置页面中提到的选项将在其中起作用。

该项目已更新为最新的js-beautify代码版本1.6.8，支持jsx支持，如屏幕截图所示。

还有工作示例。

- Pritish Vaidya

我使用@damienfabian提到的bracepadding设置，通过react-beautify让它工作了，所以你提到的错误可能已经被修复了。无论如何，还是非常感谢您的努力！ - Pekka

哦，我还没有尝试过大括号填充！ - Pritish Vaidya

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- damianfabian · Accepted Answer

我在Mac上使用的是VS Code v1.8.1，如果你打开一个带有.jsbeautifyrc文件的文件夹，你可以覆盖属性。例如，在你创建一个包含2个文件的文件夹中：

index.js

import {code} from 'source';
import {otherCode} from 'source';

.jsbeautifyrc

{
  "bracepadding": true
}

运行美化器后，您将获得下一个结果：

import { code } from 'source';
import { otherCode } from 'source';