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)

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
ubmit profile image
Guilherme de Andrade • • Edited

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

preview

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
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

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
vhoyer profile image
Vinícius Hoyer •

Gruvbox is the best thing ever, am I rigth?

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025 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!

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
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 ?

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025 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!

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
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. 😭

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
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

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
nerdy_girl profile image
Natalia •

This wallpaper is the best! 😍

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
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

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
patricnox profile image
PatricNox • • Edited

I love your wallpaper there, care to share?

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
jnorfoo profile image
jn •

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

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
gildotdev profile image
Gil •
  • Dank Mono
  • 1984 Theme
  • Bash

VS Code Sreenhot

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
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)

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
petecapecod profile image
Peter Cruckshank •

Oh yeah it's a big time saver

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
gildotdev profile image
Gil •

Thanks. yes, the built in terminal is great!

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
emmabostian profile image
Emma Bostian ✨ •

Love this theme!

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
gildotdev profile image
Gil •

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

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
kenice profile image
Kenice •

Beautiful setup.

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
aut0poietic profile image
Jer •

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

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
ggganea profile image
ggganea •

Ikr

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
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

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
hrmny profile image
Leah •

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

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
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.

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025 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

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025 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 😁

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025 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-...

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
mrksoftware profile image
Mirko Bellabarba •

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

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
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! 😁

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025 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 :)

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025 Thread
 
rpalo profile image
Ryan Palo •

Good luck!

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025 Thread
 
vigneshthedev profile image
Vigneshkumar Chinnachamy •

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

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025 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...

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025 Thread
 
kjbetz profile image
Kristopher Betz •

Thanks!

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
donnisnoni profile image
Don Alfons Nisnoni • • Edited

Screenshoot

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
mrksoftware profile image
Mirko Bellabarba •

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

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
dylantientcheu profile image
Dylan Tientcheu •

😁 Check this out,

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

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025 Thread
 
mrksoftware profile image
Mirko Bellabarba •

Thanks man! ;)

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
oshiole profile image
Mubarak Yaqoub-Okponobi •

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

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
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.

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
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
✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
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...

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
vimmer9 profile image
Damir Franusic •

Please do, thnx 👍

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

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025 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 :)

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
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

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
kiritchoukc profile image
KiritchoukC •

I had to flip my phone to find the extensions

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
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!

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
xxzozaxx profile image
Ahmed Khaled •

Spacemacs_user++;

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
tulkdan profile image
Pedro Correa •

wow, emacs + vim, gotta try it out

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
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

✨ อัปเดตล่าสุด: emmabostian/what does your ide code editor look like e - Kapook Update 2025
 
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.