linux安装vscode_愉快的使用 Windows 开发!WSL 安装及前端开发环境配置

641823da093d6f4c623ee2838a8928b9.png

WSL 全称为 Windows Subsystem for Linux,是一个为在 Windows 10 上能够原生运行 Linux 二进制可执行文件(ELF格式)的兼容层。微软早在 16 年就推出了 WSL,前一阵更是发布了 WSL 2.0,现在想必已经相对完善了。最近我在自己的 Windows 笔记本上安装了 WSL 并进行了体验,总体来说体验很棒,下面是具体的内容。


2019.6.10 更新:

VS Code 发布了 May 2019 (version 1.35),现在 Remote Development 插件包可以在稳定版的 VS Code 中使用了!


Windows Subsystem for Linux 有什么用?跟虚拟机有什么区别?

相对于虚拟机,Windows Subsystem for Linux 有以下优点:

  1. 性能更好。
    由于实现更加底层,所以性能要比虚拟机好很多。
  2. 与 Windows 共享的文件系统。
    子系统是可以直接访问硬盘中的所有文件的,甚至可以执行 .exe 文件。

当前 Windows 有什么问题?

Windows 虽然是应用最广的桌面操作系统,但是在 web 开发领域,主流的选择却是 macOS。在前端方面,React Native 刚出的时候甚至没法在 Windows 下开发 。用于 web 开发时,Windows 最主要的问题应该就是命令行工具了,Windows 下的 cmd 与 Linux 有很多不一样的地方。比如前一阵自己在开发中就遇到了 Windows 与 Linux 的路径书写方式不一致问题:

https://www.howtogeek.com/137096/6-ways-the-linux-file-system-is-different-from-the-windows-file-system/

系统要求

安装子系统要求 Windows 10 Fall Creators Update 及之后版本,从这个版本开始,子系统才正式对外发布,之前的版本需要打开开发者选项。

我们可以在设置中选择系统—-关于-—Windows 规格,来查看 Windows 版本号,大于 16215 就可以了:

3bbcc54539abebd129d77a1b77d92e89.png

安装

WSL 的安装已经十分简单了。

首先,以管理员身份打开 PowerShell 并运行:

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

之后,在 Microsoft Store 搜索 Linux,安装想要的 Linux 分发。

08604317512f20ea11669e7da9ba7253.png

我这里选择的 Ubuntu,你可以装很多分发,并不是只能安装一个。

Microsoft Store 装软件十分简单,只需要点一点就好了。之后开始菜单中就会出现 Ubuntu 的icon

b3162351dcb6a6d64a7c4947e7d769a4.png

点击启动!

使用

启动后,第一次需要初始化较长时间,之后会让设置一个系统的账号密码,和 Windows 的账号密码是有没有关系,的可以随便设,但遗忘不能找回,需要注意。

启动后就和使用虚拟机一样的感觉:

9b651a0f63da83ceb2835d10e3cd22ff.png

从子系统中是可以直接访问 Windows 路径中的文件的,Windows 中的磁盘挂载在了 /mnt 目录下。

9ccb9de50322b8d591ed0bd6e08feade.png

跨平台执行

子系统一个很强大的功能是可以跨平台执行,在 Linux 中执行 Windows 程序,在 Windows 中执行 Linux 程序。

Windows 执行 bash

在 Windows 命令行中,可以直接使用 bash:

bash -c "sudo apt-get update"

41ce27a82a8417a42b395a46ee3e8f3b.png

bash 执行 windows

Linux 子系统中,只需在命令中加上 .exe 后缀,就可以直接执行:

68216942c61a2c47d6e6e29bee9cf8b4.png

试了一下甚至可以直接执行 chrome.exe,不过并没有发现有什么特殊的地方。

开发环境配置

安装 oh-my-zsh

安装 oh-my-zsh 和在 Mac 中是一样的, 直接执行:

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

安装 Node.js

nvm 和 n 我没有体验出太大区别,我一般习惯使用 n 来管理 node 版本。node 的包管理在 Windows 上也有点复杂,虽然有 nvm-widnows 但是不很好用。

我们直接在子系统中执行以下命令来安装 n 和 Node.js:

curl -L https://git.io/n-install | bash

