SECRET OF CSS

Need an Alternative for Atom Editor? Auto Format JavaScript Code on Neovim With Prettier and ELint | by Fabiano Taioli | Aug, 2022


Automatically format and lint JavaScript code on Neovim

0*9c3p4KpOQNhD9is3
Photo by Jeremy Bezanger on Unsplash

I have to admit I was too lazy to replace my Atom editor and postponed it until a couple of weeks ago. I work mainly with JavaScript (plus Typescript for type checking) and Atom was a good editor that fulfilled my needs.

But now it’s an archived project:

We are archiving Atom and all projects under the Atom organization for an official sunset on December 15, 2022.

I know that VS Code is the natural editor to migrate to but I wanted to take the opportunity to better learn VI editor and use it as my primary IDE.

Vim has a small footprint, low latency, fast startup, allows for more screen space, customizable and most importantly, once the muscle-memory has been ingrained, it’s nearly impossible to switch to something else.
John Biggs and Ryan Donovan

After trying out a couple of VI distributions and preconfigured collections of plugins I have chosen LunarVim (Neovim based) and I’m very happy with it.

LunarVim screenshot

The only thing that was missing was a straight way to format my JS code with Prettier plus ESLint fix. Like I was doing on Atom.

The fix feature of eslint is pretty great and can auto-format/fix much of your code according to your ESLint config. prettier is a more powerful automatic formatter. One of the nice things about prettier is how opinionated it is. Unfortunately, it’s not opinionated enough and/or some opinions differ from my own. So after prettier formats the code, I start getting linting errors.
Kent C. Dodds

There are many ways to integrate Prettier and ESLint (see prettier introduction about it), and my preferred way is to format with Prettier and apply ESLint — fix after that for further formatting.

On Atom I have the Prettier Atom plugin with ESlint integration enabled to achieve it. So every time I format the code, Prettier is applied and then “eslint -fix” to further refactor the code to follow my desired rules.

1*iXMXEmE9qklTkt6 ZCqsog
Prettier Atom with ELint integration

To have the same behavior on Neovim I have used “null-ls” Lua plugin (indeed already included in LunarVim but you can use it standalone in vanilla Neovim, please read null-ls install instruction) and configured a new “custom formatter” for JavaScript as follow.

As the first step install prettier-eslint-cli and make sure it’s callable from your path:

This is the executable that Neovim will call to format code (it’s just a CLI that apply prettier-eslint to the input file. The CLI options are compatible with standard prettier CLI).

0*hyQEmK3BlkjZ3rv1
Photo by Michael on Unsplash

Lua” (pronounced LOO-ah) means “Moon” in Portuguese.

Then configure null-ls inside .config/lvim/config.lua (if you are using vanilla Neovim you can read here on how to use Lua if you are not familiar with it).

The next step (that was necessary for Atom too) is to add some ESLint plugins to your project (adding them globally is not possible):

Add required configs/plugins

As the final step don’t forget to add your desired Prettier and ESlint rules to the project (to trigger the auto format and lint phase).

Keep in mind that is bad if Prettier and ESLint rules contradict themself.

A good starting point is to extend ESLint “standard” config and then the “prettier” config (the last one removes rules incompatibles with Prettier).

Standard JS logo

You can do this with .eslintrc.json and .prettierrc.json o adding definitions to package.json.

Sample .prettierrc.json
Sample .eslintrc.json

With this configuration, I’m able to automatically format and lint my JS code on Neovim as I was doing on Atom with Prettier plugin with ESLint integration.

The solution is working well but could be much faster if a daemon is implemented instead of running a standalone process for every formatting.

To achieve this, forking and customizing prettied to use prettier-eslint could be the solution, maybe the next time.



News Credit

%d bloggers like this: