You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Neovim中实现保存时自动格式化?JS/TS等文件配置遇阻

解决Neovim中JS/TS/JSX/TSX文件保存自动格式化及Prettier集成问题

方案一:直接调用Prettier命令(沿用Black的配置逻辑)

你可以复用Python文件的格式化思路,在保存后直接调用Prettier命令修改文件,再重新加载。只需调整文件匹配规则和执行命令:

-- 先确保AutoFormat组已创建(避免重复定义)
vim.api.nvim_create_augroup("AutoFormat", { clear = true })

-- Python文件格式化(原配置保留)
vim.api.nvim_create_autocmd(
    "BufWritePost",
    {
        pattern = "*.py",
        group = "AutoFormat",
        callback = function()
            vim.cmd("silent !black --quiet %")
            vim.cmd("edit")
        end
    }
)

-- JS/TS/JSX/TSX文件格式化
vim.api.nvim_create_autocmd(
    "BufWritePost",
    {
        pattern = {"*.js", "*.ts", "*.jsx", "*.tsx"},
        group = "AutoFormat",
        callback = function()
            -- 调用Prettier写入格式化后的内容
            vim.cmd("silent !prettier --write %")
            vim.cmd("edit")
        end
    }
)

前提:需要先安装Prettier,可通过npm install -g prettier全局安装,或在项目内执行npm install prettier --save-dev本地安装。

方案二:通过LSP集成Prettier(使用vim.lsp.buf.format)

如果想通过LSP接口完成格式化,需要让你的LSP服务关联Prettier作为格式化工具,常见配置方式如下:

1. 禁用tsserver的格式化能力,交给Prettier

如果你使用typescript-language-server(tsserver),先关闭它的格式化功能,避免和Prettier冲突:

require("lspconfig").tsserver.setup({
    on_attach = function(client, bufnr)
        -- 让tsserver放弃格式化权限
        client.server_capabilities.documentFormattingProvider = false
        client.server_capabilities.documentRangeFormattingProvider = false
        -- 其他on_attach配置...
    end
})

2. 配置Prettier专用LSP(以prettierd为例)

推荐用prettierd(Prettier的守护进程,速度更快),先安装:npm install -g @fsouza/prettierd

然后配置LSP并绑定保存自动格式化:

require("lspconfig").prettierd.setup({
    filetypes = {"javascript", "typescript", "javascriptreact", "typescriptreact"},
    on_attach = function(client, bufnr)
        -- 保存前自动触发格式化
        vim.api.nvim_create_autocmd("BufWritePre", {
            buffer = bufnr,
            callback = function()
                vim.lsp.buf.format({bufnr = bufnr, async = false})
            end
        })
    end
})

这种方式不需要手动执行edit命令,LSP会直接修改缓冲区内容,更流畅。

注意事项

  • 项目根目录建议放置.prettierrc或prettier.config.js配置文件,确保Prettier遵循项目自定义规则。
  • 避免同时启用多个格式化工具,防止出现冲突。

内容的提问来源于stack exchange,提问作者Sai Nikhil

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.22 22:08:23