未加星标

Using Neovim for Javascript Development

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

Using Neovim for Javascript Development
Courtesy of Fotis Fotopoulos onUnsplash

For many of us, Neovim has become an absolute necessity. Over the last couple of years, I’ve used Neovim to program, to write and even as a window manager. The last couple of weeks I felt the need to edit a lot of javascript files, and with, the need to configure Neovim to deal with Javascript.

This article details all the plugins and configurations I’ve used to configure Neovim for Javascript editing, completing and linting.

First of all, we’ll need to have the Neovim package installed from python . We’ll also need a recent version of Node and some basic knowledge of Neovim.

I’ve been using Vim-Plug as my plugin manager for some time now, and I’ll be using it here, but you can use any of the other ones (like Vundle or Pathogen).

First thing I did was to navigate to my Neovim configuration file. Unlike pre-Vim 8 versions, we’re not looking for the .vimrc file. In Neovim we’re looking for the ~/.config/nvim/init.vim file.

To install new plugins using Vundle we need the following block in our configuration file:

call plug#begin() call plug#end()

Everything in between these two lines is referred plugins that need to be installed.

Auto-Completion

The first thing I wanted to install was some sort of code analyzer that would help me with auto-completion. I decided to go with Tern for Vim .

call plug#begin() Plug ‘ternjs/tern_for_vim’, { ‘do’: ‘npm install && npm install -g tern’ } call plug#end()

For those of you unfamiliar with TernJs, it’s a stand-alone, editor-independent JavaScript analyzer that can be used to improve the JavaScript integration of existing editors.

Also, as we can see, I’m also installing both the plugin dependencies as well as a global tern package. This is just to keep the plugin in sync with the global ternjs package installed on my computer.

Anytime we want to actually install the plugins we add to the list, it’s a matter of running :PlugInstall inside Neovim and he’ll do all the work for us.

Now, with tern already installed, we have to actually configure it so he can know what and where to check. So, in I created a .tern-config file in my home directory with the following content:

{ “plugins”: { “node”: {} } }

I did a global configuration file, but this can also be done locally by adding the file to the root of your project. After running :PlugInstall we’re now ready to start using tern. For that, we use Omni-completion commands <C-x><C-o> to trigger the completion candidates.

This is great, but it’s just scratching the surface. Neovim brought us asynchronous execution. So why should we need to use Omnicompletion commands whenever we want auto-completion. Neovim should do that for us.

That’s where Deoplete comes into action.

Deoplete is a very cool plugin that provides an extensible and asynchronous completion framework for neovim/Vim8.

call plug#begin() Plug ‘Shougo/deoplete.nvim’, { ‘do’: function(‘DoRemote’) } Plug ‘ternjs/tern_for_vim’, { ‘do’: ‘npm install && npm install -g tern’ } Plug ‘carlitux/deoplete-ternjs’ call plug#end() let g:deoplete#enable_at_startup = 1 let g:deoplete#enable_ignore_case = 1 let g:deoplete#enable_smart_case = 1 let g:deoplete#enable_camel_case = 1 let g:deoplete#enable_refresh_always = 1 let g:deoplete#max_abbr_width = 0 let g:deoplete#max_menu_width = 0 let g:deoplete#omni#input_patterns = get(g:,’deoplete#omni#input_patterns’,{}) let g:tern_request_timeout = 1 let g:tern_request_timeout = 6000 let g:tern#command = [“tern”] let g:tern#arguments = [“ ― persistent”]

Deoplete allows others to hook into it and provide completions for candidates on screen. It comes preconfigured with file path completion, ctags completion and for strings that appear in each of your vim buffers. deoplete-ternjs is another package that plugs into deoplete that provides completions using the ternjs server.

We also added a lot of configurations for both Deoplete and tern. These help us shape our plugins behavior.

After running :PlugInstal l once more, we should have fully working asynchronous completion. Try typing something Javascript related and auto-completion should be triggered automatically.

Linting

Linting was the next thing I wanted working. Since I’m not a Javascript genius, linting was really up there on my needs. It allowed me to be a little bit more relaxed with my code as I know that any mistake would be quickly uncovered.


Using Neovim for Javascript Development

I decided to use Neomake since it’s used and proved. I added the following:

Plug ‘neomake/neomake’, { ‘on’: ‘Neomake’ }

to my plugin list and

let g:neomake_javascript_enabled_makers = [‘eslint’]

to the configurations. We are using eslint but we can add or remove linters from that list as we need.

File jumping

Lastly, I also wanted some sort of “Jump to declaration” kind of functionality. In Vim we normally use Ctags for that effect. But vim-gutentags takes care of the much-needed management of tags files in Vim. It will (re)generate tag files as you work while staying completely out of your way. This will spare us the effort of generating and re-generating tags files manually.

So, I added to the plugin list:

Plug ‘ludovicchabant/vim-gutentags’

After running :PlugInstall once again and opening a project, we should be able to To jump to definitions using ctags. Just hover over a defined variable or import statement and type <C-]> .

Conclusion

This was my basic setup for Javascript programming. There are a lot more plugins and configurations that can be used to turn this into an even better experience.

What plugins and configurations are you using for Javascript development with Neovim?

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:Using Neovim for Javascript Development
本站链接:https://www.codesec.net/view/610875.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(70)