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

Question

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

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 组件道具与第一行上的道具对齐？

Answer 1

不幸的是，没有简单的方法可以做到这一点。在 Vim 中，缩进通过调用存储在 indentexpr 设置中的 "indent expression" 来工作。在您的插件中为 JSX 执行此操作的文件位于：https://github.com/mxw/vim-jsx/blob/eb656ed96435ccf985668ebd7bb6ceb34b736213/after/indent/jsx.vim

他们定义了一个名为 GetJsxIndent 的函数，它要么委托给 XML 缩进，要么委托给 JS 缩进，或者做一些稍微不同的事情。他们的特殊覆盖在这里：https://github.com/mxw/vim-jsx/blob/eb656ed96435ccf985668ebd7bb6ceb34b736213/after/indent/jsx.vim#L92-L102

理论上，您可以在该区域进行自己的更改，检查属性在 <Toggle 行中的起始位置并与这些属性对齐，但它最终可能比乍看起来要复杂得多.例如，如果当前行是 />，它们将缩进减少一个 shiftwidth。对于您提议的更改，这将行不通 - /> 无法查看上一行，它必须找到它的起始 <.

我的建议是在 vim-jsx 项目上提出一个问题并要求他们实现它，可能需要设置打开或关闭它。另一种方法是自己分叉并尝试应用您的解决方法，但要做好准备，这会花费一些时间和精力。

Answer 2

想要更新这个 post，尽管已经有几年了。我们一直在为 auto-formatting 我们的代码使用 Prettier，它负责正确对齐 JSX 属性。

将其格式化为 VIM 的修复方法是使用 Neoformat Plugin 添加并将以下内容附加到我的 .vimrc 文件中：

autocmd BufWritePre *.js Neoformat
autocmd FileType javascript setlocal formatprg=prettier\ --stdin\ --parser\ flow
let g:neoformat_try_formatprg = 1 " Use formatprg when available
let g:neoformat_enabled_javascript = ['prettier-eslint', 'prettier']
let g:neoformat_enabled_json = ['prettier-eslint', 'prettier']
let g:neoformat_enabled_css = ['prettier-eslint', 'prettier']
let g:neoformat_enabled_less = ['prettier-eslint', 'prettier']

我所有的 JS(X) 代码现在每次保存文件时都会正确格式化 (:w)

我对这个解决方案非常满意，因为它消除了必须手动格式化代码的认知负担。

Answer 3

就我而言，我的 .vimrc:

中的这一行已经使 .js 文件的缩进按预期工作

autocmd FileType javascript setlocal shiftwidth=2 tabstop=2

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

autocmd FileType javascriptreact setlocal shiftwidth=2 tabstop=2

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

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

How to change JSX indentation rules in VIM?

vim

jsx

期望：

实际发生了什么：