A simple Neovim plugin for adding and removing class attributes in your HTML/JSX document.
- adds/removes class attribute to/from any HTML element
- can handle nested elements too
- works for HTML/JSX/TSX documents
- configurable to use single/double quotes
- uses treesitter to find correct element and make it work regardless of your cursor position
classy
provides three functions you can easily map and use: ClassyAddClass
, ClassyRemoveClass
, and ClassyResetClass
.
-- example keymaps
vim.keymap.set('n', "<leader>ac", :ClassyAddClass<CR>)
vim.keymap.set('n', "<leader>dc", :ClassyRemoveClass<CR>)
vim.keymap.set('n', "<leader>rs", :ClassyResetClass<CR>)
When ClassyAddClass
is called, it finds the nearest element from your cursor and performs one of the two following behaviors based on the state of that element.
- If the element already has a class attribute, then it places your cursor to the end so that you can start adding new values by yourself.
- If no class attribute is present, it adds a new one for you.
<p></p>
<!-- ClassyAddClass -->
<!-- | represents the cursor -->
<p class="|"></p>
<p class="my-p"></p>
<!-- ClassyAddClass -->
<!-- | represents the cursor -->
<p class="my-p |"></p>
ClassyRemoveClass
removes the class attribute itself from an element, whereas ClassyResetClass
only removes the string values from the class attribute.
<p class="my-p"></p>
<!-- ClassyRemoveClass -->
<p></p>
<!-- ClassyResetClass -->
<!-- | represents the cursor -->
<p class="|"></p>
- nvim-treesitter:
classy
depends on treesitter to parse your code - Language parsers: install each parser for the language you are writing
Use your favorite plugin manager to install.
I'm using packer.nvim
in this example.
use({
"jcha0713/classy.nvim",
})
Run setup function in your init.lua
file:
require('classy').setup({
-- these are the default values
use_double_quote = true,
insert_after_remove = false,
move_cursor_after_remove = true,
})
type: boolean
default: true
If this is set to false
, then classy
uses a pair of single quotation marks instead of double when adding a new class attribute to the tag. The default is set to true.
type: boolean
default: false
You can set insert_after_remove
to true if you want to change to insert mode every time you remove a class attribute. This is false by default.
type: boolean
default: true
Determines whether to move the cursor to the position where class removal happens. This is useful when you try to remove a class attribute while your cursor is on the closing tag of a deeply nested element.
Any PRs or issues to improve the quality of the plugin are appreciated. I have not tested for all kinds of UI framework out there so please let me know if there is any bug, so I can help!
The idea of classy
comes from this random tweet I found. Thank you @justinrassier
!