html5.vim VS vim-css-color

html5.vim: Syntax & indentation for HTML5 and SVG (required for vim-svelte)

For web development I just have a couple of syntax plugins: html5.vim, vim-javascript. And installed these language servers: html, cssls, tsserver (install instructions are here). To get completion I use nvim-cmp and nvim-lspconfig.

I use othree/html5.vim and lumiliet/vim-twig. It seems to be ok.

Check this out: https://github.com/ap/vim-css-color/issues/85

:set number :set autoindent :set tabstop=5 :set shiftwidth=4 :set smarttab :set softtabstop=4 :set mouse=a call plug#begin() Plug 'http://github.com/tpope/vim-surround' " Surrounding ysw) Plug 'https://github.com/preservim/nerdtree' " NerdTree Plug 'https://github.com/tpope/vim-commentary' " For Commenting gcc & gc Plug 'https://github.com/vim-airline/vim-airline' " Status bar Plug 'https://github.com/lifepillar/pgsql.vim' " PSQL Pluging needs :SQLSetType pgsql.vim Plug 'https://github.com/ap/vim-css-color' " CSS Color Preview Plug 'https://github.com/rafi/awesome-vim-colorschemes' " Retro Scheme Plug 'https://github.com/neoclide/coc.nvim' " Auto Completion Plug 'https://github.com/ryanoasis/vim-devicons' " Developer Icons Plug 'https://github.com/tc50cal/vim-terminal' " Vim Terminal Plug 'https://github.com/preservim/tagbar' " Tagbar for code navigation Plug 'https://github.com/terryma/vim-multiple-cursors' " CTRL + N for multiple cursors Plug 'https://github.com/rstacruz/vim-closer' " For brackets autocompletion " Auto-completion For Javascript, typescript, html, jsx ...etc Plug 'neoclide/coc.nvim', {'do': 'yarn install --frozen-lockfile'} " this is for auto complete, prettier and tslinting let g:coc_global_extensions = ['coc-tslint-plugin', 'coc-tsserver', 'coc-css', 'coc-html', 'coc-json', 'coc-prettier'] " list of CoC extensions needed Plug 'jiangmiao/auto-pairs' "this will auto close ( [ { " these two plugins will add highlighting and indenting to JSX and TSX files. Plug 'yuezk/vim-js' Plug 'HerringtonDarkholme/yats.vim' Plug 'maxmellon/vim-jsx-pretty' set encoding=UTF-8 call plug#end() nnoremap :NERDTreeFocus nnoremap :NERDTree nnoremap :NERDTreeToggle nnoremap :call CocActionAsync('jumpDefinition') nmap :TagbarToggle :set completeopt-=preview " For No Previews :colorscheme jellybeans let g:NERDTreeDirArrowExpandable="+" let g:NERDTreeDirArrowCollapsible="~" " --- Just Some Notes --- " :PlugClean :PlugInstall :UpdateRemotePlugins " " :CocInstall coc-python " :CocInstall coc-clangd " :CocInstall coc-snippets " :CocCommand snippets.edit... FOR EACH FILE TYPE " air-line let g:airline_powerline_fonts = 1 if !exists('g:airline_symbols') let g:airline_symbols = {} endif " airline symbols let g:airline_left_sep = '' let g:airline_left_alt_sep = '' let g:airline_right_sep = '' let g:airline_right_alt_sep = '' let g:airline_symbols.branch = '' let g:airline_symbols.readonly = '' let g:airline_symbols.linenr = '' inoremap pumvisible() ? coc#_select_confirm() : ""

call plug#begin('~/.config/nvim/plugged') Plug 'http://github.com/tpope/vim-surround' " Surrounding ysw) Plug 'https://github.com/preservim/nerdtree' " NerdTree Plug 'https://github.com/tpope/vim-commentary' " For Commenting gcc & gc Plug 'https://github.com/vim-airline/vim-airline' " Status bar Plug 'https://github.com/ap/vim-css-color' " CSS Color Preview Plug 'https://github.com/rafi/awesome-vim-colorschemes' " Retro Scheme Plug 'https://github.com/ryanoasis/vim-devicons' " Developer Icons Plug 'https://github.com/tc50cal/vim-terminal' " Vim Terminal Plug 'https://github.com/preservim/tagbar' " Tagbar for code navigation Plug 'https://github.com/terryma/vim-multiple-cursors' " CTRL + N for multiple cursors call plug#end() nnoremap :NERDTreeFocus nnoremap :NERDTree nnoremap :NERDTreeToggle nmap :TagbarToggle let g:NERDTreeDirArrowExpandable="+" let g:NERDTreeDirArrowCollapsible="~"

