vim 设置web开发_（Neo）vim进行现代Web开发指南

vim 设置web开发

by Caleb Taylor

迦勒·泰勒(Caleb Taylor)

(Neo)vim进行现代Web开发指南 (A guide to modern Web Development with (Neo)vim)

There are a lot of great editors out there that provide a ton of features for web development. Recreating those features in Vim has always been a challenge. I love Vim, but I’ve also dedicated a ton of time to tweaking my setup. This article is a summary of the result of my work.

有很多很棒的编辑器为Web开发提供了大量功能。 在Vim中重新创建这些功能一直是一个挑战。 我喜欢Vim的，但我也奉献了大量的时间来调整我的设置。 本文是我工作成果的总结。

I use coc.nvim and denite to power my coding experience. Denite is used to fuzzy find files, manage open files, and search your project. Coc.nvim drives the intellisense engine by wrapping many of the same core extensions that drive the VSCode IDE. For my full setup, including how I configure these plugins and more, check out my dotfiles.

我使用coc.nvim和denite来增强我的编码经验。 Denite用于模糊查找文件，管理打开的文件以及搜索项目。 Coc.nvim通过包装许多驱动VSCode IDE的相同核心扩展来驱动智能感知引擎。 对于我的完整设置(包括如何配置这些插件等)，请查看我的dotfiles 。

Note: I’ll just reference Vim in this article, but I actually use Neovim. The plugins all work with Vim as well — depending on the version — but things like the “floating window” feature will be specific to Neovim.

注意 ：在本文中，我仅引用Vim，但实际上我使用Neovim 。 这些插件也都可以与Vim一起使用-取决于版本-但“浮动窗口”功能将特定于Neovim。

介绍 (Intro)

I write TypeScript/JavaScript on a daily basis, and I know how stark the difference is between Vim and an editor like VSCode out of the box. There are many features available in modern editors that take time, expertise, and/or plugins to achieve in Vim.

我每天都写TypeScript / JavaScript，而且我知道Vim和开箱即用的VSCode之类的编辑器之间有多么明显的区别。 现代编辑器提供了许多功能，这些功能需要时间，专业知识和/或插件才能在Vim中实现。

I’ve created the following list of features that I expect out of a modern editor. Standard editor features (like syntax highlighting) aren’t included.

我创建了我希望现代编辑器提供的以下功能列表。 不包括标准编辑器功能(例如语法突出显示)。

1. Fuzzy File Finding — If you know the file name in the project, you should be able to open it quickly (such as — two keystrokes + minimum number of characters to unique filename).

   模糊文件查找 -如果您知道项目中的文件名，则应该能够快速打开它(例如-两次击键+唯一文件名的最小字符数)。

2. File Switching — You should be able to see open files, and quickly switch between open files, both with fuzzy finding and manual browsing.

   文件切换 -您应该能够查看打开的文件，并可以通过模糊查找和手动浏览在打开的文件之间快速切换。

3. Linting — Code linting should be automatic and fast, and you should be able to use a code fixer.

   整理 -代码整理应该是自动的 并且速度很快，您应该可以使用代码修复程序。

4. Project Searching — You should be able to search for an arbitrary string, search for a symbol, find definitions, and find usages of a symbol.

   项目搜索 -您应该能够搜索任意字符串，搜索符号，查找定义以及查找符号的用法。

5. Code Intellisense — Having your IDE provide relevant, seamless suggestions and auto-completions can be a huge boost to productivity. In my opinion, the “white whale” for most Vim users.

   Code Intellisense —让您的IDE提供相关的无缝建议和自动完成功能可以极大地提高生产力。 我认为，这是大多数Vim用户的“白鲸”。

Getting all of these things working in Vim can be a pain. There are tons of plugins to choose from, configurations to tweak, and docs to read. After 7 years of trial and error, I’ve finally got my setup to a great place. The best part?

让所有这些东西在Vim中运行可能会很痛苦。 有大量的插件可供选择，可以进行配置调整，还可以阅读文档。 经过7年的反复试验，我终于将设备安装到了一个很棒的地方。 最好的部分？

I’m going to show you how to get all of the core functionality with just two plugins.

我将向您展示如何仅用两个插件来获得所有核心功能。

I won’t be covering every feature of these awesome plugins, or listing all the possible alternatives (and there are a lot of great ones). I will focus on highlighting the core functionality I use, as well as any mappings or configurations I use to elevate the experience.

我不会介绍这些很棒的插件的所有功能，也不会列出所有可能的选择(并且有很多很棒的选择)。 我将重点介绍我使用的核心功能以及我用来提升体验的任何映射或配置。

