vim - 如何更改 VIM 中的 JSX 缩进规则？

Question

目前，我正在使用两个插件在 VIM 中格式化我的 JS(X) 代码:

• pangloss/vim-javascript
• mxw/vim-jsx

我们的团队已经决定，当我们的 React 组件的 props 溢出到多行时，我们希望这些属性与第一行的属性对齐，如下所示:

期望:

<Toggle label={dragString} toggled={this.props.canDrag} onToggle={this.toggleDrag}
        thumbStyle={toggleStyles.thumbOff}
        thumbSwitchedStyle={toggleStyles.thumbOn}
        trackStyle={toggleStyles.trackOff}
        trackSwitchedStyle={toggleStyles.trackOn}
/>

相反，它看起来像 vim-jsx 将始终在新行上仅缩进两个空格(这是我们将制表符大小设置为的值):

实际发生了什么:

<Toggle label={dragString} toggled={this.props.canDrag} onToggle={this.toggleDrag}
  thumbStyle={toggleStyles.thumbOff}
  thumbSwitchedStyle={toggleStyles.thumbOn}
  trackStyle={toggleStyles.trackOff}
  trackSwitchedStyle={toggleStyles.trackOn}
/>

我是否可以在我的 .vimrc 或 vim-jsx 插件代码中进行更改，以使新行上的 React 组件 Prop 与第一行？

Answer 1

在我的例子中，我的 .vimrc 中的这一行已经让 .js 文件的缩进按预期工作:

autocmd FileType javascript setlocal shiftwidth=2 tabstop=2

要在 .jsx 文件中获得类似的行为，我还需要添加:

autocmd FileType javascriptreact setlocal shiftwidth=2 tabstop=2

可以在vim中运行:set filetype来根据vim显示文件类型；在这种情况下 javascriptreact。