Code Blue - Web Dev CLI Setup for macOS 💻 🍎

It’s not so often we get to set up a mac with the basic command line tools that make you productive, here I’ll leave what I do.

Command Line Tools

If you’re gonna be writing apps for iOS or macOS, most probably you should be installing Xcode, but if that’s not the case, probably it’s enough to install the command line tools:

xcode-select –-install

NOTE

Trying to run an unknown command such as git, will also cause the system to prompt us to install the command line tools.

To verify that the command line tools have been installed, you can run:

xcode-select -p

The output of the command above should be the location of the **command line tools in our system, in my case /Library/Developer/CommandLineTools. If you’re curious about what tools exactly are we getting, run:

ls Library/Developer/CommandLineTools/usr/bin

Homebrew: the macOS Package Manager

Homebrew is the most popular package manager for macOS, which we can install with:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Oh My Zsh

Oh My Zsh is an open source, community-driven framework for managing your Zsh configuration. Installing it is super easy:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

If you restart your shell, you’ll see you have a pretty cool new prompt. Next, let’s install some plugins:

Autosuggestions plugin, which suggests commands as you type based on history and completions. Read installation instructions here
zsh-syntax-highlighting plugin, which enables highlighting of commands whilst they are typed at a zsh prompt into an interactive terminal. This is super helpful for catching typos that would result in syntax errors. Read how to install it in oh my zsh here
zsh-autocomplete plugin, which provides real-time type-ahead autocompletion to your command line. This one doesn’t include instructions about how to install in oh my zsh. Basically we just have to clone it in the plugins folder:

git clone --depth 1 -- https://github.com/marlonrichert/zsh-autocomplete.git $ZSH_CUSTOM/plugins/zsh-autocomplete

NOTE

Note how above we’re using the ZSH_CUSTOM environment variable, which is used in Oh My Zsh to specify a custom directory for your plugins, themes, and custom configurations.

Once we’ve installed the plugins we want, we have to add them to the list of plugins in a our .zshrc file; this is what my list looks like:

plugins=(
  git
  zsh-autosuggestions
  zsh-syntax-highlighting
  zsh-autocomplete
)

To uninstall any of the plugins, we just have to remove it from the list of plugins above, and remove its folder; for example, to remove the zsh-syntax-highlighting folder:

rm -rf $ZSH_CUSTOM/plugins/zsh-syntax-highlighting

FZF

Fzf is a command-line fuzzy finder which I find super useful. Let’s install it with brew:

brew install fzf

Here I had some problems integrating this tool with zsh, but searching through the internets I found out that we have to run an installation script to generate the necessary configuration files:

$(brew --prefix)/opt/fzf/install

NOTE

The $(brew --prefix) part is a command substitution that gives us the folder where Homebrew installs all the stuff; so if you run brew --prefix the output in my case, at the time of writing this, was /opt/homebrew (back in the day it was some other folder).

The output of the command above:

Downloading bin/fzf ...
  - Already exists
  - Checking fzf executable ... 0.61.3
Do you want to enable fuzzy auto-completion? ([y]/n)
Do you want to enable key bindings? ([y]/n)

Generate /Users/javi/.fzf.bash ... OK
Generate /Users/javi/.fzf.zsh ... OK

Do you want to update your shell configuration files? ([y]/n)

Update /Users/javi/.bashrc:
  - [ -f ~/.fzf.bash ] && source ~/.fzf.bash
    + Added

Update /Users/javi/.zshrc:
  - [ -f ~/.fzf.zsh ] && source ~/.fzf.zsh
    + Added

Finished. Restart your shell or reload config file.
   source ~/.bashrc  # bash  (.bashrc should be loaded from .bash_profile)
   source /Users/javi/.zshrc   # zsh

Use uninstall script to remove fzf.

At the end, we should end up with a line at the end of our .zshrc:

[ -f ~/.fzf.zsh ] && source ~/.fzf.zsh

Which checks that the generated ~/.fzf.zsh file exists, and source it.

Amazon Q

A friend of mine recommended me a (generative AI)-powered assistant named Amazon Q, which is quite easy to install in macOS:

brew install amazon-q

Or just download the .dmg file, and clickety-click until we have it running. Whatever way we choose, we can verify the installation with:

q --version

NVM

nvm is next:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.2/install.sh | bash

Running the command above appends the following lines to the bottom of our .zshrc:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

To verify the installation we have to run:

command -v nvm

which should output nvm if the installation was successful. Please note that which nvm will not work, since nvm is a sourced shell function, not an executable binary.

NOTE

To download, compile, and install the latest release of Node.js, do this:

nvm install node # "node" is an alias for the latest version