So without further ado, let’s get to it.

因此，事不宜迟，让我们开始吧。

丹尼特 (Denite)

What you get: Fuzzy file finding, file management, project searching

您将获得：模糊文件查找，文件管理，项目搜索

I’m not going to lie, Denite is pretty insane. Just take a look at the docs. At a basic level, it provides a fuzzy-finding layer on top of a bunch of core functionality. It was built by the legendary Shougo, a Jedi master of Vim.

我不会说谎， Denite太疯狂了。 只是看看文档 。 从根本上讲，它在一系列核心功能之上提供了一个模糊查找层。 它由传奇的Vim绝地大师Shougo建造。

Denite is built on lambdalisue/neovim-prompt. It has a full-featured interface that can take a while to get used to. You can create custom menus, and use many custom sources with Denite as a layer on top.

Denite建立在lambdalisue / neovim-prompt上 。 它具有功能齐全的界面，可能需要一段时间才能习惯。 您可以创建自定义菜单，并使用Denite作为顶层的许多自定义源。

基本 (Basics)

I primarily use Denite for finding files in my project, and managing my open files. I have configured Denite to use ripgrep to power my searching. You can see how I’ve configured it in my setup.

我主要使用Denite在项目中查找文件以及管理打开的文件。 我已将Denite配置为使用ripgrep来增强搜索功能。 您可以查看我如何在设置中对其进行配置。

I have all of key features mapped for quick and easy access. The keys I use for these mappings are just personal preference, and should be customized per user. I use the “floating window” option for my Denite mappings, but other variations are supported as well (like horizontal/vertical splits).

我已经映射了所有关键功能，以便快速，轻松地访问。 我用于这些映射的键只是个人喜好，应针对每个用户进行自定义。 我为Denite映射使用“浮动窗口”选项，但也支持其他变化形式(如水平/垂直拆分)。

管理打开的文件 (Managing Open Files)

; brings up a list of currently open files. You can start typing and it will allow you to fuzzy-search through your current open files. With the file list open,<ctrl>o lets you browse the list like you are in normal mode, where you can open and/or delete any files from the list.

; 弹出当前打开的文件列表。 您可以开始键入内容，这将使您可以模糊搜索当前打开的文件。 打开文件列表后， <ctr l> o可以让您像re in普通模式下一样浏览列表，在其中可以打开和/或删除列表中的任何文件。

模糊查找文件 (Fuzzy Finding Files)

<leader>t fuzzy-searches files in the current directory. With ripgrep, any files in your .gitignore are also ignored.

<leade R>吨在当前目录中的模糊的搜索文件。 使用ripgrep时， your .git忽略文件中your .git所有文件也会被忽略。

项目搜寻 (Project Searching)

<leader>g and <;leader>j search the entire project for a given term, and searching the term under cursor, respectively.

<leade r> g and < ; leader> j在整个项目中搜索给定术语，并分别在光标下搜索术语。

组态 (Configuration)

Denite can be a pretty tough tool to wrap your head around. It’s well documented, but it does reference some concepts that may be unfamiliar to most users. All of my Denite configurations are documented in my setup, so you should be able to use it as a reference. Here’s a quick sample of configuring the base options of Denite for things like customizing highlight groups and layouts.

Denite可能是缠住您的头的相当困难的工具。 它有充分的文档记录，但确实引用了一些大多数用户可能不熟悉的概念。 我的所有Denite配置都记录在我的设置中，因此您应该可以将其用作参考。 这是一个配置Denite基本选项的快速示例，用于自定义高亮组和布局。

病毒 (Coc.nvim)

What you get: Intellisense code engine, auto-completion, linting, code fixing

您将获得什么： Intellisense代码引擎，自动完成，整理，代码修复

One of the biggest challenges with modern development in Vim is setting up intellisense code completion. Most modern editors like Visual Studio Code come with intellisense engines built in, or easily available with a plugin (with minimal setup).

Vim的现代开发面临的最大挑战之一是设置智能感知代码完成 。 像Visual Studio Code这样的大多数现代编辑器都内置有智能感知引擎，或者很容易通过插件使用(设置最少)。

I have tried a few solutions, and coc.nvim is the best I’ve used. It comes with several major features that are the crux of bringing Vim to the same level as modern IDEs.

我尝试了一些解决方案，而coc.nvim是我使用过的最好的解决方案。 它具有几个主要功能，这是将Vim提升到与现代IDE相同水平的关键。

There are a few main reasons I think it’s one of the better solutions to intellisense in Vim:

