How i setup my development env on Windows 11 for Web deverloper in 2023
Tags: neovim, git, webdev
Published: 2022-12-31 10:52:13

## ⚒ Install 📺 Windows Terminal and Powershell from Microsoft Store

Go to Microsoft Store, find “Windows Terminal“ and install it. Keep searching “Powershell“ in Microsoft Store and install it as well. Now, open the Windows Terminal and select default shell as Powershell that just installed.

If Powershell not displayed in Window Terminal, please add new Profile and reload the terminal

## 🧩 Install choco

Go to https://chocolatey.org/install and find the following installation command. Run it in Powershell

```shell
$ Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))
```

## 🏀 Install Oh-my-posh, a prompt theme engine

Open terminal and run the following command to install oh-my-posh

```shell
$ winget install JanDeDobbeleer.OhMyPosh -s winget
```

After installation success, open Powershell profile by typing notepad $profile and paste below config inside it

```shell
clear
oh-my-posh init pwsh --config "$env:POSH_THEMES_PATH/takuya.omp.json" | Invoke-Expression
```

However, it’s not the end, in order to display oh-my-posh themes, we’ve got to install at least a Nerd Font. Go to https://www.nerdfonts.com/font-downloads and download one. For me, i chosen Caskaydia Cove Nerd Font.

Extract font .zip file and select **Caskaydia Cove Nerd Font Complete Mono Regular**

Now, restart powershell and enjoy the new terminal interface 😁

## ⚽ Install neovim
For now, we only install it for editting purpose. I'll install packages at the last
```shell
$ winget install Neovim.Neovim
```

Configure alias for starting neovim quickly
```shell
$ nvim $profile

// now, input the following command
Set-Alias -Name vim -Value nvim
```

# 🥎 Install scoop - package management for Windows
I use `scoop` for package management on windows. Because packages that installed by it does not require any system permission. So just type your package, and install it.

```shell
$ irm get.scoop.sh | iex
```

# 🎲 Install git
It's important tool for a developer 😁
```shell
$ scoop install git
```

Now, we need to configure git alias for better performance
```shell
$ git config --global alias.co checkout
$ git config --global alias.br branch
$ git config --global alias.ci commit
$ git config --global alias.st status
```
Adding an alias for git command. This step is optional
```shell
$ nvim $profile

// now, input the following command
Set-Alias -Name g -Value git
```
Configure git ssh - go to another document
```shell
$ ssh-keygen -t ed25519 -C "your@email.here"
```
Testing with git clone command
```shell
$ git clone git@github.com:hudy9x/kompad-homepage.git
```
# 🎯 Install nvm vs nodejs
```shell
$ scoop install nvm
$ nvm install lts
$ nvm use lts
```
# 💊 Install yarn and python
I personally love to use `yarn` for nodejs package management
```shell
$ scoop install yarn
$ scoop install python // optional
```
# 🎹 Install ripgrep for searching tool
This package only used for searching text, file. 
```shell
$ scoop install ripgrep
```
# Install Neovim plugins

One thing to keep in mind that, this step does not walk you throught from the beginning of setting up a neovim workspace. I just install my Neovim plugins. So if you looking for a fully setup guide, maybe it's not for you.

First, install `llvm` that requires for nvim-treesitter on Windows
```shell
$ choco install llvm // run this in Admin mode
```

I user Packer for package management, install it

```shell
$ git clone https://github.com/wbthomason/packer.nvim "$env:LOCALAPPDATA\nvim-data\site\pack\packer\start\packer.nvim"
```

Alright, now clone my dotfiles that contains all my setup: [https://github.com/hudy9x/dotfiles](https://github.com/hudy9x/dotfiles).

```shell
$ git clone https://github.com/hudy9x/dotfiles.git
```

And then, copy all files and folders inside `.config/nvim` to your neovim's config folder. If you don't know where it is, open neovim and type the command

```shell
$ nvim
// Neovim opened, then pressing ESC and type
:echo stdpath('config')
```
The path outputed below is your neovim's config folder. Now, copy all config to there.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ih2g0j71t0zqq5t77z3k.png)

Ok, open neovim and run the command
```shell
:PackerInstall
```

Wait for minutes, after the installation finished then we done

However, if you got some errors about `:TSUpdate` in the installation process. Just don't worry, close neovim and reopen it again. Neovim will re-run `:TSUpdate` automatically, wait to this process done and check again. 

> Notice that, you should run `:TSUpdate` with no file opened. Otherwise it might be cause some error as below
> ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5v9ajdl2il7g53s0uykf.png)



If you still got another error, like me, it's about `tree-sitter/highlighter`. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pnujhhjieloeui0877ly.png)

Then close neovim, reopen it and run the command `:TSUpdate vim`. It might be fix that issue.

# Conclusion

Hope this guide helps you to setup the workspace quickly. Thanks guys for taking your time to read this. See you in another post