Ontwikkel een Neovim-configuratie voor geavanceerd foutbeheer en waarschuwingen
description
Met deze prompt kun je een Neovim-configuratie creëren die je direct helpt fouten en waarschuwingen in je code te identificeren en te corrigeren, wat je code betrouwbaarder en onderhoudbaarder maakt. Het automatiseert foutdetectie en biedt directe feedback, wat efficiënter is dan handmatige controles of minder geïntegreerde tools.
prompt
Help me een Neovim-configuratie te maken die geavanceerde foutbeheer- en waarschuwingstools integreert om mijn codekwaliteit te verbeteren. Mijn primaire programmeertalen zijn: <voer je primaire programmeertalen in>. Ik wil onde ...
try_prompt
generate_helper
disclaimerOnPageApi
tags
ai_answers
provider: openai
model: gpt-4.1-nano
Natuurlijk! Hier is een uitgebreide Neovim-configuratie-aanbeveling voor geavanceerd foutbeheer en waarschuwingstools, gericht op JavaScript, HTML en CSS. Deze setup bevat aanbevolen plugins, configuraties en handige toetscombinaties.
---
### 1. **Pluginbeheer**
Gebruik bijvoorbeeld `packer.nvim` voor pluginbeheer:
```lua
-- init.lua of plugins.lua
require('packer').startup(function()
-- LSP en autocompletion
use 'neovim/nvim-lspconfig'
use 'hrsh7th/nvim-cmp'
use 'hrsh7th/cmp-nvim-lsp'
use 'L3MON4D3/LuaSnip'
-- Error en waarschuwing visualisatie
use {
'lewis6991/gitsigns.nvim',
config = function()
require('gitsigns').setup()
end
}
-- Linter en formatter
use 'jose-elias-alvarez/null-ls.nvim'
-- Realtime foutdetectie voor web development
use 'mfussenegger/nvim-lint'
-- Extra: statuslijn met foutwaarschuwingen
use 'nvim-lua/lsp-status.nvim'
end)
```
---
### 2. **LSP, Diagnostics en Formatting**
Configureer LSP voor JavaScript, HTML, CSS (bijvoorbeeld via `tsserver`, `html`, `cssls`) en integratie met `null-ls` voor linters en formatters.
```lua
local lspconfig = require('lspconfig')
-- LSP servers
lspconfig.tsserver.setup{}
lspconfig.html.setup{}
lspconfig.cssls.setup{}
-- null-ls voor extra linting en autofix
local null_ls = require('null-ls')
null_ls.setup({
sources = {
null_ls.builtins.diagnostics.eslint,
null_ls.builtins.formatting.prettier,
null_ls.builtins.code_actions.eslint,
},
})
-- Realtime linting
require('lint').register_linter('eslint_d', {
cmd = 'eslint_d',
stdin = true,
args = {'--stdin', '--stdin-filename', '$FILENAME'},
})
vim.api.nvim_create_autocmd({"BufWritePost"}, {
pattern = {"*.js", "*.html", "*.css"},
callback = function()
require('lint').try_lint()
end,
})
```
---
### 3. **Realtime foutdetectie en waarschuwingen**
Gebruik `nvim-lint` en LSP diagnostics voor realtime feedback:
```lua
-- Toon diagnostics in realtime
vim.diagnostic.config({
virtual_text = {
source = 'always', -- toont de bron van de waarschuwing
prefix = '●',
},
signs = true,
underline = true,
update_in_insert = true, -- realtime
})
```
### 4. **Automatische correcties en code acties**
Gebruik LSP code acties en formatteren:
```lua
-- Toetscombinatie voor code acties
vim.api.nvim_set_keymap('n', '<leader>ca', '<cmd>lua vim.lsp.buf.code_action()<CR>', { noremap=true, silent=true })
-- Formatteren
vim.api.nvim_set_keymap('n', '<leader>f', '<cmd>lua vim.lsp.buf.formatting()<CR>', { noremap=true, silent=true })
```
---
### 5. **Visualisatie en Navigatie**
Gebruik iconen voor diagnostics:
```lua
local signs = {Error = "✘", Warn = "▲", Hint = "⚑", Info = ""}
for type, icon in pairs(signs) do
local hl = "DiagnosticSign" .. type
vim.fn.sign_define(hl, {text = icon, texthl=hl, numhl=hl})
end
```
---
### 6. **Aanbevolen toetscombinaties**
| Toetscombinatie | Functionaliteit |
|-----------------|--------------------------------------------------|
| `<leader>ca` | Voert een code actie uit (bijvoorbeeld automatisch fixen) |
| `<leader>f` | Format de huidige buffer |
| `[d` | Ga naar vorige diagnostic |
| `]d` | Ga naar volgende diagnostic |
| `<leader>e` | Open diagnostic lijst |
---
### 7. **Aanvullende tips**
- Installeer ESLint en Prettier lokaal in je projecten voor betere linting en formatting.
- Overweeg `nvim-treesitter` voor betere syntax-highlighting en code-analyse.
- Gebruik `which-key.nvim` voor sneltoets-ontdekking.
---
### Samenvatting
Deze setup combineert LSP, `null-ls`, `nvim-lint` en visualisatietools om realtime fouten, waarschuwingen en automatische correcties te bieden voor JavaScript, HTML en CSS. Pas de sneltoetsen aan naar je voorkeur en zorg dat je de benodigde externe tools zoals ESLint, Prettier en eslint_d hebt geïnstalleerd.
---
Heeft u nog specifieke wensen of vragen?
provider: deepseek
model: deepseek-chat
Zeker! Hier is een complete Neovim-configuratie voor geavanceerde foutbeheer en codekwaliteit voor JavaScript, HTML en CSS:
## Vereiste Plugins (met lazy.nvim)
```lua
-- plugins/lsp.lua
return {
-- LSP Configuratie
{
"neovim/nvim-lspconfig",
dependencies = {
"williamboman/mason.nvim",
"williamboman/mason-lspconfig.nvim",
}
},
-- Mason voor LSP installatie
{
"williamboman/mason.nvim",
opts = {
ui = {
icons = {
package_installed = "✓",
package_pending = "➜",
package_uninstalled = "✗"
}
}
}
},
-- Completion engine
{
"hrsh7th/nvim-cmp",
dependencies = {
"hrsh7th/cmp-nvim-lsp",
"hrsh7th/cmp-buffer",
"hrsh7th/cmp-path",
"L3MON4D3/LuaSnip",
"saadparwaiz1/cmp_luasnip",
}
},
-- Syntax highlighting en parsing
{
"nvim-treesitter/nvim-treesitter",
build = ":TSUpdate"
},
-- Linting (ESLint, Stylelint)
{
"mfussenegger/nvim-lint",
config = function()
require("lint").linters_by_ft = {
javascript = { "eslint_d" },
typescript = { "eslint_d" },
javascriptreact = { "eslint_d" },
typescriptreact = { "eslint_d" },
css = { "stylelint" },
scss = { "stylelint" },
html = { "htmlhint" }
}
end
},
-- Formatting (Prettier)
{
"stevearc/conform.nvim",
opts = {
formatters_by_ft = {
javascript = { "prettier" },
typescript = { "prettier" },
javascriptreact = { "prettier" },
typescriptreact = { "prettier" },
css = { "prettier" },
scss = { "prettier" },
html = { "prettier" },
json = { "prettier" }
}
}
},
-- Diagnostics UI
{
"folke/trouble.nvim",
dependencies = { "nvim-tree/nvim-web-devicons" },
opts = {}
},
-- Inline diagnostics
{
"https://git.sr.ht/~whynothugo/lsp_lines.nvim",
config = function()
require("lsp_lines").setup()
end,
}
}
```
## Hoofdconfiguratie
```lua
-- init.lua
-- Basisinstellingen
vim.opt.number = true
vim.opt.relativenumber = true
vim.opt.tabstop = 2
vim.opt.shiftwidth = 2
vim.opt.expandtab = true
vim.opt.smartindent = true
-- LSP en diagnostics instellingen
vim.diagnostic.config({
virtual_text = false, -- Gebruik lsp_lines voor inline errors
signs = true,
underline = true,
update_in_insert = false,
severity_sort = true,
})
-- Plugins laden
require("lazy").setup("plugins")
-- Treesitter configuratie
require("nvim-treesitter.configs").setup({
ensure_installed = { "javascript", "typescript", "html", "css", "lua", "vim" },
highlight = { enable = true },
indent = { enable = true },
})
-- LSP Servers configureren
local lspconfig = require("lspconfig")
local capabilities = require('cmp_nvim_lsp').default_capabilities()
-- JavaScript/TypeScript (tsserver)
lspconfig.tsserver.setup({
capabilities = capabilities,
on_attach = function(client, bufnr)
-- Automatische formatteer bij opslaan
vim.api.nvim_create_autocmd("BufWritePre", {
buffer = bufnr,
callback = function()
require("conform").format({ async = false, timeout_ms = 1000 })
end
})
-- Automatisch linten bij opslaan
vim.api.nvim_create_autocmd("BufWritePost", {
buffer = bufnr,
callback = function()
require("lint").try_lint()
end
})
end
})
-- HTML LSP
lspconfig.html.setup({
capabilities = capabilities,
})
-- CSS LSP
lspconfig.cssls.setup({
capabilities = capabilities,
})
-- ESLint LSP
lspconfig.eslint.setup({
capabilities = capabilities,
})
-- Completion setup
local cmp = require('cmp')
cmp.setup({
snippet = {
expand = function(args)
require('luasnip').lsp_expand(args.body)
end,
},
mapping = cmp.mapping.preset.insert({
['<C-b>'] = 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.select_next_item(),
['<S-Tab>'] = cmp.mapping.select_prev_item(),
}),
sources = cmp.config.sources({
{ name = 'nvim_lsp' },
{ name = 'luasnip' },
}, {
{ name = 'buffer' },
})
})
```
## Toetscombinaties voor Optimalisatie
```lua
-- keymaps.lua
local keymap = vim.keymap.set
-- Diagnostics navigatie
keymap('n', '[d', vim.diagnostic.goto_prev, { desc = "Vorige diagnostic" })
keymap('n', ']d', vim.diagnostic.goto_next, { desc = "Volgende diagnostic" })
keymap('n', '<leader>e', vim.diagnostic.open_float, { desc = "Error details" })
keymap('n', '<leader>q', vim.diagnostic.setloclist, { desc = "Diagnostics list" })
-- LSP functies
keymap('n', 'gD', vim.lsp.buf.declaration, { desc = "Ga naar declaratie" })
keymap('n', 'gd', vim.lsp.buf.definition, { desc = "Ga naar definitie" })
keymap('n', 'K', vim.lsp.buf.hover, { desc = "Hover informatie" })
keymap('n', 'gi', vim.lsp.buf.implementation, { desc = "Ga naar implementatie" })
keymap('n', '<C-k>', vim.lsp.buf.signature_help, { desc = "Signature help" })
keymap('n', '<leader>wa', vim.lsp.buf.add_workspace_folder, { desc = "Workspace folder toevoegen" })
keymap('n', '<leader>wr', vim.lsp.buf.remove_workspace_folder, { desc = "Workspace folder verwijderen" })
keymap('n', '<leader>wl', function() print(vim.inspect(vim.lsp.buf.list_workspace_folders())) end, { desc = "Workspace folders tonen" })
keymap('n', '<leader>D', vim.lsp.buf.type_definition, { desc = "Type definitie" })
keymap('n', '<leader>rn', vim.lsp.buf.rename, { desc = "Rename" })
keymap('n', '<leader>ca', vim.lsp.buf.code_action, { desc = "Code actie" })
keymap('n', 'gr', vim.lsp.buf.references, { desc = "References" })
-- Trouble.nvim (diagnostics panel)
keymap("n", "<leader>xx", "<cmd>TroubleToggle<cr>", { desc = "Trouble toggle" })
keymap("n", "<leader>xw", "<cmd>TroubleToggle workspace_diagnostics<cr>", { desc = "Workspace diagnostics" })
keymap("n", "<leader>xd", "<cmd>TroubleToggle document_diagnostics<cr>", { desc = "Document diagnostics" })
-- LSP lines toggle
keymap("n", "<leader>ul", function()
require("lsp_lines").toggle()
vim.diagnostic.config({ virtual_text = not vim.diagnostic.config().virtual_text })
end, { desc = "Toggle LSP lines" })
-- Formatting
keymap("n", "<leader>f", function()
require("conform").format({ async = false, timeout_ms = 1000 })
end, { desc = "Format document" })
-- Linting
keymap("n", "<leader>l", function()
require("lint").try_lint()
end, { desc = "Lint current file" })
```
## Vereiste Tools Installeren
```bash
# Node.js packages
npm install -g typescript typescript-language-server
npm install -g vscode-langservers-extracted
npm install -g eslint_d prettier stylelint htmlhint
# Of via Mason in Neovim
:MasonInstall tsserver html-lsp css-lsp eslint_d prettier
```
## Aanbevolen Workflow
1. **Realtime foutdetectie**: LSP lines toont inline fouten
2. **Quick-fix**: Gebruik `<leader>ca` voor automatische correcties
3. **Diagnostics overzicht**: `<leader>xx` opent Trouble panel
4. **Automatische formatting**: Werkt bij opslaan
5. **Linting**: ESLint/Stylelint bij opslaan
Deze setup biedt complete realtime foutdetectie, waarschuwingen en automatische correcties voor je web development workflow!