DEV Community

Emma Bostian ✨
Emma Bostian ✨

Posted on

What Does Your IDE/Code Editor Look Like?

I have FINALLY gotten my code editor to be my ideal setup. But now I'm curious, what does your code editor/IDE look like?

VSCode

Editor

I'm using VS Code. Although I've used Sublime Text and Atom Editor previously, I've found VSCode to be the winner.

Font

I'm using the font Dank Mono. It's a paid font; it cost me about 40 British pounds, but is definitely worth it. Fira Code is a free alternative with ligatures (the cursive-style and connecting lines which make code editors beautiful).

Dank Mono

Dank Mono

Fira Code

Fira Code

Theme

I'm currently using the Dracula theme for my editor. Although I tend to flip flop between Dracula and Night Owl by Sarah Drasner and Pink Cat Boo.

Dracula

Dracula

Night Owl

Night Owl

Pink Cat Boo

Pink Cat Boo

Terminal

My code terminal is setup using OhMyZsh. Ali Spittel has a fun blog post all about terminal setup if you're interested in learning more!


Post pictures of your setup below!

Top comments (164)

Collapse
 
ubmit profile image
Guilherme de Andrade • Edited

Editor: Neovim
Font: Fira Code
Theme: Nord
Terminal: kitty
Shell: fish

preview

Collapse
 
ybbond profile image
Yohanes Bandung Bondowoso • Edited

pretty much the same as me!
mine is:

Editor: Neovim
Font: Heavily-Modified-Using-Glyph.App-Ligaturized-Font
Theme: Gruvbox
Terminal: kitty
Shell: fish

my-build

on mac here

Collapse
 
vhoyer profile image
Vinícius Hoyer

Gruvbox is the best thing ever, am I rigth?

Thread Thread
 
ybbond profile image
Yohanes Bandung Bondowoso

Yes! I discovered it for VSCode at first, then noticed I can make my kitty and nvim to use it.

Calming colors!

Collapse
 
xxzozaxx profile image
Ahmed Khaled

Hey would u mind share with me your exp with ligaturized-font. It's the font the put free-font glyph in any other font right ?

Thread Thread
 
ybbond profile image
Yohanes Bandung Bondowoso

I used glyphsapp.com to edit specific characters (for instance, the italicized "s") or rearrange the unicode char to be used as normal char.
And then, I converted it to be ligature with github.com/ToxicFrog/

hope that explains!

Collapse
 
nerdy_girl profile image
Natalia

This wallpaper is the best! 😍

Collapse
 
jacobherrington profile image
Jacob Herrington (he/him)

I love fish, but I swapped off of it when I started writing more documentation because I needed my examples to be backward compatible with bash. 😭

Collapse
 
gavinfernandes2012 profile image
Gavin Fernandes

You can always use the bass fisher plugin if you want bash compatibility. That way you can run bash scripts with bass script.sh

It's what I do to get fish to play nice with /etc/profile

Collapse
 
patricnox profile image
PatricNox • Edited

I love your wallpaper there, care to share?

Collapse
 
skydevht profile image
Holy-Elie Scaïde

Pretty much the same, but I'm on Mac so iTerm is the terminal and shell is zsh

Collapse
 
jnorfoo profile image
jn

Ohhhh!! What is this blue wallpaper with the cat? :) where can I download by any chance?

Collapse
 
gildotdev profile image
Gil
  • Dank Mono
  • 1984 Theme
  • Bash

VS Code Sreenhot

Collapse
 
gildotdev profile image
Gil

I forgot to mention the use of the Peacock extension from John Papa. dev.to/john_papa/peacock---choose-...

Collapse
 
emmabostian profile image
Emma Bostian ✨

Love this theme!

Collapse
 
tripol profile image
Ekanem

