所需：

<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设置中的“缩进表达式”来工作。在插件中为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行开始的位置并与之对齐，但最终可能比初看起来要复杂得多。例如，如果当前行为/>，它们会通过单个移位宽度减少缩进。如果您提议进行更改，则无效 - />无法查看上一行，必须找到其起始位置<。

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

Answer 2

对于我来说，我的.js中的这一行已经可以按预期使用.vimrc文件进行缩进：

autocmd FileType javascript setlocal shiftwidth=2 tabstop=2

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

autocmd FileType javascriptreact setlocal shiftwidth=2 tabstop=2

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

Answer 3

即使已经几年了，也想更新这篇文章。我们一直在使用Prettier自动格式化代码，并负责正确对齐JSX属性。

使用Neoformat Plugin添加将其格式化为VIM的解决方法，并将以下内容附加到我的.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）代码现在都将正确格式化

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

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

所需：

实际发生了什么：

3 个答案: