Member-only story
Neovim PDE — Web Development
Neovim is a highly customizable editor, and we can tailor it to suit our preferences and workflow.
In this article, we will configure a personalized development environment (PDE) for web programming.
This article is part of the Neovim PDE series.
The Neovim configuration files are available in this repository.
Getting Started
Neovim integrates well with other tools and frameworks used in web development. We can leverage Neovim’s built-in terminal emulator to run command-line tools or test web applications.
Neovim also has a rich ecosystem of plugins that can enhance our web development workflow.
This article will add specific configurations for web programming, such as HTML, CSS, JavaScript, TypeScript, and frameworks like React, Angular, Svelte, and Vue.js.
HTML and CSS
To support HTML and CSS development, we add the following configuration in the lua/pde/html.lua
file.
- We configure
nvim-treesitter
to install the HTML and CSS parsers. - Using
mason.nvim
, we install prettierd which is used for code formatting. - For
nvim-lspconfig
, we configure the HTML language server, Emmet language server, and CSS, LESS & SCSS language server. - For
null-ls.nvim
, we configureprettierd
as the formatter. - We configure
ccc.nvim
which is a color picker and highlighter plugin for Neovim.
With this configuration, LSP completion should work for HTML and CSS files.