很多时候,尤其是使用开源项目代码或者安装一些开发环境的时候,Linux环境会比Windows环境方便很多;但是有时候我们需要Windows的Office环境,比如使用Office、Outlook等,不能简单的长时间停留在Linux环境下 。因此,我们希望有一个集成的环境,可以在Linux环境下开发,也可以在Windows环境下开发各种软件 。
这是可以做到的 。Windows10系统本身与Linux内核兼容 。有关详细信息,请参考WindowsWSL文档 。
本文首先在Windows10上安装WSL2,然后在Windows10上安装VSCode,然后演示如何使用VSCode的远程开发插件在WindowsWSL上远程开发和调试一个JavaScript程序 。
JavaScript只是一个例子 。我们可以用类似的方法开发Python、C/C、PHP、Java……等等 。
安装WSL在Windows10中安装WSL,主要参考微软官方安装文档 。建议使用WSL2 。
在参考官方文件之前,我们需要了解一些官方文件中没有解释的细节 。
使能CPU的虚拟化功能要安装WSL,需要启用CPU虚拟化 。首先,我们需要确认CPU虚拟化已经开启 。
首先进入Windows的任务管理器
![网站开发环境怎么写,项目开发环境怎么写](http://img.guangxilong.com/221115/0051151547-0.jpg)
文章插图
然后单击任务管理器的性能选项卡,并单击CPU列查看CPU状态 。必须开启CPU虚拟化 。
![网站开发环境怎么写,项目开发环境怎么写](http://img.guangxilong.com/221115/005115I43-1.jpg)
文章插图
如果没有打开或显示CPU虚拟化,并且使用了物理机,则需要打开计算机主板上的CPU虚拟化设置 。不同主板品牌的BIOS设置不同 。请参考主板的BIOS帮助手册 。以下以基本输入输出系统设置为例:
![网站开发环境怎么写,项目开发环境怎么写](http://img.guangxilong.com/221115/005115M92-2.jpg)
文章插图
![网站开发环境怎么写,项目开发环境怎么写](http://img.guangxilong.com/221115/0051154008-3.jpg)
文章插图
如果您使用的是Windows虚拟机,请为Windows虚拟机启用“允许嵌套虚拟化”或类似选项 。根据所使用的虚拟机,选项可能会有所不同 。请参考虚拟机的帮助手册 。以虚拟机选项为例:
![网站开发环境怎么写,项目开发环境怎么写](http://img.guangxilong.com/221115/005115C64-4.jpg)
文章插图
WSL安装后的测试安装了分布式版本的Linux之后,我们来测试一下WSL是否可以 。测试方法来自w 。
indows中访问WSL的一个tcp服务 。
在WSL的Linux分发版本安装完毕后,WSL会在Windows上虚拟一个网络,这个网络IP可以通过PowerShell的命令获取 。
wsl hostname -I
![网站开发环境怎么写,项目开发环境怎么写](http://img.guangxilong.com/221115/0051156163-5.jpg)
文章插图
可以看到,示例的WSL的IP是172.19.74.91
在WSL的shell中,用netcat打开一个tcp的服务,监听端口9999 。
nc -l -p 9999
![网站开发环境怎么写,项目开发环境怎么写](http://img.guangxilong.com/221115/0051156035-6.jpg)
文章插图
在Windows中,在应用商店查找一个名为“tcp/udp debugger”的工具,并安装 。
![网站开发环境怎么写,项目开发环境怎么写](http://img.guangxilong.com/221115/005115AU-7.jpg)
文章插图
安装完毕后,打开这个应用,连接之前在WSL中打开的tcp服务,IP为WSL的IP 。如果可以连接成功并发送数据,说明WSL安装没有问题 。
![网站开发环境怎么写,项目开发环境怎么写](http://img.guangxilong.com/221115/0051152311-8.jpg)
文章插图
安装VS Code开发环境请参考VS Code的官方网站 。
安装Remote Development插件在VS Code的插件市场,搜索remote development插件,然后安装 。
![网站开发环境怎么写,项目开发环境怎么写](http://img.guangxilong.com/221115/0051152308-9.jpg)
文章插图
安装remote development插件成功后,点击VS Code左侧导航栏的Remote Development图标,并选择WSL 。
![网站开发环境怎么写,项目开发环境怎么写](http://img.guangxilong.com/221115/0051153601-10.jpg)
文章插图
如果Remote Development插件和WSL工作正常,则在VS Code的工作区会出现已经在Windows中安装的Linux Distro 。
右键单击Linux Distro,选择“Connect to WSL” 。
![网站开发环境怎么写,项目开发环境怎么写](http://img.guangxilong.com/221115/00511542F-11.jpg)
文章插图
VS Code会开始在WSL中安装VS Code server,稍等一会儿VS Code设置成功,然后打开VS Code的Terminal 。
![网站开发环境怎么写,项目开发环境怎么写](http://img.guangxilong.com/221115/0051155308-12.jpg)
文章插图
稍等一下,可以看到我们已经开始使用WSL的shell 。
![网站开发环境怎么写,项目开发环境怎么写](http://img.guangxilong.com/221115/0051154643-13.jpg)
文章插图
安装NodeJS环境在WSL中安装nvm,具体细节可以参考nvm文档 。
在VS Code的Terminal中,输入以下Shell 命令:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
安装结束后,关闭VS Code Terminal,然后再次打开VS Code Terminal,以使能nvm初始化脚本 。
然后执行下面的命令安装node.js
nvm install --lts
如果安装成功,执行nvm ls
可以显示当前nodejs的版本和状态 。![网站开发环境怎么写,项目开发环境怎么写](http://img.guangxilong.com/221115/005115J04-14.jpg)
文章插图
运行
node -v
可以检查nodejs是否可以正常运行 。![网站开发环境怎么写,项目开发环境怎么写](http://img.guangxilong.com/221115/0051152X2-15.jpg)
文章插图
测试NodeJS调试器
打开目录首先在根目录下建立workspace工作目录 。在VS Code Terminal中执行
mkdir workspace
然后点击VS Code左侧的“Open Folder”按钮,然后选择workspace目录![网站开发环境怎么写,项目开发环境怎么写](http://img.guangxilong.com/221115/005115MX-16.jpg)
文章插图
![网站开发环境怎么写,项目开发环境怎么写](http://img.guangxilong.com/221115/0051151001-17.jpg)
文章插图
在workspace目录下,新建test.js文件,内容为:
const person = {tittle: "Mr.",name: {first: "Sake",last: "Pan",},};console.log("person: ", person);while (true) {}
创建启动脚本点击VS Code左侧导航栏的“Run and Debug”,点击“create a launch.json file”
![网站开发环境怎么写,项目开发环境怎么写](http://img.guangxilong.com/221115/0051154M3-18.jpg)
文章插图
选择Node.js
![网站开发环境怎么写,项目开发环境怎么写](http://img.guangxilong.com/221115/005115L24-19.jpg)
文章插图
![网站开发环境怎么写,项目开发环境怎么写](http://img.guangxilong.com/221115/005115JM-20.jpg)
文章插图
运行与调试程序【网站开发环境怎么写,项目开发环境怎么写】在test.js中打断点
![网站开发环境怎么写,项目开发环境怎么写](http://img.guangxilong.com/221115/0051151B1-21.jpg)
文章插图
然后点击“Run and Debug”,然后点击“Start Debugging”
![网站开发环境怎么写,项目开发环境怎么写](http://img.guangxilong.com/221115/00511514X-22.jpg)
文章插图
开始进行调试,可以在“Debug Console”窗口查看console.log信息,也可以在VS Code左边工作区对变量和stack进行观察
![网站开发环境怎么写,项目开发环境怎么写](http://img.guangxilong.com/221115/0051154364-23.jpg)
文章插图
- 完整的商业计划书范例,创业计划书财务分析怎么写
- 资金管理情况汇报,项目资金管理情况分析怎么写
- 相机|相机黑屏拍不了照是怎么回事?相机黑屏的原因
- 招商网,怎么找商场招商信息
- 想赚钱没门路怎么办,想创业找不到门路怎么办
- 相机|相机拍照不清晰是怎么回事?相机拍照不清醒的原因
- 自主创业的工作经历怎么写,自主创业什么意思
- 征信不好怎么按揭买房,个人名下有贷款还能办房贷吗
- 小米手机|小米手机到底怎么样?三件真实现象,简析其中内在关系
- 电动玩具是怎么动的 儿童电动玩具车