Auto-indent javascript in vim, from one-liner to fully indented code

Question

I am using vim to code, namely in javascript. I would love to be able to auto-indent javascript code. My main use case is being able to automatically jump from a one-liner javascript code to a fully indented pretty-printed code (just as https://beautifier.io/ would do).

Despite looking for help on google and SO, I was not able to find any auto-indent related question in the specific case where code to indent is a one-liner.

Sample input file :

import { BASE_URL } from "@/constants/config"; import { request } from "@/utils/request"; export const FOOTER_ENDPOINTS = { links: `${ BASE_URL} api/footer/links/`, } ; class Footer { async fetchLinks() { const { data } = await request({ url: FOOTER_ENDPOINTS.links, }); return data; } } export const FooterService = new Footer();

I am expecting the following output :

import { BASE_URL } from "@/constants/config";
import { request } from "@/utils/request";

export const FOOTER_ENDPOINTS = {
  links: `${BASE_URL}api/footer/links/`,
};

class Footer {
  async fetchLinks() {
    const { data } = await request({
      url: FOOTER_ENDPOINTS.links,
    });
    return data;
  }
}

export const FooterService = new Footer();

So far i have unsuccessfully tried =G and gg=G commands, as well as :Autoformat from vim-autoformat plugin and pangloss/vim-javascript plugin.

Best hint I have is to use maksimr/vim-jsbeautify but the result is not as "pretty printed" as I would have expected. Maybe some editorconfig properties I do not know might help for adding line breaks and avoid imports being breaked when not too long ?

import { 
    BASE_URL
} from "@/constants/config";
import {
    request
} from "@/utils/request";
export const FOOTER_ENDPOINTS = {
    links: `${BASE_URL}api/footer/links/`,
};
class Footer {
    async fetchLinks() {
        const {
            data
        } = await request({
            url: FOOTER_ENDPOINTS.links,
        });
        return data;
    }
}
export const FooterService = new Footer();

BONUS : I would be amazing if the solution could also auto-indent dict-like entities such as javascript or json for instance.

Would this help? https://stackoverflow.com/a/20127451/8018716 — Silvan Bregy, Mar 24 '22 at 16:16
vim-jsbeautify might be a good start, but better use it directly as a vim plugin (i.e using `Plug('maksimr/vim-jsbeautify')` rather than using a python module. I am trying using it but syntax indentation is not as "pretty-printed" as I would have expected — AlexTorx, Mar 24 '22 at 16:33
I will update the question with what I have reached so far using `vim-jsbeautify`, maybe some editorconfig properties may help — AlexTorx, Mar 24 '22 at 16:40

score 1 · Answer 1 · answered Mar 24 '22 at 20:00

Being the generalist text editor that it is, there is a limit to what Vim can do on its own with specific filetypes.

Out of the box, Vim is incapable of doing what you ask but it allows you to use external tools that do.

What you need to figure out is:

what external tool to use,
how to configure it to get the desired outcome,
how to integrate it with Vim.

js-beautify

The web app you mention uses js-beautify so, if you are happy with how the web app formats your code, then you should give js-beautify a try.

The first problem, here, is that the web app doesn't actually format your sample the way you claim it does. It outputs this:

 import {
     BASE_URL
 } from "@/constants/config";
 import {
     request
 } from "@/utils/request";
 export const FOOTER_ENDPOINTS = {
     links: `${ BASE_URL} api/footer/links/`,
 };
 class Footer {
     async fetchLinks() {
         const {
             data
         } = await request({
             url: FOOTER_ENDPOINTS.links,
         });
         return data;
     }
 }
 export const FooterService = new Footer();

which happens to be identical to what local js-beautify outputs by default.

If that web app is really able to format your code the way you want, then you must try various settings until you are satisfied and then move on to the configuration phase.

But there is a second problem: I just spent a few minutes playing with the settings and I'm afraid I have to point out that this statement:

just as https://beautifier.io/ would do

is patently false. The web app can't do your ideal formatting and the underlying js-beautify is very likely to be similarly limited.

So you are back to step #1: figuring out what external tool to use… which is outside of the scope of this site.

Auto-indent javascript in vim, from one-liner to fully indented code

1 Answers1

js-beautify