vim 中自动缩进 javascript，从单行代码到完全缩进代码

Question

我正在使用 vim 进行编码，即使用 javascript 进行编码。我希望能够自动缩进 javascript 代码。我的主要用例是能够自动从单行 javascript 代码跳转到完全缩进的漂亮打印代码（就像 https ://beautifier.io/ 就可以了）。

尽管在谷歌和SO上寻求帮助，但在缩进代码是一行的特定情况下，我无法找到任何与自动缩进相关的问题。

示例输入文件：

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();

我期待以下输出：

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();

到目前为止，我未成功尝试 =G 和 gg=G 命令以及 :Autoformat 来自 vim-autoformat 插件和 pangloss/vim-javascript 插件。

我得到的最好提示是使用 maksimr/vim-jsbeautify 但结果并不像我预期的那样“打印得很漂亮”。也许我不知道的一些 editorconfig 属性可能有助于添加换行符并避免导入在不太长的时候被破坏？

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();

奖励：如果该解决方案还可以自动缩进类似于 dict 的实体（例如 javascript 或 json），我会感到惊讶。

Answer 1

作为通用文本编辑器，Vim 对于特定文件类型的功能是有限的。

开箱即用的 Vim 无法执行您所要求的操作，但它允许您使用外部工具来执行您所要求的操作。

你需要弄清楚的是：

1. 使用什么外部工具，
2. 如何配置它以获得期望的结果，
3. 如何将其与 Vim 集成。

js-beautify

您提到的网络应用程序使用 js-beautify 因此，如果您对网络应用程序如何格式化代码感到满意，那么您应该尝试 js-beautify 。

这里的第一个问题是，网络应用程序实际上并没有按照您声称的方式格式化您的示例。它输出：

 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();

这恰好与本地 js-beautify 默认输出的内容相同。

如果该网络应用确实能够按照您想要的方式格式化您的代码，那么您必须尝试各种设置，直到满意为止，然后进入配置阶段。

但还有第二个问题：我只是花了几分钟摆弄设置，恐怕我必须指出这一点：

正如https://beautifier.io/ 所做的那样

显然是错误的。该网络应用程序无法实现您理想的格式，并且底层的 js-beautify 很可能受到类似的限制。

因此，您回到步骤#1：弄清楚要使用什么外部工具......这超出了本网站的范围。