call plug#begin() Plug 'https://github.com/preservim/nerdtree' " NerdTree Plug 'https://github.com/tpope/vim-commentary' " For Commenting gcc & gc Plug 'https://github.com/vim-airline/vim-airline' " Status bar Plug 'https://github.com/ap/vim-css-color' " CSS Color Preview Plug 'https://github.com/rafi/awesome-vim-colorschemes' " Retro Scheme Plug 'https://github.com/tc50cal/vim-terminal' " Vim Terminal Plug 'https://github.com/terryma/vim-multiple-cursors' " CTRL + N for multiple cursors Plug 'https://github.com/preservim/tagbar' " Tagbar for code navigation Plug 'neoclide/coc.nvim', {'branch': 'release'} Plug 'nvim-lua/plenary.nvim' Plug 'nvim-telescope/telescope.nvim', { 'tag': '0.1.0' } call plug#end()

set encoding=UTF-8 set number syntax on " set tab to 4 spaces filetype plugin indent on set tabstop=4 set shiftwidth=4 set expandtab " Tab / Shift Tab to navigate between tabs nnoremap :tabnext nnoremap :tabprevious " CoC settings set nobackup set nowritebackup set cmdheight=2 set updatetime=300 set shortmess+=c if has("nvim-0.5.0") || has("patch-8.1.1564") set signcolumn=number else set signcolumn=yes endif inoremap \ pumvisible() ? "\" : \ CheckBackspace() ? "\" : \ coc#refresh() inoremap pumvisible() ? "\" : "\" function! CheckBackspace() abort let col = col('.') - 1 return !col || getline('.')[col - 1] =~# '\s' endfunction if has('nvim') inoremap coc#refresh() else inoremap coc#refresh() endif inoremap pumvisible() ? coc#_select_confirm() \: "\u\\=coc#on_enter()\" nmap [g (coc-diagnostic-prev) nmap ]g (coc-diagnostic-next) nmap gd (coc-definition) nmap gy (coc-type-definition) nmap gi (coc-implementation) nmap gr (coc-references) nnoremap K :call ShowDocumentation() function! ShowDocumentation() if CocAction('hasProvider', 'hover') call CocActionAsync('doHover') else call feedkeys('K', 'in') endif endfunction autocmd CursorHold * silent call CocActionAsync('highlight') " VimPlug plugin manager call plug#begin() Plug 'https://github.com/vim-airline/vim-airline' Plug 'https://github.com/tpope/vim-commentary' Plug 'https://github.com/ap/vim-css-color' Plug 'https://github.com/rafi/awesome-vim-colorschemes' Plug 'https://github.com/neoclide/coc.nvim' Plug 'othree/html5.vim' Plug 'pangloss/vim-javascript' Plug 'evanleck/vim-svelte', {'branch': 'main'} call plug#end() " set the colorsheme " list: https://github.com/rafi/awesome-vim-colorschemes colorscheme minimalist

Installed the plugin by running git clone https://github.com/ap/vim-css-color in this folder

https://github.com/ap/vim-css-color is what I used before switching. This works on vim.

:set number :set relativenumber :set autoindent :set tabstop=2 :set shiftwidth=2 :set smarttab :set softtabstop=2 :set mouse=a :set guifont=Fira\ Code\ 11 call plug#begin() Plug 'http://github.com/tpope/vim-surround' " Surrounding ysw) Plug 'https://github.com/preservim/nerdtree' " NerdTree Plug 'https://github.com/tpope/vim-commentary' " For Commenting gcc & gc Plug 'https://github.com/vim-airline/vim-airline' " Status bar Plug 'https://github.com/ap/vim-css-color' " CSS Color Preview Plug 'https://github.com/rafi/awesome-vim-colorschemes' " Retro Scheme Plug 'https://github.com/neoclide/coc.nvim' " Auto Completion Plug 'https://github.com/ryanoasis/vim-devicons' " Developer Icons Plug 'https://github.com/tc50cal/vim-terminal' " Vim Terminal Plug 'https://github.com/preservim/tagbar' " Tagbar for code navigation Plug 'https://github.com/terryma/vim-multiple-cursors' " CTRL + N for multiple cursors Plug 'https://github.com/rstacruz/vim-closer' " Auto braces & bracket closing set encoding=UTF-8 call plug#end() nnoremap :NERDTreeFocus nnoremap :NERDTree nnoremap :NERDTreeToggle nmap :TagbarToggle :set completeopt-=preview " For No Previews set termguicolors :colorscheme onehalfdark " Setting Neovim color theme let g:NERDTreeDirArrowExpandable="+" let g:NERDTreeDirArrowCollapsible="~" " air-line let g:airline_powerline_fonts = 1 let g:airline_theme='onehalfdark'

