Hi there. I wanted to share my vimrc file. I’m using this file for JavaScript and TypeScript projects. It’s compatible with JavaScript and TypeScript.
Screenshot
My .vimrc file is here;
set nocompatible " be iMproved, required
filetype off " required
" Set the runtime path to include Vundle and initialize
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()
" Plugin manager
Plugin 'VundleVim/Vundle.vim'
" Highlighting:
Plugin 'pangloss/vim-javascript'
" Snippets:
Plugin 'MarcWeber/vim-addon-mw-utils'
Plugin 'tomtom/tlib_vim'
Plugin 'garbas/vim-snipmate'
Plugin 'grvcoelho/vim-javascript-snippets'
" Lint:
Plugin 'w0rp/ale'
" Autocomplete:
Plugin 'Valloric/YouCompleteMe'
" File explorer:
Plugin 'scrooloose/nerdtree'
" System clipboard:
Plugin 'christoomey/vim-system-copy'
" Find file by text:
Plugin 'dyng/ctrlsf.vim'
" Find file by name:
set rtp+=~/.fzf
Plugin 'junegunn/fzf.vim'
" JSX Vim
Plugin 'maxmellon/vim-jsx-pretty'
" Vue Vim Plugin
Plugin 'posva/vim-vue'
" Vim Airline
Plugin 'vim-airline/vim-airline'
Plugin 'vim-airline/vim-airline-themes'
" Gruvbox
Plugin 'morhetz/gruvbox'
" Palenight
Plugin 'drewtempelmeyer/palenight.vim'
call vundle#end()
" Vim configuration:
" Indentation
filetype plugin indent on
set tabstop=2
set shiftwidth=2
set expandtab
" Line numbers:
set number
" No wrap:
set nowrap
" Disable preview window
set completeopt-=preview
" Auto open nerdtree
au VimEnter * NERDTree
" Plugins configuration:
" Snippets:
imap <C-J> <esc>a<Plug>snipMateNextOrTrigger
smap <C-J> <Plug>snipMateNextOrTrigger
" Lint:
let g:ale_echo_msg_error_str = 'E'
let g:ale_echo_msg_warning_str = 'W'
let g:ale_echo_msg_format = '[%linter%] %s [%severity%]'
" Sign error
let g:ale_sign_error = '❌'
let g:ale_sign_warning = '⚠️'
" Code formatter:
let b:ale_fixers = ['eslint']
let g:ale_fix_on_save = 1
" Vim Vue Optimization
let g:vue_pre_processors = []
" Theme config
autocmd vimenter * colorscheme gruvbox
" autocmd vimenter * colorscheme palenight
set background=dark
" File explorer:
" Show hidden files
let NERDTreeShowHidden=1
" NERDTress Ctrl+n
map <C-n> :NERDTreeToggle<CR>
" NERDTress File highlighting
function! NERDTreeHighlightFile(extension, fg, bg, guifg, guibg)
exec 'autocmd filetype nerdtree highlight ' . a:extension .' ctermbg='. a:bg .' ctermfg='. a:fg .' guibg='. a:guibg .' guifg='. a:guifg
exec 'autocmd filetype nerdtree syn match ' . a:extension .' #^\s\+.*'. a:extension .'$#'
endfunction
call NERDTreeHighlightFile('jade', 'green', 'none', 'green', '#151515')
call NERDTreeHighlightFile('ini', 'yellow', 'none', 'yellow', '#151515')
call NERDTreeHighlightFile('md', 'blue', 'none', '#3366FF', '#151515')
call NERDTreeHighlightFile('yml', 'yellow', 'none', 'yellow', '#151515')
call NERDTreeHighlightFile('config', 'yellow', 'none', 'yellow', '#151515')
call NERDTreeHighlightFile('conf', 'yellow', 'none', 'yellow', '#151515')
call NERDTreeHighlightFile('json', 'yellow', 'none', 'yellow', '#151515')
call NERDTreeHighlightFile('html', 'yellow', 'none', 'yellow', '#151515')
call NERDTreeHighlightFile('styl', 'cyan', 'none', 'cyan', '#151515')
call NERDTreeHighlightFile('css', 'cyan', 'none', 'cyan', '#151515')
call NERDTreeHighlightFile('coffee', 'Red', 'none', 'red', '#151515')
call NERDTreeHighlightFile('js', 'Red', 'none', '#ffa500', '#151515')
call NERDTreeHighlightFile('php', 'Magenta', 'none', '#ff00ff', '#151515')
" ctrlsf (find file by text)
" O - always leave CtrlSF window opening.
" <C-O> - open file in a horizontal split window.
" <C-J> - Move cursor to next match.
" <C-K> - Move cursor to previous match.
nmap <C-F> <Plug>CtrlSFPrompt
vmap <C-F> <Plug>CtrlSFVwordPath
" vim.fzf (find file by filename)
map <C-b> :Files<CR>