Neovim PDE — Web Development

Configure a PDE for web development.

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 configure prettierd 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.

LSP — HTML