Как отформатировать реагирующий код в visualstudio 2017?

Question

Я обнаружил реакцию и пока не нашел решения для функции автоматического отступа.

Прежде всего у меня сложилось впечатление, что инструменты Microsoft Visual Studio полностью поддерживают реакцию. Но большинство сообщений об инструментах относятся к (бесплатному) коду Visual Studio, когда я работаю в (приобретенном) Visual Studio 2017.

Тогда я не создаю приложение полного реагирования (пока), а просто использую реагировать как библиотеку JS на новой странице.ASPX большого веб-сайта, который я поддерживаю. На самом деле, я сейчас просто проектирую GUI в еще более простой автономной HTML-странице с <script type="text/babel"> раздел. По этой причине я предпочел бы, чтобы все было как можно проще, поэтому я не использую webpack (пока) и не использовал скрипт act_create_app, так как мой одностраничный проект будет хорошо умещаться в одном файле.

Мне бы очень понравился хороший автоматический форматировщик кода. Тем не менее, 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?