new blog poast on my neovim setup
BIN
public/cmp-doc-screenshot.png
Normal file
After Width: | Height: | Size: 239 KiB |
BIN
public/cmp-screenshot.png
Normal file
After Width: | Height: | Size: 192 KiB |
BIN
public/default-ui-select-screenshot.png
Normal file
After Width: | Height: | Size: 88 KiB |
BIN
public/gitsigns-hunk-change-popup-screenshot.png
Normal file
After Width: | Height: | Size: 100 KiB |
BIN
public/gitsigns-readme-screenshot.png
Normal file
After Width: | Height: | Size: 626 KiB |
BIN
public/lualine-readme.png
Normal file
After Width: | Height: | Size: 326 KiB |
BIN
public/mason-screenshot-zoomed.png
Normal file
After Width: | Height: | Size: 694 KiB |
BIN
public/no-neck-pain-readme.png
Normal file
After Width: | Height: | Size: 851 KiB |
BIN
public/nvim-cxx-screenshot-zoomed.png
Normal file
After Width: | Height: | Size: 826 KiB |
BIN
public/nvim-cxx-screenshot.png
Normal file
After Width: | Height: | Size: 789 KiB |
BIN
public/nvim-filetree-screenshot-zoomed.png
Normal file
After Width: | Height: | Size: 799 KiB |
BIN
public/nvim-filetree-screenshot.png
Normal file
After Width: | Height: | Size: 707 KiB |
BIN
public/nvim-go-screenshot-zoomed.png
Normal file
After Width: | Height: | Size: 538 KiB |
BIN
public/nvim-go-screenshot.png
Normal file
After Width: | Height: | Size: 619 KiB |
BIN
public/nvim-lazy-screenshot-zoomed.png
Normal file
After Width: | Height: | Size: 827 KiB |
BIN
public/nvim-lazy-screenshot.png
Normal file
After Width: | Height: | Size: 636 KiB |
BIN
public/nvim-tree-readme.png
Normal file
After Width: | Height: | Size: 424 KiB |
BIN
public/telescope-ui-select-screenshot.png
Normal file
After Width: | Height: | Size: 532 KiB |
184
src/content/blog/my-neovim-setup.md
Normal file
@@ -0,0 +1,184 @@
|
||||
---
|
||||
title: 'my neovim setup'
|
||||
description: 'keybinds and plugins i use with my neovim.'
|
||||
pubDate: 'Jun 18 2024'
|
||||
---
|
||||
|
||||
i used to be an avid intellij user, until [@juweeism](https://x.com/juweeism) came in with this tweet:
|
||||
|
||||
<blockquote class="twitter-tweet" data-theme="dark"><p lang="en" dir="ltr">pivot to vim tonite king?</p>— juwee (@juweeism) <a href="https://twitter.com/juweeism/status/1768997650219888849?ref_src=twsrc%5Etfw">March 16, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
|
||||
as an easily manipulated inidividual, this was enough to convince me to end my 7-year relationship with intellij ides and begin a brand new chaper in a brand new coding environment. little did i know this switch would be a permanent one.
|
||||
|
||||
this poast documents all the plugins and keybinds that i have installed and actively use.
|
||||
|
||||
## screenshots
|
||||
|
||||
the preview shows a zoomed-in ui for legibility. click on an image to see the ui in its original scale!
|
||||
|
||||
<figure>
|
||||
|
||||
[](/nvim-go-screenshot.png)
|
||||
|
||||
<figcaption>my neovim with go code opened</figcaption>
|
||||
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
|
||||
[](/nvim-cxx-screenshot.png)
|
||||
|
||||
<figcaption>my neovim with c++ code opened</figcaption>
|
||||
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
|
||||
[](/nvim-filetree-screenshot.png)
|
||||
|
||||
<figcaption>my neovim with the file tree opened</figcaption>
|
||||
|
||||
</figure>
|
||||
|
||||
## color theme
|
||||
|
||||
i use [catppuccin](https://github.com/catppuccin/catppuccin) for everything, including my neovim, my terminal, and even this website!
|
||||
|
||||
## package manager
|
||||
|
||||
i use [lazy.nvim](https://github.com/folke/lazy.nvim) as my package manager of choice. one thing i like about lazy is that it comes with a ui for managing and updating plugins:
|
||||
|
||||
|
||||
<figure>
|
||||
|
||||
[](/nvim-lazy-screenshot.png)
|
||||
|
||||
<figcaption>my neovim with lazy opened</figcaption>
|
||||
|
||||
</figure>
|
||||
|
||||
to update plugins, i simply press `shift+u`, and lazy will automatically update plugins and list all breaking changes after the update is complete. very handy!
|
||||
|
||||
## centered buffer
|
||||
|
||||
in (neo)vim, buffers are left aligned. when there is only one buffer opened, text starts from the very left edge of the window. if the window is maximized, the text will begin from the very left edge of my monitor, which makes it hard to read! thankfully, [no-neck-pain](https://github.com/shortcuts/no-neck-pain.nvim) is a plugin that centers the active buffer by placing two equally-sized buffers on both sides of the active buffer.
|
||||
|
||||

|
||||
|
||||
now, not only is the buffer directly in my line of sight, i now also get two empty buffers that i can use as scratch pads.
|
||||
|
||||
no-neck-pain is also smart enough to detect splits, which means splits will work as normal. when i trigger a vertical split by pressing `<C-w><C-v>` for example, the two empty buffers go away, and i will be presented with two equally split buffers. once i close either buffer, the remaining buffer will be centered again.
|
||||
|
||||
## file tree
|
||||
|
||||
most editors and even most neovim setups out there have a file tree always visible to the left of the current buffer. however, in my experience, i rarely need to look at the file tree, so having it constantly visible becomes a distraction. [nvim-tree](https://github.com/nvim-tree/nvim-tree.lua) is a file tree written in lua that supports floating mode.
|
||||
|
||||

|
||||
|
||||
in floating mode, the file tree is presented in a floating window instead of inside an always visible buffer. by default, it appears at the top left hand corner of the window, which is not very readable, so i found a piece of code online that centers the window. unfortunately, i was not able to trace back the source of the code.
|
||||
|
||||
with this setup, all that is visible at all time is the currently active buffer(s) and statuslines, and nothing else.
|
||||
|
||||
## status line
|
||||
|
||||
this brings us to statusline. i use [LuaLine](https://github.com/nvim-lualine/lualine.nvim) as my statusline plugin of choice.
|
||||
|
||||

|
||||
|
||||
by default, the statusline displays the current mode, the active branch, as well as the name of the file opened in the current buffer and its type. i find that having the global statusline display "local" information about a buffer unintuitive, and i'd much rather have a separate line that is attached to the active buffer. LuaLine enables this via the `winbar` config, which is a statusline bar at the top of the buffer. i configured it so that only the winbar of the active buffer is visible. this lets me know which buffer i am editing, as well as reduce visual clutter.
|
||||
|
||||
now, the global statusline, which always sits at the bottom no matter which buffer i am editing, displays the following:
|
||||
|
||||
- the current vim mode;
|
||||
- the active git branch; and
|
||||
- the current date and time, which is particularly useful because i use my neovim in fullscreen which hides the system clock.
|
||||
|
||||
the winbar, attached to a buffer at the top, displays:
|
||||
|
||||
- the relative path of the opened file;
|
||||
- the encoding of the file;
|
||||
- the search count if a search is active;
|
||||
- any lsp diagnostics; and
|
||||
- the file type.
|
||||
|
||||
## lsp
|
||||
|
||||
although neovim has an lsp client built-in, i use [mason](https://github.com/williamboman/mason.nvim) to manage all my lsps, formatters and linters. it also manages daps (debugger adapter protocol) as well, but in the rare cases that i need a debugger, i still rely on intellij ides, which is why i haven't set up debugging in neovim.
|
||||
|
||||
the best thing about mason is that, like lazy, it comes with a ui for managing your lsps and others:
|
||||
|
||||

|
||||
|
||||
to install a component, all i have to do is press `/` to search for it, and then type:
|
||||
|
||||
```
|
||||
:MasonInstall <component-name>
|
||||
```
|
||||
|
||||
to install the component. for example, if i want to install gopls, go's lsp, i can type:
|
||||
|
||||
```
|
||||
:MasonInstall gopls
|
||||
```
|
||||
|
||||
and it will be installed for you. one crucial plugin that acts as a glue between mason and neovim's built-in lsp client is [mason-lspconfig](https://github.com/williamboman/mason-lspconfig.nvim), which makes mason-managed components work with neovim.
|
||||
|
||||
## autocomplete
|
||||
|
||||
for me, an editor needs to have autocompletion feature, as i am lazy and can't type very fast (i.e. skill issue.) for this, i use [nvim-cmp](https://github.com/hrsh7th/nvim-cmp). it is heavily customizable, which allowed me to make it look really nice:
|
||||
|
||||

|
||||
|
||||
nvim-cmp also displays type info and docstring of the selected entry next to the popup:
|
||||
|
||||

|
||||
|
||||
## telescope
|
||||
|
||||
[telescope](https://github.com/nvim-telescope/telescope.nvim) is a generic fuzzy finder that is highly extensible. it has a [comprehensive list](https://github.com/nvim-telescope/telescope.nvim/wiki/Showcase) of built-in, ready-to-use pickers that you can use without any additional configuration. here are all the pickers that i have configured:
|
||||
|
||||
- [find files](https://github.com/nvim-telescope/telescope.nvim/wiki/Showcase#find-files);
|
||||
- [live grep](https://github.com/nvim-telescope/telescope.nvim/wiki/Showcase#live-grep), which searches through the content of all files in a directory;
|
||||
- [buffers](https://github.com/nvim-telescope/telescope.nvim/wiki/Showcase#buffers), which searches through the list of opened buffers; and
|
||||
- [lsp references](https://github.com/nvim-telescope/telescope.nvim/wiki/Showcase#lsp-references), which searches through all references to the symbol under the cursor in the project.
|
||||
|
||||
### overriding default selection ui with telescope
|
||||
|
||||
by default, when making selections in neovim, for example selecting an lsp code action, the list of actions appear at the bottom left of the screen:
|
||||
|
||||

|
||||
|
||||
using [telescope-ui-select](https://github.com/nvim-telescope/telescope-ui-select.nvim), i can override the default selection ui to use telescope instead. now, not only is this list centered, i can also search through the list of actions:
|
||||
|
||||

|
||||
|
||||
## git signs
|
||||
|
||||
[gitsigns](https://github.com/lewis6991/gitsigns.nvim) is a plugin that shows an indicator that indicates whether a line is inserted, changed, or deleted in git, next to the line numbers:
|
||||
|
||||

|
||||
|
||||
on top of that, it provides commands that let you preview the changes in a popup, like so:
|
||||
|
||||

|
||||
|
||||
it even lets you revert hunk changes!
|
||||
|
||||
## keybinds
|
||||
|
||||
most of my neovim keybinds start with `<space>`. this is because the space bar is always under my two thumbs, making it easily accessible. also, it is just plain satisfying to begin any action with a space bar! following the space bar, i usually follow mnemonics of the action i want to trigger. here are some keybinds i use frequently:
|
||||
|
||||
- `<space>f`: opens the **f**ile tree in a dialog
|
||||
- `<space>F`: opens the **s**earch **f**iles telescope dialog
|
||||
- `<space>b`: opens the **b**uffer telescope dialog
|
||||
- `<space>g`: opens live **g**rep
|
||||
- `<space>lg`: opens [**l**azy-**g**it.nvim](https://github.com/kdheepak/lazygit.nvim)
|
||||
- `<space>a`: opens lsp live **a**ction dialog
|
||||
- `<space>u`: finds all **u**sages of the symbol under the cursor
|
||||
- `<space>hp`: opens gitsigns' **h**unk **p**review pop up
|
||||
- `<space>hr`: performs a **h**unk **r**evert
|
||||
|
||||
## dotfiles
|
||||
|
||||
all my dotfiles, including my neovim config, [lives here](https://github.com/kennethnym/dotfiles) in a GitHub repo. the best way to install the dotfiles is to symlink the files to the appropriate path. for example, to use my neovim config on macOS, symlink the `nvim` directory to `~/.config/nvim`.
|
||||
|
@@ -1,15 +1,14 @@
|
||||
---
|
||||
import BaseHead from "../components/BaseHead.astro";
|
||||
import Footer from "../components/Footer.astro";
|
||||
import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
|
||||
import Link from "../components/Link.astro";
|
||||
import FormattedDate from "../components/FormattedDate.astro";
|
||||
import LuaLine from "../components/LuaLine.astro";
|
||||
import { getBlogs } from "../content/blog";
|
||||
|
||||
const posts = (await getBlogs()).sort(
|
||||
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
|
||||
);
|
||||
const currentMonth = new Date().getMonth();
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
@@ -17,21 +16,33 @@ const currentMonth = new Date().getMonth();
|
||||
<head>
|
||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
||||
</head>
|
||||
<body
|
||||
class="bg-base text-text h-screen m-auto p-8 flex items-center justify-center overflow-hidden"
|
||||
>
|
||||
<main
|
||||
class="py-8 max-w-2xl flex flex-col items-center space-y-0 leading-tight"
|
||||
>
|
||||
<p>KENNETHNYM v23.{currentMonth + 4}</p>
|
||||
<p class="leading-none"> </p>
|
||||
<p>software engineer. unpaid hhkb salesman.</p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<ul class="w-full">
|
||||
<body class="bg-base text-text max-w-4xl m-auto p-8">
|
||||
<header>
|
||||
<p class="font-bold text-2xl">kennethnym</p>
|
||||
</header>
|
||||
<main class="py-8">
|
||||
<p>dumping ground for my thoughts. all opinions are my own.</p>
|
||||
<h1 class="font-bold mt-8 mb-2 text-lg visited">current projects:</h1>
|
||||
<ul class="not-prose space-y-4 md:space-y-2">
|
||||
<li>
|
||||
<Link href="https://polygui.org">poly</Link>: a language-agnostic,
|
||||
cross-platform GUI framework for building OS-native applications.
|
||||
</li>
|
||||
<li>
|
||||
<Link href="https://polygui.org/nanopack/introduction/">nanopack</Link
|
||||
>: a zero-runtime, type-safe binary serialization format.
|
||||
</li>
|
||||
<li>
|
||||
<Link href="https://github.com/kennethnym/StarlightLauncher"
|
||||
>starlight launcher</Link
|
||||
>: an open-source android launcher with a search-based ui.
|
||||
</li>
|
||||
</ul>
|
||||
<h1 class="font-bold mt-8 mb-2 text-lg visited">my thoughts:</h1>
|
||||
<ul>
|
||||
{
|
||||
posts.map((post) => (
|
||||
<li class="flex flex-row justify-between hover:bg-opacity-10 hover:bg-text -mx-2 px-2 rounded space-x-8">
|
||||
<li class="flex flex-row justify-between hover:bg-opacity-10 hover:bg-text -mx-2 px-2 rounded">
|
||||
<Link href={`/blog/${post.slug}`}>{post.data.title}</Link>
|
||||
<FormattedDate date={post.data.pubDate} />
|
||||
</li>
|
||||
@@ -39,49 +50,7 @@ const currentMonth = new Date().getMonth();
|
||||
}
|
||||
</ul>
|
||||
</main>
|
||||
<div class="absolute w-full h-full px-2 -z-10 leading-tight">
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
<p>~</p>
|
||||
</div>
|
||||
<LuaLine client:load />
|
||||
<hr class="py-2" />
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
|