I have used a Macbook for more than a year before, but I am still not used to it. I have tried WSL as the main development system before this, but WSL based on Windows ecology is more satisfactory and easier to work with. Just recently, I have rebuilt the development environment. I have been thinking about writing a script for this kind of thing, but I have not been able to take the first step. While I still have some impressions, I would like to comb through my development environment, so that I can write scripts later.

Because they are mainly engaged in front-end work, so the development environment is mainly front-end. The default WSL used in this article is WSL 2. Compare WSL 1 with WSL 2.

🌱 Preparations

network

For well-known reasons, the premise is to ensure that the network is smooth so that the various problems can be handled painlessly. As for how to do this, please refer to my previous article “When a front-end siege lion uses WSL as the main development system…” , the most effective way should be soft routing, not practical operation, no experience to share.

WSL

After installing the WSL, you can start to configure the environment. Here, follow the official documentation and run WSL –install in Powershell to ensure that the minimum requirements of the system version are met. In addition, Ubuntu is installed by default through this command. If you need to replace it, you can configure it yourself.

Note that WSL uses the host device name as hostname by default. You can change the device name in Windows in advance to your desired name. Another important note is to make sure virtualization is enabled in the BIOS.

There’s also a discussion about Hyper-V that I haven’t encountered yet.

software

  • Windows Terminal
  • VS Code
  • Git
  • Chrome
  • Firefox Developer Edition

Before installing the WSL system, install the preceding software in advance. Windows Terminal can be installed in the Microsoft App Store. If you cannot access it, try downloading it in the GitHub repository Release.

Git installation is for a rainy day, after all, the main development tasks will be in WSL, and you should avoid warning git-related extensions when using VS Code directly.

🛠 WSL development environment

After the system is installed, you can start to configure the environment formally. The user name and password should be configured as required. My password is configured simply and conveniently. And no one thought they didn’t enter their password the first time I used Linux, did they?

_ _ (: з < “)

In the source

Backing up the default source

cp /etc/apt/sources.list /etc/apt/sourses.list.bak

Substitute ali source

deb http://mirrors.aliyun.com/ubuntu/ bionic main restricted universe multiverse deb http://mirrors.aliyun.com/ubuntu/ bionic-security main restricted universe multiverse deb http://mirrors.aliyun.com/ubuntu/ bionic-updates main restricted  universe multiverse deb http://mirrors.aliyun.com/ubuntu/ bionic-proposed main restricted universe multiverse deb http://mirrors.aliyun.com/ubuntu/ bionic-backports main restricted universe multiverse deb-src http://mirrors.aliyun.com/ubuntu/ bionic main restricted universe multiverse deb-src http://mirrors.aliyun.com/ubuntu/ bionic-security main restricted universe multiverse deb-src http://mirrors.aliyun.com/ubuntu/ bionic-updates main restricted universe multiverse deb-src http://mirrors.aliyun.com/ubuntu/ bionic-proposed main restricted universe multiverse deb-src http://mirrors.aliyun.com/ubuntu/ bionic-backports main restricted universe multiverseCopy the code

Update it after switching sources

$ sudo apt-get update
$ sudo apt-get upgade
Copy the code

Configuration ZSH

$ sudo apt-get install zsh

#Set ZSH as the default Shell
$ chsh -s /bin/zsh

#Install Oh My Zsh
$ sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

#Install the Zsh-autoSuggestions plug-in
# ref: https://github.com/zsh-users/zsh-autosuggestions/blob/master/INSTALL.md#oh-my-zsh
$ git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

#Add the plugin to Oh My Zsh plugin configuration ~/.zshrc
# plugins=( 
#     # other plugins...
#     zsh-autosuggestions
# )

#Install zsh-syntax-highlighting plugin
$ git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

#Add plug-in startup code
# Note the `source` command must be **at the end** of `~/.zshrc
# why? https://github.com/zsh-users/zsh-syntax-highlighting#why-must-zsh-syntax-highlightingzsh-be-sourced-at-the-end-of-the-zshrc-file
$ echo "source \$ZSH_CUSTOM/plugins/zsh-syntax-highlighting/zsh-syntax-highlightin\
g.zsh" >> ${ZDOTDIR:-$HOME}/.zshrc

#Reconfigure ZSH
$ source ~/.zshrc
Copy the code

Install git

$ sudo apt-get install git
$ git --version
Copy the code

The installationnvm

$The curl - o - https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
Copy the code

Install the node

Install the latest version by default.

$ nvm install node # "node" is an alias for the latest version
Copy the code

Install the Java

Since Java is used in the most recent NPM package, Java is included as one of the tools.

$ sudo apt install openjdk-8-jdk
Copy the code

Configuration VS Code

Finally, it came to my favorite VS Code configuration link. When everything was ready, I cloned any project in WSL through Git to the local, and then opened the project through Code command. Since the project was opened through remote call for the first time, everything was ready after simple initialization.

Recommended extending

  • Auto Close Tag
  • Auto Rename Tag
  • Material Icon Theme
  • ESLint
  • Git Graph
  • GitLens
  • indent-rainbow
  • Path Intellisense
  • Prettier – Code formatter
  • SVG
  • YAML
  • Code Spell Checker
  • CSS Modules
  • CSS Peek

✨ Required Software

  • Ditto – Clipboard management tool
  • Snipaste – Snapshot tool
  • ScreenToGif – Git recording tool
  • Insomnia – API testing tool

We have the idea of how To sort out the Shell script, and the next step is To be continued.