Skip to content

A set of configuration files for different tools, editors, terminals and similar stuff.

Notifications You must be signed in to change notification settings

adrian-karbowniczyn/wsl-dev-setup

Repository files navigation

WSL as a Development Environment 👨‍💻

A set of configuration files for different editors, tools, terminals and similar stuff on Windows with installed WSL2.

Cover image

Table of content

Windows Subsystem for Linux

The Windows Subsystem for Linux lets developers run most command-line tools, utilities, and applications directly on Windows.

Install 🛠 the Windows Subsystem for Linux

  1. Open PowerShell as Admin and run:
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
  1. Restart computer

  2. Install Ubuntu 18.04 LTS or other Linux Distro

  3. Enable Virtual Machine Platform

dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
  1. Setup WSL 2
wsl --set-version Ubuntu-18.04 2

WSL 2 is only available in Windows 10, updated to version 2004, Build 19041 or higher.

  1. Check what version of WSL your distro have
wsl -l -v
  1. Any problems? checkout: https://docs.microsoft.com/en-us/windows/wsl/about

My configs

A bash script for automated 🤖 installation of ZSH, VIM, GIT, WINDOWS TERMINAL configs.

  1. Make sure you are in home directory and clone this repo
git clone https://github.com/adrian-karbowniczyn/wsl-config.git configs
  1. Go into cloned folder
cd configs
  1. Make script setup executable
chmod +x setup.sh
  1. Run
./setup.sh
  1. Follow instructions and enjoy 🔥

Lightweight Code Editor, focused for web development.

Visual Studio Code screenshoot

Theme

My favorite Monokai Pro (Filter Octagon) in my opinion best theme out there !

Config

{
//Editor
"editor.fontFamily": "'Fira Code'",
"editor.fontSize": 16,
"editor.fontLigatures": true,
"editor.cursorBlinking": "expand",
"editor.cursorWidth": 3,
"editor.cursorSmoothCaretAnimation": true,
"editor.renderIndentGuides": false,
"editor.renderWhitespace": "boundary",
"editor.tabSize": 2,
"editor.snippetSuggestions": "inline",
"editor.suggest.localityBonus": true,
"editor.tabCompletion": "on",
"editor.formatOnPaste": true,
"editor.formatOnSave": true,

//Workbench
"workbench.colorCustomizations": {
"editorCursor.foreground": "#fe5d41",
"terminalCursor.foreground": "#fe5d41"
},
"workbench.statusBar.visible": true,
"workbench.activityBar.visible": false,
"workbench.sideBar.location": "right",

// Optional BUT IMPORTANT: If you have the prettier extension enabled for other languages like CSS and HTML, turn it off
"prettier.disableLanguages": ["javascript", "javascriptreact", "markdown"],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},

//Terminal settings
"terminal.integrated.cursorBlinking": true,
"terminal.integrated.enableBell": true,
"terminal.integrated.fontSize": 15,
"terminal.integrated.fontFamily": "'Fira Code'",

//Live server
"liveServer.settings.port": 5555,
"liveServer.settings.CustomBrowser": "firefox",
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.fullReload": true,
"tabnine.experimentalAutoImports": true,

//Other
"explorer.confirmDragAndDrop": false,
"window.menuBarVisibility": "toggle",
"files.trimTrailingWhitespace": true,
"files.eol": "\n",
"[javascript]": {
"editor.formatOnSave": false
},
"[javascriptreact]": {
"editor.formatOnSave": false
},
}

Extensions

Extension Descripton
Better Comments Improved comments
Bracket Pair Colorizer 2 Colorize matching brackets
Debugger for Chrome Debug JavaScript code in the Chrome
ESLint Integrates ESLint into VS Code
GitLens — Git supercharged Supercharge the Git capabilities
indent-rainbow Makes indentation easier to read
JavaScript Snippet Pack A snippet pack
Live Server Local Server with live reload
Polacode Polaroid for your code
Prettier - Code formatter Code formatter using prettier
Quokka.js Live Scratchpad for JavaScript
Rainbow Brackets A rainbow brackets
Remote - WSL Open any folder in the WSL
Settings Sync Synchronize Settings
Import Cost Display import package size in the editor
Jest Use Facebook's Jest With Pleasure
jumpy Fast cursor movement
Markdown Preview Enhanced Markdown Preview
Quick and Simple Text Selection Jump to select between quote, brackets, etc.
TabNine Machine learning to help you write code faster

Vim is a highly configurable text editor built to make creating and changing any kind of text very efficient.

Vim screenshoot

Plugins

Plugin Description
Vim-plug Minimalistic Vim plugin manager
Fzf Command-line fuzzy finder
NERDTree File system explorer for the Vim
Lightline Configurable statusline/tabline
Polyglot A collection of language packs for Vim
Rainbow Parentheses Improved Diff level of parentheses in diff color
LiveDown Instant preview of markdown files
Emmet Support for expanding abbreviations similar to emmet
Gitgutter Shows a git diff in the sign column
Tabnine Deep learning to help you write code faster

