---
title: "How to configure Ubuntu for Javascript coding."
date: "2020-10-24"
slug: "how-to-configure-ubuntu-for-javascript-coding"
author: "Dany Paredes"
canonical: "https://danywalls.com/how-to-configure-ubuntu-for-javascript-coding"
description: "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 i..."
---

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
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.

```bash
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](https://dev.to/topheman) feedback, before install npm package, please fix use sudo permissions.
```bash
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
export PATH=~/.npm-global/bin:$PATH
source ~/.profile
```
You can read about [here](https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally)
### Npm packages

[@angular/cli](https://cli.angular.io/) CLI for create Angular right out of the box.

[Nodemon](https://nodemon.io/) monitor your javascript code in your terminal with hot reload.

[Prettier](https://prettier.io/): Amazing code format.

[Lite-server](https://www.npmjs.com/package/lite-server):  http server for static files with hot reload with network access.

[Parcel-bundler](https://parceljs.org/): The best bundler for compiler with excellent support for typescript, sass, and more.

[Typescript](https://www.typescriptlang.org/): The typescript compiler for .ts files.

[@ngxs/cli](https://www.ngxs.io/): CLI for ngxs state management.
```bash
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](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.

```bash
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 to see the terminal's branch name and write my commits messages with VSCode.

```bash
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
```bash
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 lines in .gitconfig to configure for use vscode for write commits.

```text
[core]
	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.

```bash
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](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh
): beutify jsons responses.

[VisBug](https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc?hl=en
): Edit your page easily in DOM.
[Augury](https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd/related?hl=es
): Angular components debugger.

[Redux devtools:](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=es
)Help to debug actions, state for redux and ngxs.

[Angular State inspector](https://chrome.google.com/webstore/detail/angular-state-inspector/nelkodgfpddgpdbcjinaaalphkfffbem
): 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](https://unsplash.com/@andriklangfield?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)