Lovely theme (and on a side note, I'm just realising that you can view and work from the terminal directly from VSCode. So helpful)

Collapse
 
petecapecod profile image
Peter Cruckshank

Oh yeah it's a big time saver

Collapse
 
gildotdev profile image
Gil

Thanks. yes, the built in terminal is great!

Collapse
 
kenice profile image
Kenice

Beautiful setup.

Collapse
 
aut0poietic profile image
Jer

Ack! OCD Moment incoming! MUST. RESIST. PLAYING. WITH. EDITOR. SETTINGS!!!!!!

Collapse
 
ggganea profile image
ggganea

Ikr

Collapse
 
rpalo profile image
Ryan Palo

My editor

  • VS Code (although I sometimes open Vim in the integrated terminal #yolo)
  • Fira Code
  • An Old Hope Theme
  • Zsh (although Bash and Powershell are pretty consistently in the rotation)
  • I have very strong love for ligatures

Also, I keep the Panda theme in rotation too!

Panda theme

Collapse
 
hrmny profile image
Leah

do you actually like powershell, or do you just use it because windows?

Collapse
 
rpalo profile image
Ryan Palo

I think it’s a neat idea! It puts object oriented programming into the command line, which is cool. I’m usually more quick/productive in Bash-y environments, but I enjoy powershell. It’s a gazillion times better than windows older command line environment.

Thread Thread
 
hrmny profile image
Leah

For me it takes the worst parts of a shell and a scripting language and combines them on top of some .net layer

I've written a bunch of scripts at work and I still despise it

Thread Thread
 
rpalo profile image
Ryan Palo

I wrote this post about it! I don’t know if it helps you, but it explains a bit better why I like it 😁

Thread Thread
 
simbo1905 profile image
Simon Massey

If you are stuck in a corporate windows build without a linux subsystem you can run Git Bash as the VS Code terminal dev.to/simbo1905/how-to-integrate-...

Collapse
 
mrksoftware profile image
Mirko Bellabarba

Hi, are you using Windows? If yes, how did you manage to install zsh? Thanks in advance :)

Collapse
 
rpalo profile image
Ryan Palo

If you’re on Windows 10, you can install Windows Subsystem Linux which is like a little mini Ubuntu or Debian (or some others) that live inside your windows install and play nicely. Vs code has a remote sessions extension that lets you use vs code as if you were inside that mini Linux, but with your Windows file system. It’s pretty great. If this isn’t quite enough detail, shoot me a DM here on DEV and I can help you get it set up! 😁

Thread Thread
 
mrksoftware profile image
Mirko Bellabarba

Oh thank you, got it! I’ll try in the following days and in case I have problems I’ll DM you! Thank you very much :)

Thread Thread
 
rpalo profile image
Ryan Palo

Good luck!

Thread Thread
 
vigneshthedev profile image
Vigneshkumar Chinnachamy

I tried to install zsh in wsl. But couldn't install the power line fonts for theming.

Thread Thread
 
dylantientcheu profile image
Dylan Tientcheu

I have 2 posts regarding this, you’ll be quickly setup

dev.to/dylantientcheu/improve-your...

dev.to/dylantientcheu/transforming...

Thread Thread
 
kjbetz profile image
Kristopher Betz

Thanks!

Collapse
 
donnisnoni profile image
Don Alfons Nisnoni • Edited

Screenshoot

Collapse
 
mrksoftware profile image
Mirko Bellabarba

Hi, are you using Windows? If yes, how did you manage to install zsh? Thanks in advance :)

Collapse
 
dylantientcheu profile image
Dylan Tientcheu
Thread Thread
 
mrksoftware profile image
Mirko Bellabarba

Thanks man! ;)

Collapse
 
oshiole profile image
Mubarak Yaqoub-Okponobi

How did you setup your terminal like that. Would love to do mine as well

Collapse
 
donnisnoni profile image
Don Alfons Nisnoni

Hi bro... i'm using Powerline for fish.. you can check this out here.. if you using windows, then install WSL first.

Collapse
 
vimmer9 profile image
Damir Franusic

VIM

Single screen:
vim

My current setup:

Configuration and plugins:

My .vimrc as requsted, not a pretty site :)

"+-----------+
"| " general |
"+-----------+
set exrc
set secure
set t_Co:256
set tabstop=8
set softtabstop=4
set shiftwidth=4
set nocursorline
"set noexpandtab
set expandtab
set number
"set foldmethod=syntax
"set foldlevel=99
set nofoldenable
set nowrap
"set viminfo^=%
syntax on
"set paste
highlight clear SignColumn
"set hidden (enable switching from changed buffer)
set hidden
set backupcopy=yes
set sessionoptions-=options
runtime! ftplugin/man.vim
let g:netrw_liststyle=0
"pathogen
execute pathogen#infect()