set number set relativenumber set clipboard=unnamed set autoindent set tabstop=4 set shiftwidth=4 set smarttab set softtabstop=4 set mouse=a :filetype indent on :filetype plugin on set ruler call plug#begin('C:/Users/ABIPRAVI/AppData/Local/nvim/plugged') " below are some vim plugins for demonstration purpose. " add the plugin you want to use here. Plug 'Chiel92/vim-autoformat' Plug 'davidhalter/jedi-vim' Plug 'raimon49/requirements.txt.vim', {'for': 'requirements'} Plug 'hail2u/vim-css3-syntax' Plug 'gko/vim-coloresque' Plug 'vim-scripts/pylint.vim' Plug 'tpope/vim-haml' Plug 'mattn/emmet-vim' Plug 'dracula/vim', { 'as': 'dracula' } Plug 'joshdick/onedark.vim' Plug 'iCyMind/NeoSolarized' " Use release branch (recommend) Plug 'neoclide/coc.nvim', {'branch': 'release'} Plug 'neoclide/coc.nvim' Plug 'junegunn/vim-easy-align' Plug 'https://github.com/junegunn/vim-github-dashboard.git' Plug 'scrooloose/nerdtree', { 'on': 'NERDTreeToggle' } Plug 'tpope/vim-fireplace', { 'for': 'clojure' } Plug 'rdnetto/YCM-Generator', { 'branch': 'stable' } Plug 'fatih/vim-go', { 'tag': '*' } Plug 'nsf/gocode', { 'tag': 'v.20150303', 'rtp': 'vim' } Plug 'junegunn/fzf', { 'dir': '~/.fzf', 'do': './install --all' } Plug 'vim-airline/vim-airline' Plug 'vim-airline/vim-airline-themes' Plug 'github/copilot.vim' Plug 'https://github.com/rafi/awesome-vim-colorschemes' Plug 'https://github.com/ap/vim-css-color' Plug 'https://github.com/ryanoasis/vim-devicons' Plug 'pangloss/vim-javascript' Plug 'sbdchd/neoformat' Plug 'leafgarland/typescript-vim' Plug 'peitalin/vim-jsx-typescript' Plug 'styled-components/vim-styled-components', { 'branch': 'main' } Plug 'tpope/vim-commentary' Plug 'jparise/vim-graphql' Plug 'kien/ctrlp.vim' Plug 'jiangmiao/auto-pairs' Plug 'ryanoasis/vim-devicons' call plug#end() " Use for trigger snippet expand. imap (coc-snippets-expand) " " " Use for select text for visual placeholder of snippet. vmap (coc-snippets-select) " " " Use for jump to next placeholder, it's default of coc.nvim let g:coc_snippet_next = '' " " " Use for jump to previous placeholder, it's default of coc.nvim let g:coc_snippet_prev = '' " " " Use for both expand and jump (make expand higher priority.) imap (coc-snippets-expand-jump) " " " Use x for convert visual selected code to snippet xmap x (coc-convert-snippet) vmap f (coc-format-selected) nmap f (coc-format-selected) command! -nargs=0 Prettier :CocCommand prettier.formatFile let g:airline#extensions#tabline#enabled = 1 let g:airline#extensions#tabline#left_sep = ' ' let g:airline#extensions#tabline#left_alt_sep = '|' nnoremap :NERDTreeFocus nnoremap :Prettier nnoremap :PlugInstall nnoremap :NERDTree nnoremap :NERDTreeToggle nnoremap :w :colorscheme dracula