ZSH

Z shell, is an extended version of the Bourne Shell (sh), with plenty of new features, and support for plugins and theme.

Framework

Oh My ZSH!

Theme

spaceship

Aliases

alias gitk="gitk.exe"
alias gitgui="git-gui.exe"
alias clip="clip.exe"
alias explore="explorer.exe ."
alias ccat="pygmentize -O style=monokai -g"

Plugins

Plugin Description
zsh-z Jump quickly to directories that you have visited frequently
zsh-syntax-highlighting Syntax highlighting for the shell zsh
fzf General-purpose command-line fuzzy finder
zsh-autosuggestions It suggests commands as you type based on history and completions

How to use WinMerge as a diff/merge tool in WSL2

Copy and pase to .gitconfig file:

[mergetool]
prompt = false
keepBackup = false
keepTemporaries = false

[merge]
tool = winmerge

[mergetool "winmerge"]
name = WinMerge
trustExitCode = true
cmd = "/mnt/c/Program\\ Files/WinMerge/WinMergeU.exe" -u -e -fm -wl -dl "Local" -wr -dr "Remote" $(wslpath -aw $LOCAL) $(wslpath -aw $MERGED) $(wslpath -aw $REMOTE)

[diff]
tool = winmerge

[difftool "winmerge"]
name = WinMerge
trustExitCode = true
cmd = "/mnt/c/Program\\ Files/WinMerge/WinMergeU.exe" -u -e  $(wslpath -aw $LOCAL) $(wslpath -aw $REMOTE)

AHK aliases

A lot of useful aliases that makes working with git a little bit faster 🔥

; **git-specific

::gstl::git stash list
::gfp::git fetch --prune --prune-tags
::grso::git remote show origin
::glo::git log --oneline --graph
::glop::git log --graph --pretty=format:'%Cred%h%Creset %w(72,1,2)%s -%C(yellow)%d%Creset %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit --date=relative
::glcp::git log -S  --format=%h | clip{left 19}
::gm::git merge
::gs::git status
::gl::git ll
::gd::git diff --word-diff
::gdt::git difftool
::gmt::git mergetool
::gc::git commit
::gcae::git commit --allow-empty
::gch::git checkout
::gr::git rebase -i
::gb::git branch
::gst::git stash
::ga::git add -p
::gai::git add -i
::gf::git fetch
::gph::git push
::gignore::git update-index --assume-unchanged
::gunignore::git update-index --no-assume-unchanged
::gmnff::git merge --no-ff -e -m "" -
::-h::--help

I use google chrome for general purpose, when working with css switch to the Firefox

Extensions

Extension Description
Wappalyzer A utility that uncovers the technologies used on websites
WhatFont Identify fonts on web pages
Check My Links Checker that crawls through webpage and looks for broken links
JSONView Validate and view JSON documents
React Developer Tools React debugging tools to the Chrome
Vue.js devtools Extension for debugging Vue.js applications
Material DevTools Theme Collection Material DevTools Theme Collection
ChromeVox Classic Screen reader; ALT+SHIFT+AA TO TOGGLE ON/OFF
Window Resizer Resize the browser window

Windows Terminal is a new, modern, feature-rich, productive terminal application for command-line users.

Windows Terminal screenshoot.

Ubuntu profile

{
  "name": "Ubuntu",
  "guid": "{c6eaf9f4-32a7-5fdc-b5cf-066e8a4b1e40}",
  "source": "Windows.Terminal.Wsl",
  "hidden": false,
  "tabTitle": "Ubuntu",
  "suppressApplicationTitle": true,
  "fontFace": "Hack",
  "fontSize": 12,
  "useAcrylic": false,
  "colorScheme": "Dracula",
  "cursorShape": "filledBox",
  "cursorColor": "#ee4d02",
  "padding": "15, 15, 15, 15",
  "snapOnInput": true,
  "icon": "C:/Users/user/ubuntu-ico.ico",
  "startingDirectory": "//wsl$/Ubuntu-18.04/home/user/"
}

Color scheme

{
  "name": "Dracula",
  "background": "#272935",
  "black": "#272935",
  "blue": "#BD93F9",
  "brightBlack": "#555555",
  "brightBlue": "#BD93F9",
  "brightCyan": "#8BE9FD",
  "brightGreen": "#50FA7B",
  "brightPurple": "#FF79C6",
  "brightRed": "#FF5555",
  "brightWhite": "#FFFFFF",
  "brightYellow": "#F1FA8C",
  "cyan": "#6272A4",
  "foreground": "#F8F8F2",
  "green": "#50FA7B",
  "purple": "#6272A4",
  "red": "#FF5555",
  "white": "#F8F8F2",
  "yellow": "#FFB86C"
}

Other Software

Reference