我的 vim 设置可以加速我的 Electron 和 React Native 应用程序的 JavaScript 编码

你好，我是Takuy​​a。

我正在开发一款名为Inkdrop的 Markdown 笔记应用。
它在桌面和移动设备上都能流畅运行——macOS、Windows、Linux、iOS 和 Android。
这是因为我的应用桌面端使用了 Electron 构建，移动端使用了 React Native 构建。
所以，我基本上是用 JavaScript 编写的。

在本文中，我想分享我使用 vim 编写 JavaScript 代码的工作流程。
我不使用像 VSCode 这样的 IDE，而是更喜欢在终端上操作。
我使用 Neovim 和 tmux。
我在这里 介绍了我在终端上的基本工作流程。
我将更详细地解释我的 vim 设置。
我的点文件发布在GitHub 上 这里。

插件

以下是我使用的插件：

• dein.nvim用于管理插件
• coc.nvim用于自动完成、导入和类型定义
• defx.nvim用于探索文件
• denite.nvim用于搜索文件
• 蒋苗/自动配对用于成对插入括号、括号、引号

dein.nvim - 插件管理

我使用dein.nvim来安装/更新插件。你可以在dein.toml 文件
中定义要使用的插件：

[[plugins]]
repo = 'Shougo/dein.vim'

[[plugins]]
repo = 'Shougo/defx.nvim'
depends = ['defx-git', 'defx-icons']
hook_add = """
source ~/.config/nvim/plugins/defx.rc.vim
"""

[[plugins]]
repo = 'Shougo/denite.nvim'
hook_add = """
source ~/.config/nvim/plugins/denite.rc.vim
"""

[[plugins]]
repo = 'jiangmiao/auto-pairs'

[[plugins]]
repo = "neoclide/coc.nvim"
merge = 0
rev = "release"
hook_add = """
source ~/.config/nvim/plugins/coc.rc.vim
"""

这是另一个名为dein_lazy.toml的 toml 文件：

[[plugins]]
repo = 'elzr/vim-json'
on_ft = ['json']

[[plugins]]
repo = 'yuezk/vim-js'
on_ft = ['javascript', 'javascript.jsx']

[[plugins]]
repo = 'maxmellon/vim-jsx-pretty'
on_ft = ['javascript', 'javascript.jsx']

此文件包含根据文件类型按需加载的插件。
例如，vim-json只有打开 json 文件时才会加载插件。
这样，vim 就可以避免加载不必要的插件。
因此，您可以保持 vim 快速启动和运行。
在这个文件中，我编写了常用文件类型的插件。

coc.nvim - 智能感知

coc.nvim是C onquer o of C ompletion 的缩写。
它是一个为你的 vim 环境提供智能感知的插件。
例如，它提供了自动补全、自动导入、类型定义等 IDE 通常支持的功能，非常实用。

假设你有一个类似这样的 TypeScript：

type Note = {
  _id: string,
  body: string,
  title: string,
  createdAt: number,
  updatedAt: number,
  tags: [string]
}

const note: Note = {
  _id: 'hige',
  body: '# hello',
  title: 'example note',
  createdAt: 'moji'
}
console.log('note:', note)

所以现在，createdAt 应该是数字。
但是如果你错误地将字符串设置为该属性，它会告诉你这是错误的：

它告诉你应该是数字，而不是字符串。coc.nvim
会为你做这样的事情。

它还提供如下自动完成功能：

正如您所见，它通过显示带有类型定义的工具提示来帮助您。

它对函数也很有效。
你有另一个名为“hoge”的 ts 文件，其中包含 Book 和一个名为 的函数getThingsDone。
然后，你想写入getThingsDone，然后你输入getThin，就成功了。

它还会像这样显示定义和描述。
然后你说“好的，让我们插入它”。
然后，它会自动插入一个导入语句。

import {getThingsDone} from './hoge'  // imported automatically

getThingsDone(hoge)

这非常整洁，很有用。

当你想查看类型定义时，我配置了shift-K一个键来显示定义。
当你输入 时shift-K，它会在工具提示中显示定义。
所以，即使你不记得类型，它也能快速告诉你光标下是什么类型。

除此之外，如果您没有从工具提示中获取详细信息，而想要查看详细信息，
请按gd，这意味着“转到定义”。
然后，您可以跳转到类型定义的位置。
键入ctrl-o即可返回。
如果类型定义与该定义位于同一文件中，它会将光标移动到定义处，就像这样。

所以，coc.nvim 提供了这样的编码辅助工具。
它非常强大且实用。我推荐它。

在这个例子中，我演示了使用 TypeScript，但我实际上是在为我的产品编写 FlowJS。
不过 coc.nvim 与 FlowJS 配合得很好。
比如，这是 Inkdrop 的笔记模块。
正如你所见，它运行良好……虽然不如 TypeScript 好，但也还不错，比如 GoToDefinition、
自动补全……嗯……不太好。

但无论如何，它还是有用的。
说实话，我想尽快从 FlowJS 切换到 TypeScript。
但我的代码库太庞大了，切换起来很困难。
所以，目前我不太情愿继续使用 FlowJS。

这是 coc.nvim 的配置。
重点是扩展（.config/nvim/plugins/coc.rc.vim）。
我安装了 4 个扩展。

