Linting with ESLint and Prettier in vim / neovim
This is part of a series of articles covering the different modules needed to configure vim for modern javascript apps development.
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
- 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
.eslintrcconfiguration 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:
- 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:
