Ontwerp een Neovim Configuratie voor Aanpasbare Multi-Taal Snippet Uitbreiding
description
Stelt gebruikers in staat een flexibel multi-taal snippetsysteem binnen Neovim te creëren dat zich aanpast aan verschillende codeercontexten, wat de ontwikkelsnelheid verhoogt en repetitief typen vermindert. Het biedt geavanceerde aanpassing met dynamische placeholders en taal-specifieke triggers, verder dan basis snippet-invoeging.
prompt
try_prompt
Help me een Neovim configuratie te ontwerpen die aanpasbare snippet uitbreiding mogelijk maakt voor meerdere programmeertalen. Ik wil contextgevoelige triggers en dynamische placeholders definiëren die zich aanpassen aan de taal wa ... more
generate_helper
...
tags
ai_answers
provider: openai
model: gpt-4.1-nano
Hier is een uitgebreide aanpak om een flexibele en aanpasbare Neovim-configuratie op te zetten voor snippets, geschikt voor meerdere talen zoals JavaScript, TypeScript, HTML en CSS. Ik geef je aanbevelingen voor plugins, voorbeeldconfiguraties en sneltoetsen.
### 1. Aanbevolen Snippet-Plugins
- **LuaSnip**: Een krachtige en uitbreidbare snippet-plugin geschreven in Lua, ideaal voor Neovim.
- **friendly-snippets**: Een verzameling community-snippets die je eenvoudig kunt integreren.
Installatie via bijvoorbeeld `packer.nvim`:
```lua
use {
'L3MON4D3/LuaSnip',
requires = { 'rafamadriz/friendly-snippets' }
}
```
### 2. Basisconfiguratie
```lua
local ls = require('luasnip')
local s = ls.snippet
local t = ls.text_node
local i = ls.insert_node
local f = ls.function_node
local c = ls.choice_node
-- Laad community snippets
require('luasnip.loaders.from_vscode').lazy_load()
-- Contextgevoelige snippets
local snippets = {
javascript = {
s("cl", {
t("console.log("),
i(1, "variable"),
t(");")
}),
},
typescript = {
s("cl", {
t("console.log("),
i(1, "variable"),
t(");")
}),
},
html = {
s("btn", {
t("<button class=\""),
i(1, "class-name"),
t("\">"),
i(2, "Button text"),
t("</button>")
}),
},
css = {
s("m", {
t("margin: "),
i(1, "0 auto"),
t(";")
}),
},
}
-- Snippet toevoegen op basis van bestandsindeling
local filetype_snippets = function(ft)
if snippets[ft] then
for _, snip in ipairs(snippets[ft]) do
ls.add_snippets(ft, { snip })
end
end
end
-- Automatisch laden van snippets afhankelijk van taal
vim.api.nvim_create_autocmd("FileType", {
pattern = { "javascript", "typescript", "html", "css" },
callback = function()
local ft = vim.bo.filetype
filetype_snippets(ft)
end,
})
```
### 3. Contextgevoelige triggers en dynamische placeholders
Gebruik `LuaSnip`'s functies voor dynamische content en placeholders:
```lua
s("func", {
t("function "),
f(function()
-- Haal de naam op uit de eerste insert
return vim.fn['expand']('<c-r>=luaeval("vim.fn.expand(\'<cword>\')")<CR>')
end),
t("() {\n"),
i(1, "// TODO"),
t("\n}"),
})
```
### 4. Snelletoetsen voor snippet gebruik en bewerken
Voor een vlotte workflow:
```lua
-- Expand of jump naar volgende placeholder
vim.api.nvim_set_keymap('i', '<C-k>', "<cmd>lua require'luasnip'.expand_or_jump()<CR>", {silent = true})
vim.api.nvim_set_keymap('s', '<C-k>', "<cmd>lua require'luasnip'.expand_or_jump()<CR>", {silent = true})
-- Spring terug naar vorige placeholder
vim.api.nvim_set_keymap('i', '<C-j>', "<cmd>lua require'luasnip'.jump(-1)<CR>", {silent = true})
vim.api.nvim_set_keymap('s', '<C-j>', "<cmd>lua require'luasnip'.jump(-1)<CR>", {silent = true})
-- Snippet bewerken
vim.api.nvim_set_keymap('n', '<Leader>rs', "<cmd>lua require'luasnip'.edit_snippets()<CR>", {silent = true})
```
### 5. Aanbevelingen
- **Gebruik van `friendly-snippets`**: Laad de volledige set voor snel starten.
- **Context-sensitieve snippets**: Voeg meerdere snippets toe per taal en gebruik autocommands voor automatische invoer.
- **Dynamische placeholders**: Maak gebruik van Lua functies in snippets voor aanpasbare, taalafhankelijke inhoud.
- **Snelletoetsen**: Zorg dat expand/jump en snippet-bewerking snel toegankelijk zijn.
---
Met deze opzet krijg je een krachtige, flexibele en uitbreidbare snippet-omgeving die zich aanpast aan de programmeertaal en context waarin je werkt.
provider: deepseek
model: deepseek-chat
Zeker! Hier is een complete Neovim configuratie voor aanpasbare snippet-uitbreiding met contextgevoelige triggers en dynamische placeholders.
## Aanbevolen Plugins
Voeg deze toe aan je plugin manager (`lazy.nvim` aanbevolen):
```lua
-- plugins/snippets.lua
return {
-- Snippet engine
'L3MON4D3/LuaSnip',
dependencies = {
-- Snippet collecties
'rafamadriz/friendly-snippets',
-- Snippet ondersteuning voor completion
'hrsh7th/nvim-cmp',
'saadparwaiz1/cmp_luasnip',
},
config = function()
require('luasnip').config.setup({})
require('luasnip.loaders.from_vscode').lazy_load()
end
}
```
## Basis Configuratie
```lua
-- lua/snippets/config.lua
local ls = require('luasnip')
local s = ls.snippet
local sn = ls.snippet_node
local t = ls.text_node
local i = ls.insert_node
local f = ls.function_node
local d = ls.dynamic_node
local fmt = require('luasnip.extras.fmt').fmt
local rep = require('luasnip.extras').rep
-- Contextgevoelige loader
local function get_snippets_for_filetype()
local ft = vim.bo.filetype
if ft == '' then return {} end
return require('luasnip').get_snippets(ft) or {}
end
-- Dynamische placeholder functies
local js_utils = {
-- Genereer componentnaam gebaseerd op bestandsnaam
component_name = function()
local filename = vim.fn.expand('%:t:r')
return filename:gsub('^%l', string.upper)
end,
-- Import pad gebaseerd op project structuur
import_path = function(args)
local target = args[1][1]
-- Voeg hier je project-specifieke logica toe
return './components/' .. target
end
}
```
## Taalspecifieke Snippets
### JavaScript/TypeScript Snippets
```lua
-- lua/snippets/javascript.lua
local js_snippets = {
-- React Function Component
s('rfc', fmt([[
import React from 'react';
interface {}Props {{
{}
}}
const {} = ({{{}}}: {}Props) => {{
return (
<div>
{}
</div>
);
}};
export default {};
]], {
f(js_utils.component_name),
i(1, '// props'),
rep(1),
i(2, 'props'),
rep(1),
i(3, '<!-- content -->'),
rep(1),
})),
-- useEffect Hook
s('use', fmt([[
useEffect(() => {{
{}
}}, [{}]);
]], {
i(1, '// effect logic'),
i(2, ''),
})),
-- Async Function
s('asf', fmt([[
const {} = async ({}): Promise<{}> => {{
{}
}};
]], {
i(1, 'functionName'),
i(2, 'params'),
i(3, 'void'),
i(4, '// implementation'),
})),
}
```
### HTML Snippets
```lua
-- lua/snippets/html.lua
local html_snippets = {
-- HTML5 Boilerplate
s('html5', fmt([[
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{}</title>
{}
</head>
<body>
{}
</body>
</html>
]], {
i(1, 'Document'),
i(2, '<!-- styles/scripts -->'),
i(3, '<!-- content -->'),
})),
-- Dynamische lijst
s('list', fmt([[
<ul>
{}{}
</ul>
]], {
d(1, function(args)
local count = tonumber(args[1][1]) or 3
local nodes = {}
for j = 1, count do
table.insert(nodes, t('<li>' .. j .. '</li>'))
if j < count then
table.insert(nodes, t('\n'))
end
end
return sn(nil, nodes)
end, {1}),
i(2),
})),
}
```
### CSS Snippets
```lua
-- lua/snippets/css.lua
local css_snippets = {
-- Flexbox Container
s('flex', fmt([[
.{} {{
display: flex;
justify-content: {};
align-items: {};
{}
}}
]], {
i(1, 'container'),
i(2, 'center'),
i(3, 'center'),
i(4, '/* additional styles */'),
})),
-- Media Query
s('media', fmt([[
@media (max-width: {}px) {{
{}
}}
]], {
i(1, '768'),
i(2, '/* mobile styles */'),
})),
}
```
## Snippet Triggers en Sneltoetsen
```lua
-- lua/snippets/keymaps.lua
local function setup_snippet_keymaps()
local ls = require('luasnip')
-- Spring tussen placeholders
vim.keymap.set({'i', 's'}, '<C-l>', function()
if ls.expand_or_jumpable() then
ls.expand_or_jump()
end
end, {silent = true})
-- Spring terug
vim.keymap.set({'i', 's'}, '<C-h>', function()
if ls.jumpable(-1) then
ls.jump(-1)
end
end, {silent = true})
-- Snippet selectie menu
vim.keymap.set('i', '<C-s>', function()
require('luasnip.extras.select_choice')()
end)
-- Snippet herladen (voor ontwikkeling)
vim.keymap.set('n', '<leader>sr', '<cmd>source ~/.config/nvim/after/plugin/snippets.lua<CR>')
end
```
## Auto Completion Integratie
```lua
-- lua/config/cmp.lua
local cmp = require('cmp')
local luasnip = require('luasnip')
cmp.setup({
snippet = {
expand = function(args)
luasnip.lsp_expand(args.body)
end,
},
mapping = cmp.mapping.preset.insert({
['<C-d>'] = cmp.mapping.scroll_docs(-4),
['<C-f>'] = cmp.mapping.scroll_docs(4),
['<C-Space>'] = cmp.mapping.complete(),
['<C-e>'] = cmp.mapping.abort(),
['<CR>'] = cmp.mapping.confirm({ select = true }),
['<Tab>'] = cmp.mapping(function(fallback)
if cmp.visible() then
cmp.select_next_item()
elseif luasnip.expand_or_jumpable() then
luasnip.expand_or_jump()
else
fallback()
end
end, {'i', 's'}),
}),
sources = cmp.config.sources({
{ name = 'nvim_lsp' },
{ name = 'luasnip' },
}, {
{ name = 'buffer' },
})
})
```
## Geavanceerde Dynamische Snippets
```lua
-- lua/snippets/advanced.lua
local advanced_snippets = {
-- TypeScript interface generator
s('tiface', {
d(1, function(args)
local interface_name = args[1][1] or 'MyInterface'
local nodes = {
t('interface ' .. interface_name .. ' {'),
t({'', ' '})
}
local function add_property()
return sn(nil, {
i(1, 'propertyName'),
t(': '),
i(2, 'string'),
t(';'),
i(0)
})
end
table.insert(nodes, add_property())
table.insert(nodes, t({'', '}'}))
return sn(nil, nodes)
end, {1})
}),
-- Conditionele snippet op basis van context
s('log', {
d(1, function()
local ft = vim.bo.filetype
if ft == 'javascript' or ft == 'typescript' then
return sn(nil, { t('console.log('), i(1), t(');') })
elseif ft == 'python' then
return sn(nil, { t('print('), i(1), t(')') })
else
return sn(nil, { t('-- log: '), i(1) })
end
end)
}),
}
```
## Laad Configuratie
```lua
-- after/plugin/snippets.lua
local function setup_snippets()
local ls = require('luasnip')
-- Laad snippets per filetype
ls.add_snippets('javascript', require('snippets.javascript'))
ls.add_snippets('typescript', require('snippets.javascript'))
ls.add_snippets('html', require('snippets.html'))
ls.add_snippets('css', require('snippets.css'))
-- Globale snippets
ls.add_snippets('all', require('snippets.advanced'))
-- Setup keymaps
require('snippets.keymaps').setup_snippet_keymaps()
end
setup_snippets()
```
## Gebruikstips en Sneltoetsen
- **`<Tab>`**: Spring naar volgende placeholder
- **`<S-Tab>`**: Spring naar vorige placeholder
- **`<C-l>`**: Expand of spring vooruit
- **`<C-h>`**: Spring terug
- **`<C-s>`**: Open snippet selectie menu
- **`<leader>sr`**: Herlaad snippets (ontwikkeling)
## Aanvullende Aanbevelingen
1. **Snippet Beheer**: Gebruik `friendly-snippets` voor kant-en-klare snippets
2. **Aanpassingen**: Bewaar je custom snippets in `~/.config/nvim/lua/snippets/`
3. **Debugging**: Gebruik `:LuaSnipListAvailable` om beschikbare snippets te zien
4. **Performance**: Gebruik lazy loading voor grote snippet collecties
Deze configuratie biedt een robuuste basis voor snippet management in Neovim met volledige aanpasbaarheid voor je JavaScript, TypeScript, HTML en CSS workflow!