Dev setup guide

26th of April, 2020 in guide

Dev setup guide

  1. Sublime text πŸ”—
    1. Installation
    2. Plugins
  2. Settings
  3. Key bindings
    1. Tip & tricks
    2. Get cursor scope
  4. Oh my zsh πŸ”—
    1. Installation
    2. Config
    3. Plugins
      1. zsh-autosuggestions πŸ”—
      2. zsh-syntax-highlighting πŸ”—
  5. Terminal tools
    1. Firacode Nerd Font Regular πŸ”—
    2. Solarized & dircolors (Check Make Linux terminal great again)
    3. fzf πŸ”—
    4. rg πŸ”—
  6. Nvm πŸ”—
  7. Neovim πŸ”—
    1. Installation
    2. Install vim-plug (Plugins manager) πŸ”—
    3. Config file
    4. Nvim-coc πŸ”—
  8. Sources

Sublime text πŸ”—

Installation

1
2
3
4
5
wget -qO - https://download.sublimetext.com/sublimehq-pub.gpg | sudo apt-key add -
sudo apt-get install apt-transport-https
echo "deb https://download.sublimetext.com/ apt/stable/" | sudo tee /etc/apt/sources.list.d/sublime-text.list
sudo apt-get update
sudo apt-get install sublime-text

Plugins

Settings

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
	"ignored_packages":
	[
		"Markdown",
		"Vintage"
	],

	// The number of spaces a tab is considered equal to
	"tab_size": 2,

	// Set to true to insert spaces when tab is pressed
	"translate_tabs_to_spaces": false,

	// Columns in which to display vertical rulers
	"rulers": [120],

	// Disables horizontal scrolling if enabled.
	// May be set to true, false, or "auto", where it will be disabled for
	// source code, and otherwise enabled.
	"word_wrap": "auto",
}

Key bindings

1
2
3
4
5
6
7
[
	{ "keys": ["alt+up"], "command": "select_lines", "args": {"forward": false} },
	{ "keys": ["alt+down"], "command": "select_lines", "args": {"forward": true} },
	{ "keys": ["ctrl+:"], "command": "toggle_comment", "args": { "block": false } },
	{ "keys": ["ctrl+shift+:"], "command": "toggle_comment", "args": { "block": true } },
	{ "keys": ["ctrl+Γ¨"], "command": "show_panel", "args": {"panel": "console", "toggle": true} },
]

Tip & tricks

Get cursor scope

ctrl + Γ¨ to enter the console and type print (view.scope_name(view.sel()[0].b))

Oh my zsh πŸ”—

Installation

Config

Plugins

zsh-autosuggestions πŸ”—

1
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

zsh-syntax-highlighting πŸ”—

1
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

Terminal tools

Firacode Nerd Font Regular πŸ”—

Solarized & dircolors (Check Make Linux terminal great again)

1
2
3
git clone git://github.com/sigurdga/gnome-terminal-colors-solarized.git ~/.solarized
cd ~/.solarized
/install.sh	# Chose option 1 twice

Open .zshrc and add the line

1
eval `dircolors ~/.dir_colors/dircolors`

fzf πŸ”—

Install with how-to-install-and-use-fzf

1
2
git clone --depth 1 https://github.com/junegunn/fzf.git ~/.fzf
~/.fzf/install

rg πŸ”—

1
sudo apt-get install ripgrep

Nvm πŸ”—

Neovim πŸ”—

Installation

Install vim-plug (Plugins manager) πŸ”—

1
2
curl -fLo ~/.local/share/nvim/site/autoload/plug.vim --create-dirs \
    https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim

Config file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
" Plugins will be downloaded under the specified directory.
" call plug#begin('~/.vim/plugged')
call plug#begin(stdpath('data') . '/plugged')

" Declare the list of plugins.

" themes
Plug 'tomasr/molokai' "Molokai theme
Plug 'mhartington/oceanic-next'
Plug 'ryanoasis/vim-devicons' "Icons for filetypes
Plug 'vim-airline/vim-airline' "Status bar
Plug 'vim-airline/vim-airline-themes' "Applicable themes
"Plug 'junegunn/vim-emoji'

" code
Plug 'neoclide/coc.nvim', {'branch': 'release'}	"autocompletion
Plug 'tpope/vim-fugitive' "git tools
Plug 'jiangmiao/auto-pairs' "autocomplete brackets
Plug 'mitermayer/vim-prettier'
Plug 'scrooloose/nerdcommenter' "Comment toggle
"Plug 'dense-analysis/ale' "ES linter -- replaced with coc-tsserver

" Language Syntax Support
Plug 'pangloss/vim-javascript' "JS highlighting
"Plug 'mxw/vim-jsx' "JSX syntax highlighting
"Plug 'leafgarland/typescript-vim' "TS syntax highlighting