"+---------+
"| windows |
"+---------+
function! WinMove(key)
  let t:curwin = winnr()
  exec "wincmd ".a:key
  if (t:curwin == winnr()) "we havent moved
    if (match(a:key,'[jk]')) "were we going up/down
      wincmd v
    else
      wincmd s
    endif
    exec "wincmd ".a:key
  endif
endfunction
map <leader>h :call WinMove('h')<cr>
map <leader>k :call WinMove('k')<cr>
map <leader>l :call WinMove('l')<cr>
map <leader>j :call WinMove('j')<cr>
map <leader>wc :wincmd q<cr>
map <leader>wr <C-W>r
nmap <leader><left>  :3wincmd <<cr>
nmap <leader><right> :3wincmd ><cr>
nmap <leader><up>    :3wincmd +<cr>
nmap <leader><down>  :3wincmd -<cr>

"+-----------+
"| shortcuts |
"+-----------+
" plugins
map <F9> :UndotreeToggle<CR>
map <F8> :TagbarToggle<CR>
autocmd FileType c,cpp nnoremap <buffer><Leader>cf :<C-u>ClangFormat<CR>
" buffers
nnoremap <silent> <F12> :bnext<CR>
nnoremap <silent> <F11> :bprevious<CR>
nnoremap <F5> :CtrlPBuffer<CR>
nnoremap <Leader>q :Bdelete<CR>
" tabs
nnoremap <Leader>tc :tabclose<cr>
nnoremap <Leader>ts :tab split<cr>
" man
nnoremap K :Man <cword><CR>
" copy/paste
noremap <Leader>y "*y
noremap <Leader>p "+p

"+---------+
"| airline |
"+---------+
set laststatus:2
set ttimeoutlen:50
set encoding:utf-8
"let g:airline#extensions#tabline#enabled = 1
"let g:airline#extensions#tabline#fnamemod = ':t'
let g:airline#extensions#capslock#enabled = 1

let g:airline_powerline_fonts = 1
if !exists('g:airline_symbols')
    let g:airline_symbols = {}
endif

"+-----------+
"| syntastic |
"+-----------+
let g:syntastic_cpp_remove_include_errors = 1                                                                                                                                                                                                                       
let g:syntastic_cpp_check_header = 0
let g:syntastic_cpp_auto_refresh_includes = 1
let g:syntastic_mode_map={"mode":"active", "active_filetypes": [], "passive_filetypes": ["c","cpp"]}

"+-----+
"| Ale |
"+-----+
let g:ale_linters = {
\   'javascript': ['eslint', 'flow-language-server']
\}
let g:ale_fixers = {
\   'javascript': ['eslint']
\}
let g:ale_completion_enabled = 1
let g:ale_statusline_format = ['X %d', '? %d', '']
let g:ale_echo_msg_format = '%linter% says %s'
let g:ale_linters_explicit = 1
set completeopt=menu,menuone,preview,noselect,noinsert
map <F7> <Plug>(ale_fix)

"+-----------+
"| ultisnips |
"+-----------+
let g:UltiSnipsExpandTrigger="<c-j>"
let g:UltiSnipsJumpForwardTrigger="<c-j>"
let g:UltiSnipsJumpBackwardTrigger="<c-k>"

"+-----+
"| ycm |
"+-----+
let g:ycm_add_preview_to_completeopt = 1
let g:ycm_autoclose_preview_window_after_completion = 0
let g:ycm_autoclose_preview_window_after_insertion = 1
"let g:loaded_youcompleteme = 1
let g:ycm_register_as_syntastic_checker = 0
let g:ycm_collect_identifiers_from_tags_files = 0
let g:ycm_auto_trigger = 1
let g:ycm_warning_symbol = 'WW'
let g:ycm_error_symbol = 'EE'

"+-------------+
"| javascript  |
"+-------------+
let g:jsx_ext_required = 0
let g:javascript_plugin_flow = 1
let g:ctrlp_regexp = 1
let g:ctrlp_extensions = ['tag']
let g:ctrlp_custom_ignore = {
  \ 'dir':  '\.git$\|\.yardoc\|node_modules\|log\|tmp$',
  \ 'file': '\.so$\|\.dat$|\.DS_Store$'
  \}
