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