Everyday I get a few emails asking about the specifics of some piece of software or hardware I use.
I change up things fairly often, so this page will serve as a living document and a place to point curious developers to when I get asked.
If there is something missing leave a comment below or ask in my AMA — happy to chat and help you figure out your own situation.
Editor + Terminal
- Visual Studio Code is my current editor which I switched to in September 2017 after years of Sublime Text.
- Sublime Text V3 beta is used in most of my video tutorials — I write more about my setup in my book.
- I created a theme called Cobalt2 for VS Code, Sublime Text and iTerm2 v3 which I use.
- I’m currently using Operator Mono for a font. Yes I paid the $200 for it. Before that I used Inconsolata for many years.
- I use Operator Mono in Sublime, iTerm2 (with these settings: http://wes.io/fYY8), and in Chrome Dev tools with Dev Tools Author
- The cursive font you see is just the italic weight of Operator Mono. Your theme must have italics in it for it to work – my Cobalt2 uses italics heavily.
- I’m currently switching over to Hyper for my terminal.
- The JavaScript suggestions you see in my videos is called JavaScript Completions – you might have to play with the settings to get it to not popup some of the node completions.
- You can see most of my config files (.eslint, VS Code settings) over at my Dot Files repo but please don’t just take these settings carte blanche – they work for me but might not be the best
Desktop Apps
- I use Text Expander for canned responses and for most of my code snippets
- I’m a huge Alfred fan and have many workflows.
- I use Things App with a GTD mindset for managing my tasks.
- I design almost entirely in Sketch
- I backup with 2 time machines local HDDs, Dropbox for most files, and BackBlaze for my entire hard drive.
- I write in Sublime Text and use Marked to preview. I have an entire series about this.
- The cool Emoji picker you see me use in my videos is Rocket
Recording
- I use ScreenFlow to record and edit my screencasts
- I wrote about my animated gif workflow here
- My mic is a Heil PR40 on a PL2T boom arm. Many of my videos were recorded on the cheaper but still amazing AT2020
- I use a DBX286s to do almost all my audio compression and processing as a I record and pipe it into my computer with a Focusrite 2i2
- My webcam is a Logitech HD Pro c920
- All this gear is pretty demanding, so I use an
Anker 7/3 port USB 3.0 hub DIED 😵Amazon Basics 10 Port USB Hub to make it all work at once while only having to plug in a single cable.
Desk Setup
- My main monitor is a 32″ 4k LG 32ud59
- To my right I run a vertical 27″ 4k Dell 4k P2715Q and an open loaded macbook pro nested on a Rain mStand
- I sit on a polished aluminum Herman Miller aeron
- My desk is an 8 foot oak butcher block countertop on legs
- Here is a photo of my setup
- Everything — Monitors, Ethernet, Hard Drives, Webcam, and Power — is plugged in via a single USB cable and piped into my Caldigit TS3 Plus – This is a pretty sweet setup!
Other Gear
- After a lengthy search for the perfect backpack for both traveling and schlepping gear around the city I bought the Peak Design Everyday Backpack 30L and it’s incredible (and very expensive 😑).
Hey, it’s nice to share, thanks!
Hi there,
If you are using dropbox to backup ur site folder, did you found a way to ignore node_modules.
thanks a lot
Nope – it’s not possible and I’ve spent many hours trying to find a workaround. Either just deal with it or don’t put node_modules sites in Db
Yeah it’s quite annoying. I wish they would implement some sort of .dropboxignore for us people that really need it :-(.
Well you could do it by going to Preferences > Account > Selective Sync, but it’s just a pain in the ass each time
In a related issue, sometimes symlinks in node_modules break because of Dropbox dereferencing. This fixes them: https://github.com/jprichardson/fix-dropbox-node_modules-symlinks
More specifically, inside node_modules/.bin of each project, the symlinks can become dereferenced by Dropbox because on another machine, symlinks to something outside of Dropbox don’t make sense. Running the above script repairs them.
you can manually uncheck that folder in Dropbox’s selective sync feature. You can’t do it automatically but you can go into your project and unsync folders.
You can’t automatically ignore file types but YOU CAN go into Dropbox’s selective sync and remove the node_mod directory from your project directory…
Is the ‘selective sync’ feature of DB not sufficient for this? It’s pretty easy to ignore a folder or subfolder (and children) with DB.
No – selective sync does the opposite. It deletes the files from your HDD and keeps them in Dropbox.
Not to mention it takes ~15 minutes for selective sync to populate the folders on my machine.
I’m juuust about done with dropbox
mega.nz does the trick 🙂
I rather not trust my data with a company that may be raided again haha
Actually, I create node_modules directory and don’t select it for syncing. Then I can put whatever I want in this node_modules because it exists in my computer but never syncs files inside to Dropbox servers. If you have existing node_modules directory, yes, Dropbox deletes it completely when you don’t select it for syncing. You need to install modules again. That sucks but what can be more annoying than symlinks which aren’t synced by Dropbox?
Had the same! Went for owncloud (Open Source) on a own Digital Ocean Droplet.
In owncloud you can exclude files based on patterns (like a gitignore).
Works very well for me.
lol 2 years later. Right there with ya.
You could create a local git repository with a .gitignore file and put a clone of that repo in your Dropbox folder. You just need to set up some hooks that automatically update the cloned repo when you check in. Not the easiest solution, but maybe an alternative.
Hey, just a tip: use https://github.com/stevegrunwell/asimov for this. Simply run `asimov ` in the terminal and it will add all vendors to the time maschine ignore list internally.
What made you decide on text expander over using snippets on ST3?
For advanced snippets with multiple cursors and defaults I still use Sublime Text, but for simple ones I use Text Expander because I can use them anywhere – like CodePen, Slack, etc..
Hi Wes,
Just curious, what’s your app for color picking, file/folder comparison and vcs (git) handling?
Maybe can recommend some more productivity apps apart from Things that you’re a fan of?
I use Sip to color pick
I only use the command line to do Git – I’ve tried many apps but nothing has stuck yet.
Try Tower, it’s awesome
I’m with you on that, Nothing beats the good old terminal for git operations and vim with the correct plugins. I really never have to leave my iterm2 setup.
Although I’m liking Atom in vim mode
Everyone at work thinks I’m crazy to use command line over SourceTree or Tower. The other day I was vindicated. A developer had a file he was trying to discard in SourceTree. Every time he discarded it, it just came right back. I told him to try the terminal. Worked like a charm. That file WAS gone but ST was caching it or something.
Try Git Kracken – it’s awesome and simple to use. Preferred it over Sourcetree
https://www.gitkraken.com/
Man! Which keyboard do you use?
Standard apple Bluetooth one
Thanks for putting this post together! I think it’d be great if everyone did something similar to this as I’m sure I’m not the only one who likes learning about alternative ways people work (which can inadvertently enhance my own).
Visual Studio Code hit version 1.0 a few days ago. There’re not that many keyboard shortcuts and extensions yet, it’s slow to start but the footprint is comparable to Sublime’s. Wes, what’s your opinion about this text editor?
Great but nothing that tempts me to try it
Has your opinion of VS Code remained the same as of the most recent updates? Thanks!
LOL. 😜
Nice post, I discovered the Chrome Dev tools with Dev Tools Author and it rocks!
Great article Wes, it’s always interesting to share these information 🙂
Hi Wes,
I’ve set my font in Sublime Text 3 to Operator Mono, but certain elements that you have set to italic (.class-names, var, etc) are not italicized for me. My colleague is using Coda and is able to set certain elements to italic. When I loaded Operator on Atom and set the font to Operator Mono, I added this to the stylesheet, and it fixed the issue,
atom-text-editor::shadow{
.entity.other.attribute-name {
font-style: italic;
}
}
Thanks for any feedback.
Could you please share your Sublime plugins?
Hey Wes,
Just following your videos on LearnRedux.com and I can see when you are writing JSX you get the autocompletion for HTML tags. I have Emmet and have done a bit of searching but cannot seem to get this to work in JS files; all the solutions seem to be for JSX files.
I was wondering if, along with this (package?) for the autocompletion to happen you might be able to publish your installed packages for Sublime, as I have also tried Atom, but Sublime just comes out on top for me.
It seems your repo (https://github.com/wesbos/Sweet-Sublime-Text-2-Prefs) hasn’t been updated in 5 years albeit this is for V2 of sublime.
Thanks,
Phil
Hi, i know your comment is almost 2 years old but i was having the same problem and i hope that by adding the solution here, it might help someone else.
Emmet wasn’t enabled for javascript by default. It was working fine when the language mode was set as ‘Javascript React (javascriptreact)’ but not when set for ‘Javascript (Babel) (javascript)’.
The fix is weird but it worked for me.
Open preferences (cmd ,) then add this to user preferences:
“emmet.includeLanguages”: {
“javascript”: “javascriptreact”,
},
Save and you should be good to go.
This is weird because even though the javascriptreact setting was working only by adding the above could i get it working for javascript too.
I using Operator Mono fonts too, but italic and bold doesn’t work on my Sublime Text 3.
I’m using Ubuntu OS 16.04 LTS Version. I tried use Color Scheme but didn’t work (Cobalt2 also).
Are you have some solution for me? and some other users from https://forum.sublimetext.com/t/italic-bold-not-working/22089 ?
Have you switched to the new Alfred snippets or possibly even Pastebot over TE? I had aText until it stopped being supported but I’ve liked Alfred3 snips even though Pastebot seems like a more robust tool for some reason.
What Packages in Sublime Text do you use? Just saw how anyone made ‘Bark Bark I’m a Dog’ into ‘Bark Bark I\’m a Dog’; I’m sure you have some useful tips.
To compare files, do you use beyond compare or something else?
> I only use the command line to do Git – I’ve tried many apps but nothing has stuck yet.
Wondering if you’ve tried Gitup (gitup.co) (free). I’ve tried several git GUIs and this is the only one that I find preferable to the CLI.
Hey Wes, wondering what Color Picker you use with ST3? Do you have any special binding so when you click on it, it pops up?
is this still accurate? it looks ~10 months old, and I’m curious how much (and to what) your ide has changed to.
Hello,
I’m interested in GTD methodology, does it works for you? and also do you recommend to buy a GTD book?
Thanks in advance.
Just installed your theme Cobalt2 on VS Code, fantastic, thanks Wes.
That’s all well and good, but you did not answer the really important question: How do you tie your shoelaces?
Hey wesbos! What do you use to animate your bumpers on your new “Learn Node” course? They are cool! What about the music? Awesome!
Hey Wes, any chance you can give a list of the plugins that you use with Sublime Text? Would love to know what you add on top of ST3 to help your workflow.
What is the chrome extension you use to format json?
You can use this
https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=en
Wes is using this extension
https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=en
Awesomeness…
I know you talked about recording equipment, but do you use anything for sound dampening? Blankets on the wall? How do you deal with echos and your wooden floor?
Hi Wes, can you tell me what CSS and SVG tools and libraries you used to create the layout for the Node course? Looks sharp!
I would be interested in an update explaining your setup with the new MacBook Pro … dongles, two monitors over usb C …
Yes, I would also like to hear how the new touchbar macbook is treating you as a developer. Thinking about buying one for my PHP-efforts.
Hi I just listened to your podcast on Syntax called JavaScript tooling, good stuff! Can you update this list with all the plugins you use?
Hi Wes! Just curious what email program you use – do you use Gmail in the browser, Mac Mail, or something else?
Gmail in the browser, Inbox on my iPhone.
Hey can you post a picture of your desk setup? How is it all connected?
Hello Wes.
I have no access to a MAC for your course. Is there any problem if I work on PC?
Nope – all my stuff works on any Mac, PC or Linux
Hello,
I am following your course on ES6 and I want to know which policy do you use for comments.
Thanks for the quality of the course and thanks for the Cobalt2 theme for Atom.
Best regards.
Wes, thanks for putting all this together. I think I’ve decided that “Wes Bos is My Spirit Animal” now! (yes I’d love that on a sticker and/or t-shirt too!!). Your posts and podcasts have prompted me to try VSCode and now I think its my new full time editor. I was using Sublime a little, but mostly Eclipse still. VSCode seems to be the marriage of the two.
The point of my post was to mention that for users on a Mac with Retina display, VS Code has a font aliasing setting that makes it so much easier on the eyes. I’m already using your Cobalt theme, so I just added a custom user setting for: “workbench.fontAliasing”:”antialiased”
Just wanted to share. Thanks again, and keep the great info coming!!
I don’t think I have much in common with someone who sits on a $1200 chair! Your courses look pretty good but I think you are just a bit too ‘millennial’ for me… a guy who has been coding for 25+ years on an Office Depot chair.
I need something to perch upon when I eat my avocado toast!
If you are a developer you spend 8-12 hours a day in a chair…unless you stand, so why not spend decent money. My $1000 chair has lasted 6 years so far. And I don’t have neck or back problems. That equates to about $13/month for a comfortable chair we spend half of our life in. Seems like a bargain to me. 😉
Yeah, why would you want to make sure your back stays in good shape when you’re sitting at a desk for hours upon hours almost every day? 🙄
Are you happy with the CalDigit docking station?
Does it recognize the two monitors without problems each time you plug the in the MacBook?
Thanks for this list, it’s nice to see we use the same tools 😃,
I’ve never used back blaze before. I’m going to give it a try, my MBP is nearly full 🚀
Hello Wes, I want to ask that the rocket(emoji picker) that you use will work on linux; If not, what is the best alternative to that on linux or vs-code in linux?
:emojisense for VSCode is ok
Hey Wes, love your courses. Is there a 2017 version of this article or is the setup still the same?
Hi Wes
Do you have any problem with your MacBook and your Dell Display? I have the S2817Q and it is quite unstable in my MacBook (the same that you have).
Every time my computer sleeps and returns it is a pain in the neck make the display works again.
Are you going to write a book about how you use/how to become a power user of VS Code like you did for Sublime? I would love to see that!
VC Code Power User tips would very nice ✨
Hi Wes , Is their a way to upgrade to Master package of the courses by paying the difference ?
Hello Wes. First I’m going to say: “YOU ARE GREAT”. Thank you so much.
Can you please explain why you left sublime and what are the benefits of using VS code instead of sublime?
I’ve tried VS Code. It is pretty good. But my bet is that like most (all) Microsoft products VS is not only code-bloated but also full of spy-ware and other ‘call-home’ modules to let Redmond know what you are doing… just as Windows 10 does (and yes it really does spy on you… but you can turn it off if you know the six or seven places to do so.)
I work on a Mac and have tried all of the major (free) editors and keep coming back to the not-free BBEdit. (Actually they do have a free edition that has some features disabled.) If you do a lot of serious work on a Mac, this is a good tool to have… but you can also do serious work on Atom, Sublime, VS, etc. I think a lot of it comes down to personal taste and workflow.
And yes, unlike Sublime, BBE prints!
I can’t get the auto-refresh option to work while using Visual Studio + FF for Developers. Do you have any ideas on what the issue could be?
I am not terribly familiar with node or git (or json files), but I downloaded and installed everything along with the video.
Thanks!
Please help, I’m attempting the JavaScript30 and I cannot get autocomplete to work whilst live-editing the elements on google chrome. I have tried to change the settings but no luck, please help. Thank you
Hi Wes. Two things:
1- Had a heck of a time finding this post. I knew it was out there because I’d read it before. You referenced it from some of your courses; but going back couldn’t find the reference.
2- It’s linked through your Other category. I looked for it via Tooling. Maybe use both? Also, it would be handy to have search enabled.
OK, one more thing:
Not sure if you want to add this here, or make a separate video, but perhaps a tutorial on how to set up VS Code the way you have it. I know I’d watch the crap out of that.
Thanks again for all you do.
– AAA
Wes what do you mean by a cheap vertical 22″ to your left? What type of monitor is that one and for what is it useful? looooong CSS pages?
You can use this
https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=en
Hey Wes! This information is amazing and has really helped with some of the courses that I have taken. There is one setting that I have noticed in your videos that I’m looking for but can’t seem to find. When there is a JavaScript error there is a little red dot that shows up next to the line number. Is this a setting within the Cobalt2 theme or something else?
Thanks!
Nate
hi wes,
i know you recently changed software for managing your email list, what is the name of the email list management software that you use?
i have “emaily” in memory but i think its been corrupted.
Hey Wes,
What theme/configuration are you using for your Hyper Term. I want the working directory path to show like yours.
Hey Wes,
What theme/configuration are you using for your Hyper Term?
https://github.com/wesbos/hyperterm-cobalt2-theme
I came here to see what toilet paper you use??? 🙂
LOL
lol – you’re on the react course as well yeah?? I also came here wondering the same thing. I recon it’s just maple leaves 😉
LOL just came here for the same reason 😀
Hi Wes, I’m just curious what tool do you use for making online presentations?
This is kind of recursive, is it not?
Hey Wes! You got any other suggestions for backpacks?
The one you’re using is damn expensive. I need something more budget friendly.
Thanks in advance.
Hey Wes,
Am using ubuntu 16, I’ve tried installing zsh as it seems iterm is just for Mac users, but I can’t get get the cobalt2.itermcolors into the preference tab because it doesn’t seem to have any load color button.
zsh is a shell that works on almost all platforms I think. I don’t know if you have a 1 to 1 on color schemes but you could probably use Terminator on linux machines and just grab the right color scheme for it from here http://www.linuxandubuntu.com/home/terminator-a-linux-terminal-emulator-with-multiple-terminals-in-one-window
hello all, i can not open 30 days courses there is a caption and write that caption done by speedpatch i registered there but i didn’t understand how i open courses
Hey Wes
I spotted that you’re moving to hyper for your terminal, just curious if you found any good help in getting started as I’m on windows and I cant even seem to get plugins installed or themes working. I’m sure I am being dumb.
Thanks
Ben
I struggled so much to get Hyper working on Windows that I finally gave up. I’d love to see how people get it working on Windows. I tried a lot of tutorials online.
APR 04 2016 was your last update. Is this still your current setup? Can you please update your “use” list. Thanks a million times a million!!!
Hi Wes!
Your tutorials are of great help. Thank you so much for making them.
I started with algorithms this week but, I am not able to solve them and I guess this is because I lack programming logic. Can you help me with what do I do now.
Thanks in advance.
Hhhmm, so what kind of bread do you buy? (that was the burning question for me)
=D
By the way, your ES6 course literally showed me the answers to the technical interview I needed to get an internship as a full stack developer
(which is now my full-time job)
And I follow Syntax.fm
you and Scott are the best!
So thanks a lot
and more power!
Wes (or any passers-by) —
Have you mentioned anywhere if you use an isolated local dev. environment, and if so what tool(s) you utilize–Docker, VirtualBox, Vagrant, Laragon, or something else entirely?
Do you have a published list of your VS.code plugins? I am particularly interested in the Jest one.
Thank You So much for Sharing WesBos, I got for what I came here 🙂