Curious about my setup? The software I use daily? Here's a list where you can check that.
Commons
To avoid the feeling of "always working" or "always doing my stuff", I like to have a different environment for both personal and work-related moments. This helps me a lot with unconsciously know what moment of my day I'm.
Although, there are a bunch of things I use in both environments. Here they are:
Software
- Google Chrome;
- VSCode;
- OBS Studio - To record screen, mic, and sometimes my webcam;
- Figma - to create designs;
- Notion - to keep notes, write drafts and organize myself;
- 1Password - password manager;
- VLC - to watch any kind of video;
Peripherals
- Monitor MSI Optix MAG24C - 24" - 144hz - Curved
- Monitor Dell UltraSharp U2415
- Keyboard Kinesis Gaming
- Sennheiser GSP 300 Gaming Headset;
Work environment (macOS)
Hardware
- MacBook PRO 2020 13-inch;
- Intel Core i5 1.4GHz;
- 8GB RAM DDR;
- Intel Iris Plus 645 1536MB;
Software
- iTerm2 - amazing macOS terminal;
- zsh + "Oh My ZSH!" - terminal framework;
- Alfred4 - this is an amazing search bar tool that helps you find files, open apps, search at google, etc.;
- Bartender4 - menu bar icons organizer;
- RunCat - shows nicely the CPU usage;
- BeFocused - timer to do pomodoro technique;
- Clipy - open-source clipboard extension. Allow you to keep the history of your CTRL + C;
- PixelSnap - measure distance for element in the screen. Really useful for pixel perfect implementations;
- Relax - an app that mutes your speakers when you disconnect a headset or sleep the laptop. Helpful for the cases you just open your laptop and it starts to play something loud;
- Kap - a tool to capture screen and export to GIF or MP4;
- magnet - window layout manager;
Peripherals
- Sony WH-1000XM3 - noise-canceling/Bluetooth. Excellent when I need to work from the office;
Miscellaneous
- Chair Secretlab Titan - Fabric
VSCode Setup
For VSCode, I used to have a different setup for work and home but since MS had implemented an built-in account settings sync, I'd rather keep using the same extensions and plugins everywhere.
Font
- Fira Code - open-source code font with ligatures which makes easier to read code;
Theme
- Color: Monokai PRO (paid)
- Icons: Material Theme Icons
Plugins
To make it easier highlight some plugins that are a must in my opinion, I add then a suffix star (⭐).
- Active File in StatusBar - Add statusbar entry to show path for currently active file
- Auto Rename Tag - Auto rename paired HTML/XML tag
- Better TOML - TOML language support
- Bracket Pair Colorizer - allows matching brackets to be identified with colours
- Code Spell Checker (⭐) - Spelling checker for source code. Awesome to avoid misspelling;
- CodeSnap - generates a PNG with syntax highlight for a piece of code
- Color Highlight - shows hex/rgb/rgba color
- CSS-in-JS - language autocompletion and support
- DotENV - syntax highlighting
- EditorConfig for VS Code - applies .editorconfig into the workspace
- ES7 React/Redux/GraphQL/React-native snippets
- Eslint - shows eslint warnings and errors
- GitLens - Git supercharged - great GIT support to blame, see history, etc.
- Github Markdown Preview - Changes VS Code's built-in markdown preview to match Github
- GraphQL for VSCODE - language support
- Import Cost - shows the size of the module you're importing (JS)
- JSON Tools - Prettify / minify JSON files
- Live share - Real-time collaborative development from the comfort of your favorite tools. Excellent for pair programming sections;
- Local History (⭐) - Save files into local history. Amazing to recovery pieces of code you accidentally flush away;
- Markdown Table Formatter - Give nice markdown table indentation
- markdownlint - "Eslint" for markdown
- MDX - language support
- npm Intellisense (⭐) - plugin that autocompletes npm modules in import statements
- Output Colorizer - adds syntax colorization for both the output/debug/extensions panel and *.log file
- Path Intellisense (⭐) - plugin that autocompletes filenames.
- Peacock - creates unique colors for different projects (not theme related, only top/bottom bar or menu)
- Portuguese - Code Spell Checker - "Eslint" for Portuguese words
- Prettier - Code formatter - plugin that format my JS, TS, CSS, HTML, etc, files
- px to rem - Converts px to rem, and vice versa
- Quit Control for VSCode (⭐) - plugin that prevent to close entire editor accidentally
- Select Line Status Bar - plugin that count number of selected lines
- Syntax Highlighting for yarn.lock files
- Todo Tree - plugin that allow you track all your "TODO" and shows nicely for the entire project
- Visual Studio IntelliCode - AI-assisted development
- vscode-styled-components - Syntax highlighting and IntelliSense for styled-components.