let g:ctrlp_root_markers = ['.project_root']
let g:gutentags_project_root = ['.project_root']


"+---------+
"| "colors |
"+---------+
"let g:solarized_termtrans=1
"let g:solarized_termcolors=256
set background=dark
colorscheme gruvbox
highlight Normal ctermbg=None

And finally the list of plugins I use (using Pathogen)

~/.vim/bundle/

  • ale
  • auto-pairs
  • bbye
  • ctrlp.vim
  • emmet-vim
  • nerdcommenter
  • promptline.vim
  • tagbar
  • tlib_vim
  • ultisnips
  • undotree
  • vim-addon-mw-utils
  • vim-airline
  • vim-clang-format
  • vim-cpp-enhanced-highlight
  • vim-gitgutter
  • vim-gutentags
  • vim-javascript
  • vim-jsdoc
  • vim-jsx
  • vim-react-snippets
  • vim-snippets
  • vim-toml
  • YouCompleteMe
Collapse
 
tttfifo profile image
Todor Todorov

Hi Damir,

vim forever!

Are you able to configure vim on the framebuffer?
I really recommend it - you can have bold, italic, more colors.
I will share my vim screenshot in the general discussion to see...

Collapse
 
vimmer9 profile image
Damir Franusic

Please do, thnx 👍

P.S.
Now you know why my username is vimmer 😄

Thread Thread
 
tttfifo profile image
Todor Todorov

I did not know how to make screenshot on the framebuffer, but I just succeed to make one and posted it, sorry for the delay.

Nice to meet you, vimmer :)

Collapse
 
gand988 profile image
Matteo Zanda • Edited

Editor: VsCode
Font: Hack
Theme: Slack Theme Aubergine Dark
Terminal: VsCode terminal

  • extension list on the right

gand988 vscode

Collapse
 
kiritchoukc profile image
KiritchoukC

I had to flip my phone to find the extensions

Collapse
 
jacobherrington profile image
Jacob Herrington (he/him)

Hi Emma 👋,

I use Spacemacs which is basically Vim on Emacs! I use the default theme most of the time. I worked on my own theme that was easier on my eyes, but I sort of abandoned that project. It might be something I revisit soon.

Screenshot of Spacemacs!

In my terminal, I use iTerm2 with OhMyZsh and a private fork of Thoughtbot's dotfiles. It looks something like this:

Screenshot of git in my terminal!

Collapse
 
tulkdan profile image
Pedro Correa

wow, emacs + vim, gotta try it out

Collapse
 
xxzozaxx profile image
Ahmed Khaled

Spacemacs_user++;

Collapse
 
nickytonline profile image
Nick Taylor • Edited

Here's my VS Code Setup.

It's a little out of date as I use zsh for my shell now, Dank Mono for font and Night Owl is my go to theme these days, but the rest is pretty much the same.

My VS Code Setup

Collapse
 
maxpou profile image
Maxence Poutord • Edited

Ohhh great topic Emma!

This is my setup:

More details here 👇

GitHub logo maxpou / dotfiles

💻 my dotfiles (Ubuntu&MacOS)

Dotfiles

This setup is intended for:

  • 🐧 Ubuntu
  • 🐧 Unix Server (CLI/Bash only)
  • 🍎 MacOS

Special thanks to whoever I stole it from 😘

Dotfiles installation

# Ubuntu / MacOS:
git clone https://github.com/maxpou/dotfiles.git --recursive
cd dotfiles && bin/install
# Unix server:
cd dotfiles && bin/install_server

Application

VSCode

Command Line Apps

  • Zsh
  • Oh My Zsh: A framework to manage Zsh configuration
  • Hub: a wrapper for Git command (Git+Hub=GitHub)
  • thefuck: corrects the previous console command
  • lighthouse (CLI): (require NPM) Auditing, performance metrics, and best practices for Progressive Web Apps
  • vtop (require NPM)
  • curl
  • Tree

Browser - Brave (main)

Extensions list for Google Chrome (and Canary):

Some comments may only be visible to logged-in visitors. Sign in to view all comments.