Giter Club home page Giter Club logo

vim-setup's Introduction

Vim for Angular/VueJS/Dart development (MAC Setup)

1. Install vim-plug as a plugin manager

vim-plug advantages:

  • installs each plugin in its own directory
  • includes commands for plugin installation/update/removal: See the list of commands here
  • parallel installation/update of plugins
  • faster than Vundle

vim-plug installation:

  • Run this command in terminal
curl -fLo ~/.vim/autoload/plug.vim --create-dirs \
    https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim
  • Create the .vimrc file in your local dir, if there's none yet
touch ~/.vimrc
  • Open the .vimrc file and paste:
" Specify a directory for plugins
" - For Neovim: ~/.local/share/nvim/plugged
" - Avoid using standard Vim directory names like 'plugin'
call plug#begin('~/.vim/plugged')

" List here the plugins with Plug commands
" Shorthand notations can be used, as well as any valid GIT URLs
" Make sure you use single quotes
" See all possible ways to list a plugin: https://github.com/junegunn/vim-plug
" Ex: Plug 'https://github.com/username/reponame.git'

" Initialize the plugin system
call plug#end()

2. Install typescript

npm install -g typescript

3. Install typescript-vim plugin to enable typescript syntax support

  • Open ~/.vimrc file
  • Add Plug 'https://github.com/leafgarland/typescript-vim' before call plug#end()
  • Also add the following lines after call plug#end() to enable the plugin to display compilation errors in the QuickFix window:
let g:typescript_compiler_binary = 'tsc'
let g:typescript_compiler_options = ''
autocmd QuickFixCmdPost [^l]* nested cwindow
autocmd QuickFixCmdPost    l* nested lwindow
  • Open vim and type :PlugInstall
  • Open a .ts file with vim: vim someFile.ts
  • Run :make while editing a TypeScript file to execute the tsc compiler and display errors in the QuickFix window:

4. Install vim-js-pretty-template plugin to enable template strings syntax support

  • Open ~/.vimrc file
  • Add Plug https://github.com/Quramy/vim-js-pretty-template
  • Add the following lines at the end of the file:
autocmd FileType typescript JsPreTmpl html
autocmd FileType typescript syn clear foldBraces
  • Open vim and type :PlugInstall

FIXME: throws E488 trailing characters error when opening .ts files

5. Install vim-javascript plugin to enable javascript syntax highlighting

  • Open ~/.vimrc file
  • Add Plug https://github.com/pangloss/vim-javascript
  • Open vim and type :PlugInstall

6. Install TSUQUYOMI to bring IDE like features to VIM

  • Open ~/.vimrc file
  • Add Plug 'https://github.com/Shougo/vimproc.vim', {'do' : 'make'}
  • Add Plug 'https://github.com/Quramy/tsuquyomi'
  • Open vim and type :PlugInstall

7. Install YouCompleteMe plugin to to get completion suggestions automatically while typing

  • Open ~.vimrc file
  • Add Plug 'https://github.com/Valloric/YouCompleteMe'
  • Open vim and type :PlugInstall

If you're in Mojave and you get an error like:

line    4:
Exception MemoryError: MemoryError() in <module 'threading' from '/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/threading.pyc'> ignored
Segmentation fault: 11

do the following:

8. Syntax checking

  • Open ~/.vimrc
  • Add Plug 'https://github.com/vim-syntastic/syntastic'
  • Add the following lines at the end of the file:
set statusline+=%#warningmsg#
set statusline+=%{SyntasticStatuslineFlag()}
set statusline+=%*
let g:syntastic_check_on_open = 1
let g:syntastic_check_on_wq = 0
let g:tsuquyomi_disable_quickfix = 1
let g:syntastic_typescript_checkers = ['tsuquyomi'] 
  • Open vim and type :PlugInstall

9. Other plugins

  • Add Plugin 'https://github.com/editorconfig/editorconfig-vim'

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.