在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命令，以及vim-autoformat插件和pangloss/vim-javascript插件中的:Autoformat，但都没有成功。

我得到的最好的提示是使用CCD_ 6；印刷精美的"；正如我所料。也许我不知道的一些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美化

你提到的网络应用程序使用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();

这恰好与本地CCD_ 9默认输出的内容相同。

如果该web应用程序真的能够以您想要的方式格式化您的代码，那么您必须尝试各种设置，直到您满意为止，然后进入配置阶段。

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

https://beautifier.io/会做

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

所以你回到了步骤#1：弄清楚要使用什么外部工具…这超出了这个网站的范围。