安装 git

由于是 Ubuntu,我们可以直接使用 apt 来安装 git:

sudo apt install git

VS Code 体验

开发环境,离不开代码编辑器。现在我们已经可以做到命令行工具运行在 Linux 下了,接下来要做的就是让 VS Code 适配 WSL。

在之前的版本,很多人试过各种办法:

  • 把 VS Code 的默认 terminal 改成 wsl.exe,但 VS Code 集成的 Git 工具还是运行在 Windows 中的。
  • 直接在 WSL 中打开 VS Code,过程十分复杂,坑也很多。

幸运的是现在已经不需要这些复杂的操作了!在 VS Code 的 insider 版本中,已经支持了 Remote Development with VS Code,Remote Development 功能可以让我们流畅的在 WSL 中进行开发。

c2aa3e6230bfc82568da5b576e2cf46e.png

首先我们需要在 Windows 侧安装 Visual Studio Code Insiders:https://code.visualstudio.com/insiders/,安装过程中记得到勾选上 添加到PATH 选项,否则我们不能直接通过code-insiders命令开启 VS Code。

之后就可以在 WSL 中打开项目目录,通过 code-insiders . 打开 VS Code。第一次打开时需要安装一些依赖:

6c1787181f50e420dc25df19d3bbb4f1.png

打开后可以看到在项目目录名后会增加 [WSL] 字样:

3345ded69cfcad223c943f8fbf26a9c5.png

打开命令行试试,已经是在 WSL 环境中了:

867e1eaddc276ae6e76df9973df3868e.png

为了使用方便,我们把默认 terminal 从 bash 改成 zsh,在 VS Code 的选项中修改:

2c38c76632d811e87f78aa277b3db71f.png

现在 terminal 已经是 zsh 了:

6be739c2d661e87365633e4762ecd21e.png

在 WSL 中进行开发

我们用 node 打印一下项目路径试试,可以看到路径问题没有了 :

46445c915708b031ef980ea2db24c5b2.png

cef161ce93f373c2dd47fe7896c3b433.png

后记

虽然 macbook 十分高大上,但我还是一直希望能用 Windows 进行开发,一个最直接的原因是 mac 实在是太贵了 ,钱不花够,性能会比 PC 差很多。现在用的 MacBook Pro:

208eabd9d9073f51c594bd9beaf9b94b.png

CPU 实在是不给力。

正在变成开源公司的微软现在对开发者越来越重视了,对大家来说真是个好消息。

相关文章

  1. Windows Subsystem for Linux Overview
  2. Announcing WSL 2
  3. Awesome-WSL
  4. Setting Up Windows for Web Development
  5. Remote Development with VS Code
  6. Developing in WSL
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当谈到美化和搭建Linux开发环境时, VS Code,WSLWindows Terminal都是非常有用的工具。 首先,VS Code是一款流行的开源代码编辑器,可通过安装各种插件进行美化。你可以选择喜欢的主题和语法高亮方案,以配合你的个人喜好。 其次,WSLWindows Subsystem for Linux)是一种在Windows上运行Linux二进制文件的兼容层。通过安装WSL,你可以在Windows使用真正的Linux发行版,如Ubuntu或Debian。这样,你就可以在Windows系统中体验和开发Linux环境下的应用程序。 最后,Windows Terminal是Windows新的命令行终端。它支持多个选项卡以及各种自定义设置,如调整配色方案、字体大小和字体类型等。你可以使用Windows Terminal将多个终端会话放置在一个窗口中,从而提高工作效率。 要搭建Linux开发环境,首先你需要安装WSL以及喜欢的Linux发行版。然后,你可以通过安装VS Code插件和扩展来优化你的开发体验。安装一些常用的扩展,如Python、C++或Node.js,以根据你的需求进行开发。 当你需要在Windows环境中执行Linux命令时,你可以打开Windows Terminal,并选择WSL作为默认终端。这样,你就可以通过Windows Terminal运行和管理你的Linux环境。 总结起来,VS Code,WSLWindows Terminal是一些功能强大且易于使用的工具,它们可以帮助你美化和搭建Linux开发环境使用这些工具,你可以在Windows中轻松进行Linux开发,并以最佳方式执行命令和编辑代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值