This is a small guide for setting my mac into development, useful GUI and CLI apps, files, articles and tips to do it right from scratch. Check out the video (Spanish) with a more in-depth explanation:
| Link | Why | Autor |
|---|---|---|
| macOS Setup | This guide covers the basics of setting up a development environment on a new Mac. | @sb2nov |
| GitHub Accounts with SSH keys | The need to manage multiple GitHub accounts on the same machine comes up at some point in time for most developers. | Bivil M Jacob |
| Download | App | Why | brew |
|---|---|---|---|
 |
Adobe Xd | UI Design and web assets creation. | - |
 |
Alfred | Spotlight replacement. | alfred |
 |
Android File Transfer | Transfer files from Android to Mac. | android-file-transfer |
 |
AppCleaner | Remove Apps and orphan files. | app-cleaner |
 |
Commander One | FTP, SFTP with double panel view. | commander-one |
 |
Docker | Isolate applications in containers. | docker |
 |
Firefox Developer Edition | Main Browser for use/development. | firefox-developer-edition |
 |
Google Chrome | Side development browser, used to check compatibility. | google-chrome-dev |
 |
Kap | Video Screenshot Recorder. | kap |
 |
OBS | Screen Recorder and Streaming Client. | obs |
 |
Postman | API Client for REST, SOAP and GraphQL. | postman |
 |
Rectangle | Move and resize windows in macOS using keyboard shortcuts or snap areas. | rectangle |
 |
Rocket | Emoji provider inside any app. | - |
 |
Slack | Communication between teams. | slack |
 |
Spotify | Premium music service. | spotify |
 |
The Unarchiver | Uncompress RAR, TGZ and other formats not natively supported. | the-unarchiver |
 |
Transmission | Torrent client. | transmission |
 |
True Key | Password, secrets and document manager. | - |
 |
Visual Studio Code | Code Editor and Integrated Terminal. | visual-studio-code |
 |
VLC | Cross-platform multimedia player and video conversor. | vlc |
 |
VPN Unlimited | Premium VPN Service. | - |
 |
Zeplin | Share, organize and collaborate on designs—built with developers in mind. | zeplin |
 |
Zoom | Video Meeting and Screen Share app. | zoomus |
| Util | Why |
|---|---|
| OhMyZsh | A delightful, open source, community-driven framework for managing your Zsh configuration. |
| avit-da2k | oh-my-zsh theme based on avit theme. |
| zsh-autosuggestions | It suggests commands as you type based on history and completions. |
| zsh-completions | This projects aims at gathering/developing new completion scripts that are not available in Zsh yet. |
| zsh-syntax-highlighting | Enables highlighting of commands whilst they are typed at a zsh prompt into an interactive terminal. |
| zsh-nvm | The plugin will install the latest stable release of nvm if you don't already have it, and then automatically source it for you. |
I use Panda Syntax for my theme, with Fira Code as my monospace font with material icons. Check out my settings file :)
🔥 Hot Tip: When I install a plugin, I global disable it and only enable it in projects (workspaces) where I need it. For example: in a React project, I enable the React related plugins. This keeps suggestions and performance at it best.
| Download | Why |
|---|---|
| deBakatas Pack | My recommendation of plugins for every JS developer. |
| Bash Beautify | Format / Beautify bash and shell scripts. |
| Bracket Pair Colorizer | A customizable extension for colorizing matching brackets. |
| Code Runner | Run programming files directly and see the output below.. |
| CodeSnap | Take beautiful screenshots of your code. |
| ColorHighlight | Highlight web colors in your editor. |
| EditorConfig | EditorConfig Support for Visual Studio Code. |
| ESLint | Integrates ESLint JavaScript into VS Code. |
| GitHistory | View git log, file history, compare branches or commits. |
| Kite | AI-powered coding assistant featuring line-of-code Python and JavaScript. |
| Prettier | Code formatter using prettier. |
| Download | Why | Language |
|---|---|---|
| Simple React Snippets | Dead simple React snippets you will actually use. | react |
| vscode-styled-components | Syntax highlighting for styled-components. | react |
| React PropTypes Generate | Auto generate react's propTypes. | react |
| Vetur | Vue tooling for VS Code. | vue |
| vue | Syntax Highlight for Vue.js. | vue |
| language-stylus | Stylus language support. | stylus |
| Manta's Stylus Supremacy | Format your Stylus files with ease. | stylus |
| Sass | Indented Sass syntax Highlighting, Autocomplete & Formatter. | sass |
| postcss-sugarss-language | postcss and sugarss syntax support. | postcss |
| Name | Why |
|---|---|
| @vue/cli | Creation and edition of Vue projects. |
| commitizen | Create standard and better commit messages. |
| create-react-app | Set up a modern React web app by running one command. |
| eslint-config-wesbos | No-Sweat™ Eslint and Prettier Setup. |
| gatsby-cli | React-based open source framework for creating websites and apps. |
| prettier | Opinionated code formatter. |
| yarn | Fast, reliable, and secure dependency management. (Yes, I install yarn as a global NPM package, fight me.) |