Setup Windows Subsystem for Linux

Requirements

• Windows 10.

Steps

1. Enable WSL2

Using PowerShell:

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux
Enable-WindowsOptionalFeature -Online -FeatureName VirtualMachinePlatform

Or

• open Microsoft Start.
• search for Turn Windows features on or off.

• check Hyper-V.
• check Windows Subsystem for Linux.

2. Install a Linux distro for WSL2

• open Microsoft Store on Windows.
• search for Linux.
• install Ubuntu 18.04 (recommended).

3. Install Windows Terminal

• open Microsoft Store on Windows;
• search for Windows Terminal;
• install Windows Terminal.

4. Set Windows Terminal to use Ubuntu

5. Install ZSH and Oh My Zsh

Run in Windows Termina:

sudo apt update && sudo apt upgrade -y

sudo apt install zsh -y

• check zsh install success

which zsh

-> /usr/bin/zsh

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

nano ~/.zshrc

• If file is worong -> remove oh-my-zsh and reinstall

rm -rf ~/.oh-my-zsh

6. Install NVM using ZSH

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.0/install.sh | bash
echo "export NVM_DIR=\"$HOME/.nvm\"\n[ -s \"$NVM_DIR/nvm.sh\" ] && \. \"$NVM_DIR/nvm.sh\"\n[ -s \"$NVM_DIR/bash_completion\" ] && \. \"$NVM_DIR/bash_completion\"" >> ~/.zshrc
source ~/.zshrc

7. Install Node (latest) using NVM

nvm install node
nvm alias default node

8. Install Yarn

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install --no-install-recommends yarn

9. Install Nodemon, ESLint

npm i -g nodemon eslint

10. Install neofetch

sudo apt install neofetch
echo 'neofetch' >> ~/.zshrc

11. Install VSCode extensions

curl -o- https://raw.githubusercontent.com/phuongnd1312/devops/master/vscode-extension.sh | bash

12. Upgrade Ubuntu

sudo apt upgrade -y

13. Install ZSH plugins

Install plugins

# zsh-completions
git clone https://github.com/zsh-users/zsh-completions ${ZSH_CUSTOM:=~/.oh-my-zsh/custom}/plugins/zsh-completions
# zsh-autosuggestions
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
# fasd
sudo apt install fasd -y

Edit ~/.zshrc in WSL

# open file
nano ~/.zshrc

# update file
ZSH_THEME="bira"

plugins=(   
    git
    zsh-autosuggestions
    zsh-completions
)

# save file
Ctrl + o Enter
Ctrl + x

# run file
source ~/.zshrc

14. Set VSCode User Setting

{
  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  "git.path": "/usr/bin/git",
  "workbench.iconTheme": "eq-material-theme-icons-ocean",
  "editor.renderWhitespace": "all",
  "files.eol": "\n",
  "gitlens.advanced.messages": {
    "suppressShowKeyBindingsNotice": true
  },
  "gitlens.historyExplorer.enabled": true,
  "team.showWelcomeMessage": false,
  "eslint.trace.server": "verbose",
  "emmet.includeLanguages": {
    "javascript": "html",
    "vue": "html",
    "vue-html": "html",
    "javascriptreact": "html",
    "typescript": "html"
  },
  "vetur.format.defaultFormatter": {
    "html": "prettier",
    "css": "prettier",
    "postcss": "prettier",
    "scss": "prettier",
    "less": "prettier",
    "js": "prettier",
    "ts": "prettier",
    "vue": "prettier"
  },
  "editor.multiCursorModifier": "ctrlCmd",
  "window.zoomLevel": 0,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "terminal.integrated.rendererType": "dom",
  "git.ignoreMissingGitWarning": true,
  "jsDocCompletion.enabled": true,
  "javascript.referencesCodeLens.enabled": true,
  "diffEditor.ignoreTrimWhitespace": false,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "gitlens.views.fileHistory.enabled": true,
  "gitlens.views.lineHistory.enabled": true,
  "workbench.colorCustomizations": {
    "activityBarBadge.background": "#2979FF",
    "list.activeSelectionForeground": "#2979FF",
    "list.inactiveSelectionForeground": "#2979FF",
    "list.highlightForeground": "#2979FF",
    "scrollbarSlider.activeBackground": "#2979FF50",
    "editorSuggestWidget.highlightForeground": "#2979FF",
    "textLink.foreground": "#2979FF",
    "progressBar.background": "#2979FF",
    "pickerGroup.foreground": "#2979FF",
    "tab.activeBorder": "#2979FF",
    "notificationLink.foreground": "#2979FF",
    "editorWidget.resizeBorder": "#2979FF",
    "editorWidget.border": "#2979FF",
    "settings.modifiedItemIndicator": "#2979FF",
    "settings.headerForeground": "#2979FF",
    "panelTitle.activeBorder": "#2979FF",
    "breadcrumb.activeSelectionForeground": "#2979FF",
    "menu.selectionForeground": "#2979FF",
    "menubar.selectionForeground": "#2979FF"
  },
  "workbench.colorTheme": "Sublime Material Theme - Dark",
  "prettier.singleQuote": true,
  "prettier.jsxSingleQuote": true,
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "singleQuote": true
    }
  },
  "vue-i18n-ally.displayLanguage": "en-US",
  "extensions.ignoreRecommendations": false,
  "workbench.sideBar.location": "left",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.migration.2_x": "off",
  "terminal.integrated.shell.linux": "/usr/bin/zsh",
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.acceptSuggestionOnEnter": "off",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "tabnine.experimentalAutoImports": true,
  "vsicons.dontShowNewVersionMessage": true,
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "editor.minimap.enabled": true,
  "editor.renderControlCharacters": false,
  "workbench.activityBar.visible": true,
  "editor.fontFamily": "'Fira Code Retina', Consolas, 'Courier New', monospace",
  "editor.fontLigatures": true,
  "editor.fontWeight": "normal",
  "editor.fontSize": 13,
  "sync.gist": "9accb97dfa086afc560aae212c4b9db5",
  "sync.autoDownload": true,
  "sync.autoUpload": true,
  "sync.forceDownload": true,
  "sync.forceUpload": true,
  "sync.quietSync": true,
  "settingsSync.ignoredExtensions": [
    "dbaeumer.jshint"
  ]
}

15. Set VSCode Workspace Setting

{
  "editor.renderWhitespace": "all",
  "files.eol": "\n",
  "prettier.trailingComma": "none",
  "gitlens.advanced.messages": {
    "suppressShowKeyBindingsNotice": true
  },
  "gitlens.historyExplorer.enabled": true,
  "eslint.autoFixOnSave": true,
  "eslint.trace.server": "verbose",
  "emmet.includeLanguages": {
    "javascript": "html",
    "vue": "html",
    "vue-html": "html",
    "javascriptreact": "html",
    "typescript": "html"
  },
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "editor.multiCursorModifier": "ctrlCmd",
  "materialTheme.fixIconsRunning": false,
  "editor.formatOnSave": true,
  "prettier.singleQuote": true,
  "editor.tabSize": 2,
  "files.associations": {
    "*.js": "javascript"
  }
}

16. Set VSCode Keyboard Setting

 {
    "key": "ctrl+shift+u",
    "command": "editor.action.transformToUppercase",
    "when": "editorTextFocus"
 },
 {
    "key": "ctrl+shift+l",
    "command": "editor.action.transformToLowercase",
    "when": "editorTextFocus"
 }