" Extensions
let g:coc_global_extensions = [
  \ 'coc-json',
  \ 'coc-tsserver',
  \ 'coc-prettier',
  \ 'coc-eslint',
  \ ]

如果你使用 TypeScript，请安装coc-tsserver扩展。
我使用了一个用于 json 文件、Prettier 和 eslint 的辅助扩展。

您获得了另一个配置文件。它是coc-settings.json：

{
  "coc.preferences.formatOnSaveFiletypes": ["json", "css", "markdown"],
  "eslint.autoFixOnSave": true,
  "eslint.autoFix": true,
  "tsserver.enableJavascript": false,
  "languageserver": {
    "flow": {
      "command": "flow",
      "args": ["lsp"],
      "filetypes": ["javascript", "javascriptreact"],
      "initializationOptions": {},
      "requireRootPattern": true,
      "settings": {},
      "rootPatterns": [".flowconfig"]
    }
  },
  ...
}

如果您使用 flowjs，则必须像这样配置 languageserver。Flow
支持 languageserver 协议。因此，您可以使用它。
如果您同时使用 TypeScript 和 FlowJS，则必须设置"tsserver.enableJavascript": false，以便在编辑 js 文件时禁用 TypeScript。

就是这样。

defx.nvim - 文件管理器

我每次需要时都会打开一个文件器，因为我不喜欢在窗口左侧一直显示文件树。

然后，选择一个文件打开。
我使用的文件名是defx.nvim。
我给它分配了sfkey。

配置文件如下所示。

nnoremap <silent>sf :<C-u>Defx -listed -resume
      \ -columns=indent:mark:icon:icons:filename:git:size
      \ -buffer-name=tab`tabpagenr()`
      \ `expand('%:p:h')` -search=`expand('%:p')`<CR>
nnoremap <silent>fi :<C-u>Defx -new `expand('%:p:h')` -search=`expand('%:p')`<CR>

我猜这些都是从 readme 里复制过来的。
你可以像这样打开文件树，
浏览目录，查找组件，诸如此类……用类似 vim 的键盘操作。

如果你修改了某个文件，它会显示“ M ”标签，就像你在这里看到的一样，这表示该文件已被修改。
作为一款文件管理器，它做得非常出色。我非常喜欢它。

当然，您可以在文件管理器中管理文件。

• 创建新文件：shift-N
• 删除文件：D
• 重命名文件：R

字体

你可能会在我的终端里看到一些图标，比如 JavaScript、文件夹等等，这是因为我使用了Nerd Fonts
字体。 这款字体自带了很多图标，比如 Font Awesome、Devicons、Weather Icons、Seti UI 等等。 这样你就可以在终端上显示这些图标了。

denite.nvim - 搜索

为了在项目中搜索文件，我使用denite.nvim。
这个插件本身不提供搜索功能，但我配置了它来实现此功能。
配置信息在这里。

例如，我的 Inkdrop 项目中有一堆文件。
要搜索文件，请按;f，然后会弹出搜索窗口。

当你输入“editor”之类的关键字时，它会快速搜索与该关键字匹配的文件，
然后你就可以快速打开它。

如果要使用模式 grep 文件内容，请按;r。
如果输入“Notebook”之类的关键字，它会查找出现该关键字的位置的文件。

除此之外，您还可以通过输入关键词进行筛选，例如import，这样您就只能看到包含关键词的项目。
因此，如果您的项目中有很多文件，您可以随时快速找到文件和位置。

好吧，虽然很难详细地说出我是如何配置 denite.nvim 的......
这是 grep 和 search 的键盘映射：

nnoremap <silent> ;r :<C-u>Dgrep<CR>
nnoremap <silent> ;f :<C-u>Denite file/rec<CR>

该Dgrep命令定义如下：

" Ag command on grep source
call denite#custom#var('grep', 'command', ['ag'])
call denite#custom#var('grep', 'default_opts', ['-i', '--vimgrep'])
call denite#custom#var('grep', 'recursive_opts', [])
call denite#custom#var('grep', 'pattern_opt', [])
call denite#custom#var('grep', 'separator', ['--'])
call denite#custom#var('grep', 'final_opts', [])
" grep
command! -nargs=? Dgrep call s:Dgrep(<f-args>)
function s:Dgrep(...)
  if a:0 > 0
    execute(':Denite -buffer-name=grep-buffer-denite grep -path='.a:1)
  else
    let l:path = expand('%:p:h')
    if has_key(defx#get_candidate(), 'action__path')
      let l:path = fnamemodify(defx#get_candidate()['action__path'], ':p:h')
    endif
    execute(':Denite -buffer-name=grep-buffer-denite -no-empty '.join(s:denite_option_array, ' ').' grep -path='.l:path)
  endif
endfunction

它实际上做的是运行一个名为ag的外部程序。
这是一个注重速度的代码搜索工具。
然后，该命令会根据上下文添加参数来搜索文件。
这非常简洁。

自动配对

然后，说到小细节，我更喜欢使用auto-pairs插件。
顾名思义，这个插件可以自动插入括号。
如果你输入左括号，它会自动关闭括号。
它也适用于双引号。即使你删除了字符，它也会删除引号对。
它对单引号、方括号、花括号和普通括号都适用。
它提高了我的打字速度。

差不多就是这样了！
希望它能对你的终端工作流程有所帮助。

• 在Twitter和Instagram上关注我
• Inkdrop - Markdown 笔记应用