我认为这是Vim中更好的智能感知解决方案之一，其原因如下：

1. It was incredibly easy to setup, and immediately worked with both my TypeScript and JavaScript projects.

   它非常容易设置，并且可以立即与我的TypeScript和JavaScript项目一起使用。

2. It’s built upon language servers, which power intellisense in many modern editors.

   它基于语言服务器构建，这些语言服务器在许多现代编辑器中都提供了智能感知功能。

3. Language server extensions like coc-tsserver are built on top of the TypeScript/JavaScript code extension that is built into VSCode. So as VSCode server extensions improve, Vim users can benefit as well.

   语言服务器扩展(例如coc-tsserver)建立在VSCode内置的TypeScript / JavaScript代码扩展的基础上。 因此，随着VSCode服务器扩展的改进，Vim用户也可以从中受益。

基本 (Basics)

Getting coc.nvim up and running is very straightforward. Once you follow the installation instructions, you can install language server extensions by running :CocInstall .

启动和运行coc.nvim非常简单。 遵循安装说明后 ，您可以通过运行:CocInstall来安装语言服务器扩展。

For example, in my current web-based projects, I can have a fully-functioning intellisense engine for most modern TypeScript/JavaScript projects by running:

例如，在我当前的基于Web的项目中，我可以通过运行以下命令来为大多数现代TypeScript / JavaScript项目提供功能全面的智能感知引擎：

:CocInstall coc-tsserver coc-eslint coc-json coc-prettier coc-css

LSP扩展 (LSP Extension)

This is core of coc.nvim experience. With a language server extension like coc-tsserver, you get a ton of features. I’ll highlight a few:

这是coc.nvim经验的核心。 使用像coc-tsserver这样的语言服务器扩展，您将获得大量功能 。 我将重点介绍以下几点：

• Code completion support
  代码完成支持
• Go to definition
  转到定义
• Find references
  查找参考
• Signature help
  签名帮助
• Code validation
  代码验证
• Support for Javascript & TypeScript and JSX/TSX
  支持Javascript＆TypeScript和JSX / TSX

By default, you get fast, automatic code completion. Types are automatically imported, and you can see function signatures and relevant code completions as you type.

默认情况下，您将获得快速的自动代码完成。 类型是自动导入的，键入时可以看到函数签名和相关的代码完成。

I have a few key mappings set up to quickly utilize a few key features of the language server:

我设置了一些关键映射，以快速利用语言服务器的一些关键功能：

These mappings allow you to quickly jump to a symbol definition, see the implementation for a symbol, or find where it’s referenced. I use them all frequently and find them to be a huge productivity boost.

这些映射使您可以快速跳转到符号定义，查看符号的实现，或找到其引用位置。 我经常使用它们，发现它们极大地提高了生产率。

林亭 (Linting)

I rely on ESLint for linting both my JavaScript and TypeScript projects. Now that TSLint is being deprecated, the choice is even easier. I initially used Ale (which is a great tool), but it had some issues when used together with coc.nvim.

我依靠ESLint来整理我JavaScript和TypeScript项目。 现在不推荐使用TSLint ，选择更加容易。 我最初使用Ale (这是一个很棒的工具)，但与coc.nvim一起使用时存在一些问题。

Now, using the coc-eslint language server extension, you can get real-time feedback from your linter and language server using the same tool. I also use coc-prettier to have coc.nvim format my code to prettier standards on file save.

现在，使用coc-eslint语言服务器扩展 ，您可以使用同一工具从短毛绒和语言服务器获取实时反馈。 我还使用coc- prettier将coc.nvim的代码格式化为文件保存时更漂亮的标准。

组态 (Configuration)

You can configure your coc.nvim setup by creating a configuration file. Right now, mine is pretty simple:

您可以通过创建配置文件来配置coc.nvim安装程序。 现在， 我的非常简单：

You can read more about setting up your own coc.nvim configuration file here.

您可以在此处阅读有关设置自己的coc.nvim配置文件的更多信息 。

结论 (Conclusion)

That about wraps it up. I’d love to hear any feedback or suggestions, so please leave a comment! In case you missed it above, for my full setup, check out my dotfiles and my article on the rest of my setup outside of Vim. Thanks for reading!

关于那把它包裹起来。 我希望收到任何反馈或建议，所以请发表评论！ 如果您错过了上面的内容，那么对于我的完整设置，请查看我的dotfile和有关Vim之外其余设置的文章 。 谢谢阅读！

翻译自: https://www.freecodecamp.org/news/a-guide-to-modern-web-development-with-neo-vim-333f7efbf8e2/

vim 设置web开发