DEV Community

Cover image for How i setup my development env on Windows 11 for Web deverloper in 2023
hudy9x
hudy9x

Posted on • Updated on

How i setup my development env on Windows 11 for Web deverloper in 2023

βš’ 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



$ 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'))


Enter fullscreen mode Exit fullscreen mode

πŸ€ Install Oh-my-posh, a prompt theme engine

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



$ winget install JanDeDobbeleer.OhMyPosh -s winget


Enter fullscreen mode Exit fullscreen mode

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



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


Enter fullscreen mode Exit fullscreen mode

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



$ winget install Neovim.Neovim


Enter fullscreen mode Exit fullscreen mode

Configure alias for starting neovim quickly



$ nvim $profile

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


Enter fullscreen mode Exit fullscreen mode

πŸ₯Ž 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.



$ irm get.scoop.sh | iex


Enter fullscreen mode Exit fullscreen mode

🎲 Install git

It's important tool for a developer 😁



$ scoop install git


Enter fullscreen mode Exit fullscreen mode

Now, we need to configure git alias for better performance



$ git config --global alias.co checkout
$ git config --global alias.br branch
$ git config --global alias.ci commit
$ git config --global alias.st status


Enter fullscreen mode Exit fullscreen mode

Adding an alias for git command. This step is optional



$ nvim $profile

// now, input the following command
Set-Alias -Name g -Value git


Enter fullscreen mode Exit fullscreen mode

Configure git ssh - go to another document



$ ssh-keygen -t ed25519 -C "your@email.here"


Enter fullscreen mode Exit fullscreen mode

Testing with git clone command



$ git clone git@github.com:hudy9x/kompad-homepage.git


Enter fullscreen mode Exit fullscreen mode

🎯 Install nvm vs nodejs



$ scoop install nvm
$ nvm install lts
$ nvm use lts


Enter fullscreen mode Exit fullscreen mode

πŸ’Š Install yarn and python

I personally love to use yarn for nodejs package management



$ scoop install yarn
$ scoop install python // optional


Enter fullscreen mode Exit fullscreen mode

🎹 Install ripgrep for searching tool

This package only used for searching text, file.



$ scoop install ripgrep


Enter fullscreen mode Exit fullscreen mode

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



$ choco install llvm // run this in Admin mode


Enter fullscreen mode Exit fullscreen mode

I user Packer for package management, install it



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


Enter fullscreen mode Exit fullscreen mode

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



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


Enter fullscreen mode Exit fullscreen mode

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



$ nvim
// Neovim opened, then pressing ESC and type
:echo stdpath('config')


Enter fullscreen mode Exit fullscreen mode

The path outputed below is your neovim's config folder. Now, copy all config to there.
Image description

Ok, open neovim and run the command



:PackerInstall


Enter fullscreen mode Exit fullscreen mode

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

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

Image description

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

Top comments (4)

Collapse
 
sqlgate profile image
yongsung yang

Following your documentation and video shows the problem below.

I searched for the reason and found that the version of the "lspsaga" file is causing the problem with the latest version.

Error detected while processing C:\Users\Benjamin\AppData\Local\nvim\plugin\lspsaga.rc.lua:
lspsaga.nvim v0.2.3+ has breaking changes. Please read the docs and migrate your configuration to the new "setup" function!

Please refer to the bottom code in the link below
github.com/glepnir/lspsaga.nvim/bl...

Collapse
 
sqlgate profile image
yongsung yang

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

=>

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

Collapse
 
sqlgate profile image
yongsung yang

scoop instal ripgrep => scoop install ripgrep

Collapse
 
maximprogramerxx profile image
Maximprogramerxx

Windows 11 is great for developers. If you don't have your license yet, it's really worth visiting this online store: royalcdkeys.com/products/windows-1...