Ubuntu on WSL
Windows Subsystem for Linux (WSL)
Config is a basic checklist I follow to set up a new Ubuntu's development environment. It gets me up to speed with Git, Ruby, GitHub, Jekyll, and more so I can more quickly get back to coding.
File | Description |
---|---|
.bashrc |
Customizes the Terminal prompt and echoes the currently checked out Git branch. |
.gitconfig |
Global Git configuration to specify my name and email, shortcuts, colors, and more. |
.gitignore |
The Git ignore file that I use everywhere. |
.gitattributes |
The Git attributes file that I use everywhere. |
This repository includes a shell script for executing the bulk of the configuration process. First, install and agree to terms for WSL, then download and run Windows Terminal. Then, enter the following in Terminal:
cd $Home && mkdir -p Downloads && curl https://raw.githubusercontent.com/MilanAryal/config/master/config.sh > ~/Downloads/config.sh && bash ~/Downloads/config.sh
- Checklist
- How-to
- Coding guide
- WSL2
- Try the new cross-platform PowerShell - on GitHub
- Microsoft Terminal - on Github
- Visual Studio Code code editor
- Atom text editor
- GitHub Desktop
- GitHub cloning path:
\\wsl$\Ubuntu\home\milan\GitHub
or\\wsl$\<distro_name>\home\<user_name>\GitHub
- Remote - WSL - Homepage - Unique Identifier @id:ms-vscode-remote.remote-wsl
- EditorConfig - Homepage
- stylelint - Homepage
- scss-lint - Homepage
- ESLint - Homepage
- Markdown All in One - Homepage
- markdownlint - Homepage
- Code Spell Checker - Homepage
- lorem ipsum
- Prettier - Code formatter - Homepage
- Emmet built-in VS Code - Homepage
- Auto Rename Tag - Homepage
- Bracket Pair Colorizer - Homepage
- Bracket Pair Colorizer 2 - Homepage
- JavaScript (ES6) code snippets - Homepage
- Live Server - Homepage
- Live Sass Compiler - Homepage
- EditorConfig - Homepage
- linter-stylelint - Homepage
- linter-scss-lint - Homepage
- linter-eslint - Homepage
2. Install WSL
- Before installing Ubuntu distro enable WSL feature with the Powershell
Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux
- Get Ubuntu distro from the Microsoft Store or with command-line/script on Powershell
- Update OS packages
sudo apt update -y && sudo apt upgrade -y
- Install zlib for Nokogiri (鋸) Ruby gem
sudo apt install zlib1g zlib1g-dev
-
Check stable Ruby version on GitHub Pages
-
Install Ruby with OS native apt
sudo apt update
sudo apt install ruby-full build-essential zlib1g-dev
ruby --version
And, avoid installing Ruby Gems as the root user
echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc
- Or, Install Ruby via version manager for latest stable version
- rbenv
- rvm
- Brightbox - Jekyll install guide
- Install Bundler gem:
gem install bundler
- Place the
Gemfile
in the project folder and install gem:
bundle install
- Install nodejs with OS native apt
sudo apt update
sudo apt install -y nodejs npm build-essential
nodejs --version
npm --version
- Or, for latest stable version
Setup package.json file
-
Go to project file, and create a package.json file
-
Setup required dependencies
-
And install them via terminal
npm install
- Or, Install them directly via CLI
Eg. Install Webpack command line tools globally:
npm install -g webpack-cli
Eg. Install Webpack on a project folder (which install on node_modules
folder)
npm install webpack webpack-cli --save-dev
To run package on project installed folder npx webpack
# ----------------------------------------------------------------------
# | Add the following line at the bottom of ~/.bashrc file |
# | this will override the default configuration |
# ----------------------------------------------------------------------
# Add Git branch if its present to PS1
parse_git_branch() {
git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ (\1)/'
}
# $ _ Custom bash prompt
#
# Includes custom character for the prompt, path, and Git branch name.
export PS1='\[\e]0;${PWD##*/} — bash — ${COLUMNS}x${LINES}\a\]\[\033[00;35m\]→ \[\033[01;36m\]\w\[\033[01;33m\]$(parse_git_branch) \[\033[31m\]\$\[\033[0m\] '
...
# Print Linux distro without version, just only dist:
linux_distro() {
cat /etc/issue | head -n +1 | awk '{print $1}'
}
# Add Git branch if its present to PS1
parse_git_branch() {
git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ (\1)/'
}
...
# $ _ Custom bash prompt
#
# Includes custom character for the prompt, path, and Git branch name.
export PS1='\[\e]0;${PWD##*/} — $(linux_distro) — ${COLUMNS}x${LINES}\a\]\[\033[00;35m\]→ \[\033[01;36m\]\w\[\033[01;33m\]$(parse_git_branch) \[\033[31m\]\$\[\033[0m\] '
# $ _ Custom bash prompt
#
# Includes custom character for the prompt, path, and Git branch name.
export PS1='\[\e]0;${PWD##*/} — $(linux_distro) — WSL\a\]\[\033[00;35m\]→ \[\033[01;36m\]\w\[\033[01;33m\]$(parse_git_branch) \[\033[31m\]\$\[\033[0m\] '
# $ _ Custom bash prompt
#
# Includes custom character for the prompt, path, and Git branch name.
export PS1='\[\e]0;${PWD##*/} [WSL: $(linux_distro)]\a\]\[\033[00;35m\]→ \[\033[01;36m\]\w\[\033[01;33m\]$(parse_git_branch) \[\033[31m\]\$\[\033[0m\] '
or, a community bash framework:
or, create a custom PS1 variable for your bash:
Here's a guide:
-
Open
~/.bashrc
in a text editor -
At the bottom, add a new function:
# Atom alias (https://github.com/atom/atom/issues/18126#issuecomment-463226481)
atom() {
target_path=$(wslpath -a -w $(readlink -f $1)) # resolve the path
(/mnt/c/Windows/System32/cmd.exe /C "atom.cmd $target_path" &> /dev/null) # open the path
}
-
Save the file and exit the text editor
-
Run
. ~/.bashrc
The command atom
will now work properly!
List most used commands: apt
Update OS packages: sudo apt update -y && sudo apt upgrade -y
List all packages: apt list
&& apt list | more
&& apt list | grep foo
To install package: sudo apt install -y <package_name>
To search package: apt search <package_name>
To know the package version before install: apt policy <package_name>
To know the package details: apt show <package_name>
To delete package and its dependecies: apt --purge remove <package_name>
Add repo: sudo apt-add-repository <ppa: repo_name> && apt update
Remove repo: udo apt-add-repository -r <ppa: repo_name> && apt update
Locate the executable file associated with a given command: which -a [filename]
wslfetch - creates colorful wsl information
vmstat -s - virtual machine system usage stats
There are two ways to access your Linux files. First, the easy one. From within the Windows Subsystem for Linux environment you want to browse, run the following command:
explorer.exe .
You can also access them directly at a \\wsl$
path. In File Explorer or any other Windows application that can browse files, navigate to the following path:
\\wsl$
Or, simply win key + r
→ type \\wsl$
→ Press Enter
# open vs code in wsl
code .
# to open a wsl window directly from a Windows prompt
# use the `--remote` command line parameter:
code --remote wsl+<distro name> <path in WSL>
# for example:
code --remote wsl+Ubuntu /home/jim/projects/c
Install nscd using the following command if not yet
sudo apt install nscd
Flush DNS Cache in Ubuntu by restarting the nscd
sudo /etc/init.d/nscd restart
%temp%
%appdata%
%userprofile%
%programfiles%
shell:RecycleBinFolder → start recycle bin folder
documents
downloads
favorites
pictures
recent
videos
controldevmgmt.msc
regedit
msconfig
cmd → start command prompt app
wt → start windows terminal app
powershell
calc
mspaint
notepad
write → wordpad
winword
excel
powerpnt
$PSversionTable or $PSVersionTable.PSVersion → Check your PowerShell Version
$host.version or get-host|Select-Object version → Alternative to check PowerShell Version
wsl → open default linux distro
wsl --list --verbose or wsl -l -v → list all distro and wsl version
wsl -d <distro_name> → open required linux distro
wsl --set-version <distro_name> 2 → open linux distro in wsl2
wsl --set-version <distro_name> 1 → open linux distro in wsl1
wsl --set-default-version 2 → make wsl2 default
wsl --shutdown → terminate all WSL instances
In order to optimize for the fastest performance speed, be sure to store your project files in the Linux file system (not the Windows file system).
For example, when storing your WSL project files:
- Use the Linux file system root directory:
\\wsl$\Ubuntu\home\<user name>\Project
- Not the Windows file system root directory:
C:\Users\<user name>\Project
Project files that you are working with using a WSL distribution (like Ubuntu) must be in the Linux root file system to take advantage of faster file system access.
You can access your Linux root file system with Windows apps and tools like File Explorer. Try opening a Linux distribution (like Ubuntu), be sure that you are in the Linux home directory by entering this command: cd ~
. Then open your Linux file system in File Explorer by entering (don't forget the period at the end): explorer.exe .
Location path:
%userprofile%\AppData\Local\Packages\Microsoft.WindowsTerminal_8wekyb3d8bbwe\LocalState
profiles.json
{
// Startup as Ubuntu profile {guid}.
"defaultProfile": "{2c4de342-38b7-51cf-b940-2309a097f518}",
"profiles":
{
"defaults":
{
// Put settings here that you want to apply to all profiles.
"colorScheme": "One Half Dark"
},
"list":
[
{
// Make changes here to the Ubuntu WSL profile.
"guid": "{2c4de342-38b7-51cf-b940-2309a097f518}",
"hidden": false,
"name": "Ubuntu",
"source": "Windows.Terminal.Wsl",
"colorScheme": "One Half Dark",
"startingDirectory": "\\\\wsl$\\Ubuntu\\home\\milan"
},
{
// Make changes here to the Debian WSL profile.
"guid": "{58ad8b0c-3ef8-5f4d-bc6f-13e4c00f2530}",
"hidden": false,
"name": "Debian",
"source": "Windows.Terminal.Wsl",
"colorScheme": "Solarized Dark",
"startingDirectory" : "\\\\wsl$\\Debian\\home\\milan"
}
]
}
}
Note: "startingDirectory": "\\\\wsl$\\[distro-name]\\home\\[linux-user]"
or non-escaped also works "startingDirectory" : "//wsl$/<distro>/home/<user>"
Learn more about:
- text editor
+ vs code
+ atom
+ editorconfig extension
- git
+ github desktop
- wsl
+ ubuntu
- ruby
+ ruby-full
+ build-essential
+ bundler
- node.js
+ npm
camelCase for JavaScript/jQuery, underscores for PHP/Liguid tag, and hyphens for CSS. Boom!
- Code Guide by Mark Otto
- Google Style Guides
- HTML Style Guide and Coding Conventions, W3 Schools
- GitHub Guides
- How to name css classes
- Ubuntu, ExternalGuides
- About
rel=noopener
- Rouge code highlighter - List of supported languages and lexers
- jEmoji searcher by Muan