O with occluded right edge to appear also as a C Open Web Components Guides Docs Blog Toggle darkmode

Tools: IDE

Your integrated development environment (IDE) is your primary tool while working with code, we recommend the following tools and plugins to make developing web components easier.

Visual Studio Code

We recommend VSCode. For setup please visit the instructions on the Visual Studio Code homepage.


We recommend the following user settings:

  "files.autoSave": "onWindowChange",
  "editor.tabSize": 2,
  "files.trimTrailingWhitespace": true,
  "[markdown]": {
    "files.trimTrailingWhitespace": false


We recommend the following plugins:

  • ESLint Get ESLint feedback directly in your IDE => more details under Linting
  • lit-plugin Syntax highlighting, type checking and code completion for lit-html
  • prettier Code formatter.
  • json-in-html Syntax Coloring for Import Maps, and JSON attributes.


Atom is an IDE created by Github. It provides near-native support for working with web components and has great support for template literals.


Intellij IDEA and other Jetbrains variants

Intellij IDEA is a Java IDE for developing computer software. It is developed by JetBrains (formerly known as IntelliJ) and is available as an Apache 2 Licensed community edition and in a proprietary commercial edition.

Syntax highlighting from HTML in template literals should be supported out of the box. Generic web component related functionalities such as Custom Elements support and completion is also available. You can read more about it here.


Support for CSS syntax highlighting in tagged css literals is partially provided via the Styled Components & Styled JSX plugin. Otherwise, the ecosystem for plugins is very limited and we do not recommend any.

Sublime Text 3

Sublime Text 3 is officially called a text editor however Sublime Text features plugins which give it a lot of the possibilities like an IDE. It is available for Windows, Linux, and OSX and can be evaluated for free.


Vim & NeoVim

Vim can be configured similiarly to an IDE, and with a vast amount of plugins, can be used to create a fluid development experience with lit-html and javascript.



Install the plugins with your favorite Vim package manager.

Example with vim-plug

call plug#begin('~/.vim/plugged')

Plug 'jonsmithers/vim-html-template-literals'
Plug 'pangloss/vim-javascript'
Plug 'ap/vim-css-color'
Plug 'sbdchd/neoformat'

call plug#end()

Configuring vim-html-template-literals

  "--- LIT highlighting and autclosing
  let g:htl_css_templates = 1
  let g:htl_all_templates = 1
  let g:closetag_filetypes = 'html,xhtml,phtml,javascript,typescript'
  let g:closetag_regions = {
        \ 'typescript.tsx': 'jsxRegion,tsxRegion,litHtmlRegion',
        \ 'javascript.jsx': 'jsxRegion,litHtmlRegion',
        \ 'javascript':     'litHtmlRegion',
        \ 'typescript':     'litHtmlRegion',
        \ }

Configuring Neoformat to format on save

autocmd BufWritePre *.js Neoformat
autocmd BufWritePre *.ts Neoformat
autocmd BufWritePre *.html Neoformat