Setup Ubuntu for Javascript coding.
Tags: angular, ubuntu, javascript, typescript
Published: 2020-10-24 00:15:07

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.

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

[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 great 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 see the branch name in my terminal and also 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 line 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 install 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 easy 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 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&amp;utm_medium=referral&amp;utm_content=creditCopyText)