" tools
Plug 'junegunn/fzf', { 'dir': '~/.fzf', 'do': './install --all' }
Plug 'jremmen/vim-ripgrep'
Plug 'scrooloose/nerdtree', {'on': 'NERDTreeToggle'} "Nerdtree
Plug 'freitass/todo.txt-vim'
"Plug 'terryma/vim-multiple-cursors'

" List ends here. Plugins become visible to Vim after this call.
call plug#end()

filetype plugin indent on

let mapleader="\<space>"
let maplocalleader="\<space>"

" Theme settings 
syntax enable 
colors molokai

let g:airline_powerline_fonts = 1
let airline#extensions#coc#error_symbol = 'Error:'

"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" Core Functionality
 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" deal with swps and backups here
" create backups
set backup
" tell vim where to put its backup files
set backupdir=/tmp
" tell vim where to put swap files
set dir=/tmp

"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" => NERDTree
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
"Changes NerdTree Toggle to Ctrl + n
"map Γ n :NERDTreeToggle<CR>
map <C-n> :NERDTreeToggle<CR>
"autocmd VimEnter * NERDTree "Toggles Nerdtree on vim open

" Use NERDTree when opening a directory
autocmd StdinReadPre * let s:std_in=1
autocmd VimEnter * if argc() == 1 && isdirectory(argv()[0]) && !exists("s:std_in") | exe 'NERDTree' argv()[0] | wincmd p | ene | exe 'cd '.argv()[0] | endif

"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" => ALE (ESlinter)
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
"let g:ale_sign_error = '❌'
"let g:ale_sign_warning = '⚠️'
"let g:airline#extensions#ale#enabled = 1

"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" => Conquer of Completion
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" jsonc (commented json) syntax highlighting
autocmd FileType json syntax match Comment +\/\/.\+$+

" use <tab> for trigger completion and navigate to the next complete item
function! s:check_back_space() abort
  let col = col('.') - 1
  return !col || getline('.')[col - 1]  =~ '\s'
endfunction

inoremap <silent><expr> <Tab>
      \ pumvisible() ? "\<C-n>" :
      \ <SID>check_back_space() ? "\<Tab>" :
      \ coc#refresh()

" use <tab> and <shift-tab> for navigating forward & backward within
" completion items
inoremap <expr> <Tab> pumvisible() ? "\<C-n>" : "\<Tab>"
inoremap <expr> <S-Tab> pumvisible() ? "\<C-p>" : "\<S-Tab>"

" use <cr> for validating the selected completion
inoremap <expr> <cr> pumvisible() ? "\<C-y>" : "\<C-g>u\<CR>"

"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" => Text, tab and indent related
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" 1 tab == 2 spaces
set shiftwidth=2
set tabstop=2     " tab spacing

set ai            " Auto indent
" set si            " Smart indent
set wrap          " Wrap lines
set nowrap        " Don't wrap text

" Show line numbers
" turn absolute line numbers on
:set number
:set nu

:set colorcolumn=120

" Code fold bliss
" https://www.linux.com/learn/vim-tips-folding-fun
" set foldmethod=indent

" Blink cursor on error instead of beeping (grr)
set visualbell
set t_vb=

" set clipboard to easily copy from vim and paste into the os
set clipboard=unnamed

" adds blue highlight to vim in visual mode selections
highlight Visual cterm=bold ctermbg=Blue ctermfg=NONE
" Change cursor shape between insert and normal mode in iTerm2.app
if $TERM_PROGRAM =~ "iTerm"
    let &t_SI = "\<Esc>]50;CursorShape=1\x7" " Vertical bar in insert mode
    let &t_EI = "\<Esc>]50;CursorShape=0\x7" " Block in normal mode
endif

" Shows the title within the window
set title titlestring=

"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" => Prettier
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" Autosave
" disables autosave feature
let g:prettier#autoformat = 0

" print spaces between brackets
" Prettier default: true
let g:prettier#config#bracket_spacing = 'true'

" runs prettier on file formats
autocmd BufWritePre *.js,*.jsx,*.mjs,*.ts,*.tsx,*.css,*.less,*.scss,*.json,*.graphql,*.md,*.vue PrettierAsync

" 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('ts', 'Red', 'none', '#ffa500', '#151515')
call NERDTreeHighlightFile('php', 'Magenta', 'none', '#ff00ff', '#151515')

" Custom mappings
map <C-j> <C-W>j
map <C-k> <C-W>k
map <C-h> <C-W>h
map <C-l> <C-W>l

Nvim-coc πŸ”—

Neovim config for frontend development

A guide to modern web development with neo-vim

Vim for front-end development in 2019

Sources

Graphic logo from Free Icon Library