How to configure Ubuntu for Javascript coding.

How to configure Ubuntu for Javascript coding.

Configure you machine your machine to coding

Sometimes I reset the Ubuntu sandbox and install it all again. Everything is not an easy task. I present the list of my apps, packages, extensions for Setup.

My development box focuses on Javascript (Angular/Typescript ) and Ubuntu (but it can work in OSX).

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


Node is a required runtime for Javascript development. Ubuntu apt install an old version, Then I'm using the n package to upgrade to the 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 format.

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

Parcel-bundler: The best bundler for compiler with excellent 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.


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 is the default versioning system, but I like to see the terminal's branch name and write my commits messages with VSCode.

sudo apt-get install git
git config --global
git config --global You Name

Show branch name in terminal

Add these lines in ~/.bashrc file

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\]\$ '
 PS1='${debian_chroot:+($debian_chroot)}\u@\h:\w$(parse_git_branch)\$ '
unset color_prompt force_color_prompt

Commit message with VSCode

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

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

Chrome browser

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

sudo dpkg -i google-chrome-stable_current_amd64.deb

My Chrome extensions.

JSON Viewer: beutify jsons responses.

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

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

Angular State inspector: Read the 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