Linting with ESLint and Prettier in vim / neovim

Carlos P. Jimeno
Nov 18, 2018 · 2 min read

This is part of a series of articles covering the different modules needed to configure vim for modern javascript apps development.

Image for post
Image for post

TL;TR

Setup ESLint as linter, Prettier as a code formatter and add ALE plugin to your neovim/vim config file to use/pimp your linter using vim.

The config file in vim is located in ~./vimrc and the config file for neovim in ~/.config/nvim/init.vim. From now on I will refer to the config file as init.vim.

ESLint

  1. Add ESLint to your project:

2. Create your config ESLint file .eslintrc in the root of your project

Prettier

1. Use ESLint to run prettier

  • Install packages
  • Set the .eslintrc configuration options

2. Turn off ESLint formatting rules

  • Install packages
  • Add the config in .eslintrc

3. Your .eslintrc should look like:

4. You can add now your custom format rules to .prettierrc file in the root of your project, something like follows

Vim config setup

Use your favourite plugin manager to install ALE linter, I love to use Plug:
In case you don’t have any plugin manager install Plug following their repo installation guide.

Add the following to your init.vim:

  1. Add the plugging to our plugging manager

2. Set ESLint as your plugging manager

3. Pimp your linter symbols

4. Add the config to fix the file your are working on on save

5. Your init.vim should look like

5. Inside init.vim type :so % to reload your vim config

6. Inside init.vim type:PlugInstall yo install your plugging

You are ready to go 🚀


Final thoughts

I work as a frontend developer so if your are interested in react snippets and some others feel free to check mines here 🙃.

You are ready to go and try it 🚀! I hope it helps and you found something useful here.

In case you liked it this is part of a serie of articles I wrote about useful vim configurations. If you are interested you can check the others here:

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store