Sometimes I reset Ubuntu sandbox and setup again everything is not a easy tasks, this is my list of my apps, packages, extensions for Setup.

My development box is focus on Javascript (Angular/Typescript ) and Ubuntu (but can works in OSX).

You can just copy and paste the code to install or configure your apps.

Node

Node is a required runtime for Javascript development, Ubuntu apt install a old version, Then I'm using the n package to upgrade to last stable version.

sudo apt update
sudo apt install nodejs
sudo apt install npm
sudo npm install -g n
sudo n stable

Fix access permission for NPM

Thanks to @thope feedback, before install npm package, please fix use sudo permissions.

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
export PATH=~/.npm-global/bin:$PATH
source ~/.profile

You can read about here

Npm packages

@angular/cli CLI for create Angular right out of the box.

Nodemon monitor your javascript code in your terminal with hot reload.

Prettier: Amazing code formatter.

Lite-server: http server for static files with hot reload with network access.

Parcel-bundler: The best bundler for compiler with great support for typescript, sass and more.

Typescript: The typescript compiler for .ts files.

@ngxs/cli: CLI for ngxs state management.

npm i -g typescript
npm i -g @angular/cli
npm i -g nodemon
npm i -g prettier
npm i -g parcel-bundler
npm i -g lite-server
npm i -g typescript
npm i -g @ngxs/cli

Visual Studio Code

One of the most used code editors is VS Code.

https://code.visualstudio.com/download

Extensions

My list of extensions for code to use with VSCode, you can install copy and paste in your terminal.

code --install-extension codezombiech.gitignore
code --install-extension dbaeumer.vscode-eslint
code --install-extension dsznajder.es7-react-js-snippets
code --install-extension dzannotti.vscode-babel-coloring
code --install-extension eamodio.gitlens
code --install-extension EditorConfig.EditorConfig
code --install-extension eg2.vscode-npm-script
code --install-extension esbenp.prettier-vscode
code --install-extension fiazluthfi.bulma-snippets
code --install-extension johnpapa.angular-essentials
code --install-extension ms-azuretools.vscode-docker
code --install-extension ms-vsliveshare.vsliveshare-pack
code --install-extension msjsdiag.debugger-for-chrome
code --install-extension thenikso.github-plus-theme
code --install-extension zhuangtongfa.material-theme

Git

Git is the default versioning system, but I like see the branch name in my terminal and also write my commits messages with VSCode.

sudo apt-get install git
git config --global user.email you@gmail.com
git config --global user.name You Name

Show branch name in terminal

Add these lines in ~/.bashrc file

force_color_prompt=yes
color_prompt=yes
parse_git_branch() {
 git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/(\1)/'
}
if [ "$color_prompt" = yes ]; then
 PS1='${debian_chroot:+($debian_chroot)}\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[01;31m\]$(parse_git_branch)\[\033[00m\]\$ '
else
 PS1='${debian_chroot:+($debian_chroot)}\u@\h:\w$(parse_git_branch)\$ '
fi
unset color_prompt force_color_prompt

Commit message with VSCode

Add these line in .gitconfig to configure for use vscode for write commits.

[core]
    editor = code --wait
[difftool "vscode"]
    cmd = code --wait --diff $LOCAL $REMOTE

Chrome browser

By default, Ubuntu comes with Firefox, but install Google Chrome is so easy.

wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo dpkg -i google-chrome-stable_current_amd64.deb

My Chrome extensions.

JSON Viewer: beutify jsons responses.

VisBug: Edit your page easy in DOM.
Augury: Angular components debugger.

Redux devtools:Help to debug actions, state for redux and ngxs.

Angular State inspector: Read state of properties and components.

That's it!

Hopefully, that will give you a bit of help for setup your dev box machine. If you miss something leave a comment or share it!

Photo by Andrik Langfield