🚀 基础 Neovim 操作
文件操作
# 文件导航
<Space>ff # 查找文件 (Telescope)
<Space>fg # 全局搜索 (Live Grep)
<Space>fb # 查找缓冲区
<Space>fr # 最近文件
<Space>fc # 查找命令
<Space>fh # 查找帮助文档
# 文件树操作
<Space>e # 切换文件树 (Neo-tree)
<Space>fe # 打开文件树并聚焦到当前文件
<C-n> # 切换文件树 (NvimTree 如果使用)
a # 在文件树中创建文件/文件夹
d # 删除文件
r # 重命名文件
x # 剪切文件
c # 复制文件
p # 粘贴文件
# 缓冲区管理
<Space>bd # 删除缓冲区
<Space>bb # 切换到其他缓冲区
<Tab> # 下一个缓冲区
<S-Tab> # 上一个缓冲区
<Space>bp # 固定/取消固定缓冲区
🎯 Next.js 特定操作
项目管理
# 终端操作
<Space>ft # 打开浮动终端
<Space>fT # 打开固定终端
<C-/> # 切换终端 (或 Ctrl+_)
# 在终端中的常用 Next.js 命令
:terminal # 打开终端
# 然后在终端中：
npm run dev # 启动开发服务器
npm run build # 构建项目
npm run start # 启动生产服务器
npm run lint # 运行 ESLint
npm run type-check # TypeScript 类型检查
# 快速执行 npm 命令（在 Neovim 中直接执行）
:!npm run dev
:!npm run build
:!npm run lint
:!npm install
代码导航与跳转
# LSP 导航
gd # 跳转到定义
gD # 跳转到声明
gr # 查看引用
gi # 跳转到实现
K # 显示悬浮文档
<Space>ca # 代码动作
<Space>cr # 重命名变量
<Space>cf # 格式化代码
# 快速跳转 Next.js 文件结构
<Space>ff 输入:
- pages/ # 页面文件
- components/ # 组件文件
- styles/ # 样式文件
- public/ # 静态资源
- api/ # API 路由
- utils/ # 工具函数
- hooks/ # 自定义 hooks
- contexts/ # React contexts
- types/ # TypeScript 类型
💻 React/JSX 开发
代码编辑
# 智能选择
vat # 选择标签内容
vit # 选择标签内部
dat # 删除标签
dit # 删除标签内容
# JSX 特定操作
<Space>rs # React Snippets (如果安装了相关插件)
<Space>rc # 创建 React 组件模板
# 标签操作
cst<新标签> # 更改标签 (需要 vim-surround)
dst # 删除围绕标签
ysw<div> # 用 div 包围单词
# 自动补全
<C-Space> # 触发补全
<Tab> # 选择补全项
<C-n> # 下一个补全项
<C-p> # 上一个补全项
HTML/JSX 标签操作
# Emmet 操作 (如果安装 Emmet 插件)
<C-y>, # 展开 Emmet 缩写
div.container<C-y>, # 展开为 <div className="container"></div>
# 常用 Emmet 缩写：
div.class # <div className="class"></div>
div#id # <div id="id"></div>
ul>li*5 # 5个li的列表
img[src alt] # <img src="" alt="" />
🎨 CSS/Tailwind 开发
CSS 文件操作
# 文件内搜索 CSS 类
/<类名> # 搜索特定类名
/\\.container # 搜索 .container 类
n # 下一个匹配
N # 上一个匹配
# Tailwind CSS 支持
<Space>ct # Tailwind CSS 类名补全
<C-Space> # 在 className 中触发 Tailwind 补全
# CSS 属性快速编辑
ci" # 更改引号内容 (className="这里")
ca" # 更改包含引号的内容
🔧 TypeScript 支持
TypeScript 特定命令
# 类型检查
<Space>td # 显示类型定义
<Space>th # 显示类型层次结构
<Space>ti # 显示类型信息
# 错误诊断
<Space>xx # 显示诊断列表
<Space>xd # 显示文档诊断
<Space>xl # 显示位置列表
]d # 下一个诊断
[d # 上一个诊断
<Space>cd # 诊断浮窗
# TypeScript 重构
<Space>co # 组织导入
<Space>cR # 移除未使用的导入
<Space>cf # 修复所有可修复的问题
🔍 搜索与替换
项目级搜索
# Telescope 搜索
<Space>fg # 实时搜索文件内容
<Space>fw # 搜索光标下的单词
<Space>fs # 搜索字符串
<Space>fG # 在 Git 文件中搜索
# 替换操作
<Space>sr # 搜索并替换 (项目级)
:%s/old/new/g # 当前文件替换
:%s/old/new/gc # 当前文件替换 (确认)
# 多文件替换 (需要插件支持)
<Space>rr # 多文件替换
Next.js 项目特定搜索
# 搜索 Next.js 特定内容
<Space>fg 然后输入:
- "getStaticProps" # 搜索静态生成函数
- "getServerSideProps" # 搜索服务器端渲染函数
- "useEffect" # 搜索 useEffect hooks
- "useState" # 搜索 useState hooks
- "export default" # 搜索默认导出
- "import.*from" # 搜索导入语句
📋 代码片段 (Snippets)
React Snippets
# 在插入模式下输入并按 Tab:
rfc<Tab> # React Function Component
rfce<Tab> # React Function Component with export
rafc<Tab> # React Arrow Function Component
rcc<Tab> # React Class Component
useState<Tab> # useState hook
useEffect<Tab> # useEffect hook
Next.js 特定 Snippets
# 自定义或通过插件:
npage<Tab> # Next.js page template
napi<Tab> # Next.js API route template
getstaticprops<Tab> # getStaticProps template
getssr<Tab> # getServerSideProps template
🐛 调试与测试
调试操作
# 断点操作 (需要 DAP 插件)
<Space>db # 切换断点
<Space>dB # 设置条件断点
<Space>dc # 继续执行
<Space>ds # 单步执行
<Space>do # 单步跳过
<Space>di # 单步进入
<Space>dr # 打开 REPL
<Space>du # 切换调试 UI
# Console.log 快速插入
<Space>cl # 插入 console.log (需要配置)
测试相关
# 运行测试 (在终端中)
:!npm test # 运行测试
:!npm run test:watch # 监视模式测试
# Jest 相关操作
<Space>tt # 运行当前文件测试
<Space>ta # 运行所有测试
<Space>tf # 运行失败的测试
🔄 Git 操作
Git 基础操作
# Fugitive 插件命令
:Git # Git 状态
:Git add . # 添加所有更改
:Git commit # 提交更改
:Git push # 推送更改
:Git pull # 拉取更改
# LazyGit 集成 (如果安装)
<Space>gg # 打开 LazyGit
<Space>gc # Git commits
<Space>gs # Git status
# 差异查看
<Space>gd # 查看差异
<Space>gb # Git blame
<Space>gh # Git hunk 操作
📱 移动端开发
响应式开发
# 在多个设备尺寸间快速搜索
<Space>fg sm: # 搜索 Tailwind sm 断点
<Space>fg md: # 搜索 Tailwind md 断点
<Space>fg lg: # 搜索 Tailwind lg 断点
# 在浏览器中打开 (需要配置)
<Space>op # 在浏览器中打开项目
⚙️ 配置与自定义
自定义快捷键 (添加到配置中)
-- 在 ~/.config/nvim/lua/config/keymaps.lua
local map = vim.keymap.set
-- Next.js 开发快捷键
map("n", "<leader>nd", ":!npm run dev<CR>", { desc = "Start Next.js dev server" })
map("n", "<leader>nb", ":!npm run build<CR>", { desc = "Build Next.js project" })
map("n", "<leader>nl", ":!npm run lint<CR>", { desc = "Run ESLint" })
map("n", "<leader>ni", ":!npm install<CR>", { desc = "Install dependencies" })
-- React 组件快速创建
map("n", "<leader>rc", function()
local component_name = vim.fn.input("Component name: ")
local content = string.format([[
import React from 'react'
interface %sProps {
}
const %s: React.FC<%sProps> = () => {
return (
<div>
%s
</div>
)
}
export default %s
]], component_name, component_name, component_name, component_name, component_name)
vim.api.nvim_put({content}, 'l', true, true)
end, { desc = "Create React component" })
-- 快速插入 console.log
map("n", "<leader>cl", function()
local line = vim.api.nvim_get_current_line()
local indent = line:match("^%s*")
vim.api.nvim_put({indent .. "console.log('DEBUG:', )"}, 'l', true, true)
vim.cmd("normal! $h")
vim.cmd("startinsert")
end, { desc = "Insert console.log" })
-- 快速打开常用 Next.js 文件
map("n", "<leader>np", ":e package.json<CR>", { desc = "Open package.json" })
map("n", "<leader>nc", ":e next.config.js<CR>", { desc = "Open next.config.js" })
map("n", "<leader>nt", ":e tailwind.config.js<CR>", { desc = "Open tailwind.config.js" })
🔌 推荐插件配置
必备插件列表
-- 在 ~/.config/nvim/lua/plugins/nextjs.lua
return {
-- TypeScript 支持
"jose-elias-alvarez/typescript.nvim",
-- React 支持
{
"windwp/nvim-ts-autotag",
ft = { "javascript", "javascriptreact", "typescript", "typescriptreact" },
config = true,
},
-- Tailwind CSS 支持
{
"bradcush/nvim-tailwindcss-language-server",
},
-- Emmet 支持
{
"mattn/emmet-vim",
ft = { "html", "css", "javascript", "javascriptreact", "typescript", "typescriptreact" },
},
-- 代码片段
{
"dsznajder/vscode-es6-javascript-snippets",
build = "yarn install --frozen-lockfile && yarn compile",
},
}
🚀 工作流程示例
典型开发流程
# 1. 打开项目
cd my-nextjs-project
nvim .
# 2. 启动开发服务器
<Space>ft # 打开终端
npm run dev # 启动服务器
# 3. 创建新组件
<Space>ff # 查找文件
输入: components/NewComponent.tsx
<Enter> # 创建新文件
<Space>rc # 使用自定义快捷键创建组件模板
# 4. 编辑组件
<正常编辑>
<Space>cf # 格式化代码
:w # 保存文件
# 5. 查看页面效果
<浏览器中查看 localhost:3000>
# 6. 提交更改
<Space>gg # 打开 LazyGit
# 或使用命令:
:Git add .
:Git commit -m "Add new component"
:Git push
📚 学习资源
内置帮助
:help telescope # Telescope 帮助
:help lsp # LSP 帮助
:help treesitter # Tree-sitter 帮助
:Telescope help_tags # 搜索帮助文档
快速参考
<Space>sk #
