如何在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 总是会在新行上缩进 props，并且只有两个空格 (这是我们设定的制表符大小)：

实际发生的情况：

<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 组件的属性在新行中与第一行上的属性对齐？

- piercebot

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。

- soulshake

Answer 2

很遗憾，没有简单的方法来实现这一点。在Vim中，缩进是通过调用存储在indentexpr设置中的“缩进表达式”来完成的。您插件中用于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项目上开一个问题，并要求他们实现这个功能，可能还有一个设置来打开或关闭它。另一种选择是自己进行分支并尝试应用您的解决方法，但需要准备一些时间和精力。

- Andrew Radev

Answer 3

虽然已经过去了几年，但我想更新一下这篇文章。我们一直在使用Prettier来自动格式化我们的代码，并且它可以正确地对齐JSX属性。

在VIM中让它格式化的解决方法是添加Neoformat插件并将以下内容附加到我的.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']

现在每次我保存文件（:w），我的所有JS(X)代码都将被正确格式化。

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

- piercebot