Question

我发现反应并且我找不到自动缩进功能的解决方案。

首先，我的印象是Microsoft Visual Studio工具完全支持反应。但是，当我在（购买的）Visual Studio 2017中工作时，大多数关于工具的帖子都会引用（免费）Visual Studio 代码。

然后我还没有创建一个完整的反应应用程序，但仅仅在我正在维护的大型网站的新.ASPX页面中使用react作为JS库。实际上，我现在只是在一个更简单的独立HTML页面中设计GUI，其中<script type="text/babel">部分。出于这个原因，我更喜欢让事情变得尽可能简单，所以我没有使用webpack（还没有）并且没有使用react_create_app脚本，因为我的1页项目很适合放在一个文件中。

我真的会受益于一个不错的自动代码格式化程序。但是，VS2017往往会搞砸格式而不是支持我。

示例1

我输入文件foo.html：

<script type="text/babel">
    class Samples extends React.Component {
       constructor(props){
         super(props)
         this.state = { samples: _samples }
       }

VS2017格式化为我发现错误的东西：

<script type="text/babel">
    class Samples extends React.Component {
    constructor(props){
    super(props)
    this.state = { samples: _samples }
    }

示例2

我输入了相同的文件foo.html和相同的text/babel部分：

<div>
    <span className="icon_add" onClick={ ()=> this.onClick('add_am', sample.AM.MonsterId, '') }>
        <a href="#" title="Monster toevoegen" className="glyphicon glyphicon-plus"></a>
    </span>

我希望自动缩进能够将整个onclick属性保持在一起：

<div>
    <span className="icon_add" 
          onClick={ ()=> this.onClick('add_am', sample.AM.MonsterId, '') }>
        <a href="#" title="Monster toevoegen" className="glyphicon glyphicon-plus"></a>
    </span>

VS2017在最内层部分进行换行缩进：

<div>
    <span className="icon_add" onClick={ ()=>
        this.onClick('add_am', sample.AM.MonsterId, '') }>
        <a href="#" title="Monster toevoegen" className="glyphicon glyphicon-plus"></a>
    </span>

我的问题是我对自动缩进的期望是否过高。我应该更好地关闭文本/ babel的自动缩进吗？（比如这里：https://github.com/Microsoft/TypeScript/issues/21139）

或者我还不知道VS2017的简单扩展是否可以使用React / Babel / JSX代码更轻松地工作？

如何在visualstudio 2017中格式化反应代码？

0 个答案: