DEV Community

Cover image for Open File Explorer and Browser from ZSH
Camilo Martinez
Camilo Martinez

Posted on • Edited on

Open File Explorer and Browser from ZSH

#productivity #zsh #tutorial #terminal

Have you noticed that we can open a folder inside VSCode with code . command?

Will it be cool if we could do the same to open the file manager on the current folder or open the browser on a specific path from the terminal (or from VSCode)?

Well, it can be done by creating some functions and aliases 😎.

Prerequisites

We need to install the clipboard-cli package in order to use the clipboard no matter the OS we are using.

Project

First of all, we need to create a folder to save our helper functions. I used to name it .helpers inside the home directory.

take command on zsh automatically creates folders and changes to the directory.

 take .helpers/open
Enter fullscreen mode Exit fullscreen mode

Open

Now we are going to make a script to open folder/paths in File Explorer. Create a file called open_path inside the open folder and put this code.

 #!/bin/bash while getopts ":p:" opt; do case $opt in p) path="${OPTARG}" ;; \?) echo "Invalid option -${OPTARG}" >&2 exit 1 ;; esac done case $path in build) path="./build" ;; coverage) path="./coverage" ;; esac isWSL=$(uname -a | grep WSL) if [[ -n "${isWSL}" ]]; then path=$(wslpath -w ${path}) fi ${OPEN} "${path}"
Enter fullscreen mode Exit fullscreen mode

Browser

Now we are going to make a script to open URLs or files in Browser. Create a file called open_browser inside the open folder and put this code.

 #!/bin/bash while getopts ":f:u:p:" opt; do case $opt in f) file="${OPTARG}" ;; u) url="${OPTARG}" ;; p) port="${OPTARG}" ;; \?) echo "Invalid option -${OPTARG}" >&2 exit 1 ;; esac done address="" if [ -n "${file}" ]; then case $file in coverage) launcher=${BROWSER} file="./coverage/lcov-report/index.html" ;; esac isWSL=$(uname -a | grep WSL) if [[ -n "${isWSL}" ]]; then file=$(wslpath -w ${file}) fi address="${file}" fi if [ -n "${port}" ]; then pattern="^([0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$" if [[ ${port} =~ ${pattern} ]]; then url="${url}:${port}" fi fi if [ -n "${url}" ]; then pattern="^(http|https)://" if (! [[ "${url}" =~ ${pattern} ]]); then url="https://${url}" fi address="${url}" fi ${BROWSER} "${address}"
Enter fullscreen mode Exit fullscreen mode

GitHub

Now we are going to make a script to get the git repo URL. Create a file called get_repo_url inside the open folder and put this code.

 #!/bin/bash url="$( git config remote.origin.url | sed -e "s/git@github.com:/https:\/\/github.com\//g" )" if [ "${url:(-4)}" == ".git" ]; then url="$( echo "${url}" | rev | cut -f 2- -d '.' | rev )" fi echo "$url"
Enter fullscreen mode Exit fullscreen mode

Now we are going to make a script to browse the GitHub repository. Create a file called open_git_repo inside the open folder and put this code.

 #!/bin/bash url="$( get_repo_url )" ${BROWSER} ${url}
Enter fullscreen mode Exit fullscreen mode

Now we are going to make a script to browse the GitHub repository on current branch. Create a file called open_git_branch inside the open folder and put this code.

 #!/bin/bash url="$( get_repo_url )" current="$( git branch --show-current )" ${BROWSER} "${url}/tree/${current}"
Enter fullscreen mode Exit fullscreen mode

Now we are going to make a script to browse the GitHub repository pull requests section. Create a file called open_git_pull inside the open folder and put this code.

 #!/bin/bash url="$( get_repo_url )" ${BROWSER} "${url}/pulls"
Enter fullscreen mode Exit fullscreen mode

Now we are going to make a script to browse the GitHub repository comparing current branch with another branch (dev as default). Create a file called open_git_compare inside the open folder and put this code.

 #!/bin/bash base="dev" #default base branch if [[ ! -z $1 ]]; then base="$1" fi url="$( get_repo_url )" current="$( git branch --show-current )" if [ "$current" != "${base}" ]; then url="${url}/compare/${base}...${current}" else url="${url}/compare/${base}..." fi ${BROWSER} ${url}
Enter fullscreen mode Exit fullscreen mode

npm

Now we are going to make a script to browse the npm package project. Create a file called open_npm_package inside the open folder and put this code.

 #!/bin/bash package="$(node -p "require('./package.json').name")" if [[ -z "$package" ]]; then echo "No package.json found" exit 1 fi ${BROWSER} "https://www.npmjs.com/package/${package}"
Enter fullscreen mode Exit fullscreen mode

Now we are going to make a script to browse the an npm package searching by the name on clipboard. Create a file called open_npm_clipboard inside the open folder and put this code.

 #!/bin/bash # Requires: # https://github.com/sindresorhus/clipboard-cli # npm install -g clipboard-cli url="https://www.npmjs.com/package" value="$( clipboard )" if [[ -n $value ]]; then url="$url/$value" fi ${BROWSER} ${url}
Enter fullscreen mode Exit fullscreen mode

Permissions

Add execution permissions to those files with:

 chmod +x ~/.helpers/**/*
Enter fullscreen mode Exit fullscreen mode

Path and Alias

It's not good idea navigate to .helpers/open folder each time we want to use those commands.

In order to make it globally available need to add this PATH and aliases to .zshrc.

 export OPEN="explorer.exe" #wsl2 export BROWSER="${OPEN}" #wsl2 export PATH="$HOME/.helpers/open/:$PATH" # Open alias o="open_path -p ." # open current folder alias op="open_path -p" # +path alias opb="open_path -p build" # open build path alias opc="open_path -p coverage" # open coverage path # Browse alias b="open_browser -f ./index.html" # browse index.html alias bu="open_browser -u" # +url alias blh="open_browser -u http://localhost" alias blhp="open_browser -u http://localhost -p" # +port alias bcr="open_browser -f coverage" # browse coverage alias bgr="open_git_repo" # browse git repo alias bgb="open_git_branch" # browse git repo on current branch alias bgp="open_git_pull" # browse git repo pulls alias bgc="open_git_compare" # +base branch alias bnp="open_npm_package" #browse npm package alias bnc="open_npm_clipboard" #browse npm package from clipboard
Enter fullscreen mode Exit fullscreen mode

OPEN and BROWSE constants need to be configured according yor OS. Windows (WSL2) and macOS use the same command to open the file explorer or the default web browser, on Ubuntu (Linux) need to be specified each one.

SO OPEN BROWSER
Windows (WSL2) "explorer.exe" "${OPEN}"
macOS "open" "${OPEN}"
Ubuntu "xdg-open", "gnome-open", "nautilus" ... "googlechrome", "firefox" ...

Once finish, reopen all terminals or update his source running source ~/.zshrc command and now you can use the new commands.

Usage

Navigate to the path where you want to use the commands or aliases.

File Explorer

Alias Command Description
o open_p -p . Open current path on file explorer or finder
o <path> open_p -p <path> Open a relative or absolute path on file explorer or finder

Browser

Alias Command Description
b open_browser -f ./index.htm Open a browser with index.html on current path
bu <url> open_browser -u <url> Open a browser with specified URL

React/Web

Alias Command Description
obf open_path -p build Open .\build folder inside current path on file explorer or finder
obc open_path -p coverage Open .\coverage folder inside current path on file explorer or finder
bcr open_browser -f coverage Open coverage .\coverage\lcov-report\index.html report on Browser
blh open_browser -u http://localhost Open a browser as localhost
blhp <port> open_browser -u http://localhost -p <port> Open a browser as localhost on specific port

GitHub

Alias Command Description
bgr open_git_repo Browse the current GitHub repo url
bgb open_git_branch Browse the current GitHub current Branch url
bgp open_git_pull Browse the current GitHub Pull Request url
bgc [<branch>] open_git_compare [<branch>] Browse the compare current branch with another base branch [dev by default]

Works with repositories cloned with HTTP or SSH

NPM

Alias Command Description
bnp open_npm_package Browse the NPM package on package.json
bnc open_npm_clipboard Browse the NPM package on browser searching by name on clipboard

You can download or clone this code and other ZSH utilities from GitHub: dot Files repository.

That’s All Folks!
Happy Coding 🖖

beer

Top comments (3)

Collapse
 
ronaldoperes profile image
Ronaldo Peres •

In Windows you can use the 'start' command to open a folder, example:

c:\Users\someone>start c:\Projects

Also you can open directly a Visual Studio project with it like this:

c:\Users\someone>start c:\Projects\MyProject\MyProject.sln

And there is a lot more, just see the help for 'start'

Collapse
 
equiman profile image
Camilo Martinez • • Edited

I've tested with start from WSL2 and doesn't work.

start . zsh: command not found: start
Enter fullscreen mode Exit fullscreen mode

I think only works with the default Windows console.

I've changed the title to avoid confusion.

Collapse
 
ogza profile image
Oğuz Akankan • • Edited
  1. Open your terminal and go to the root path 
cd ~
Enter fullscreen mode Exit fullscreen mode
  1. open the .zshrc file via 
 nano .zshrc
Enter fullscreen mode Exit fullscreen mode

And add this alias code at the end of the line:

alias code="/mnt/c/Program\ Files/Microsoft\ VS\ Code/Code.exe
Enter fullscreen mode Exit fullscreen mode

Save the file (ctrl + x) and exit.

  1. restart your terminal and go into any folder in your terminal and try: 
code .
Enter fullscreen mode Exit fullscreen mode