使用 VS code 开发

在 Visual Studio Code 开发

Sail 成功的帮我们把专案建立好了，可以来开始写程序啦!

不过这个专案是跑在容器里的，而且在 Windows 上是跑在 WSL 当中，所以 VS code 也必须做些设置才有办法处理这个专案。

需要先帮 VS Code 安装套件 Remote Development

安装好了之後，从 WSL 切到专案目录底下，然後用指令

code .

这样 VS code 就会在 WSL 容器的环境底下开启专案。

如果是已经开启 VS Code ，首先用 Ctrl+Alt+p 开启命令面板。

找到指令

选择指令後就会跳转到 Remote Development 套件的面板，可以选择要开启哪个容器的专案

选择之後 VS Code 重启，变成这样

代表成功在容器中开启专案了

执行 Sail 指令

虽然开启了专案但目前还无法藉由指令视窗对专案进行操作，必须藉由 Sail 让我们可以跟容器中的环境互动。

开启指令视窗後首先建立 sail 指令的捷径

alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'

接着试试看

sail php -v

会显示安装在容器中的 php 版本

我们主要会利用 Sail 运作 composer ,artisan 的指令

Composer

php 套件管理工具，主要用来安装第三方套件

执行 composer 的 dump-autoload 指令:

sail composer dump-autoload

Artisan

Laravel 内建的指令介面，用於指示 laravel 执行各种指令像是 migration , queue 等，也能用来快速产生 Controller 等档案。

执行 artisan 的 migrate 指令:

sail artisan migrate

错误: chmod(): Operation not permitted

在执行 composer dump-autoload 时出现了这个错误，原因是 WSL 没有读写档案的权限。

设定 WSL 存取权限

WSL 中的每个 Ubuntu 环境可以个别设置权限，在想设定的 Ubuntu 环境中移动到 etc 资料夹

cd ~/../etc

在这里找到 wsl.conf 档案，如果没有的话就做一个，在 wsl.conf 中写入基础的设定资讯

# /etc/wsl.conf
# Enable extra metadata options by default
[automount]
enabled = true
root = /windir/
options = "metadata"
mountFsTab = false

# Enable DNS – even though these are turned on by default, we'll specify here just to be explicit.
[network]
generateHosts = true
generateResolvConf = true

重点在 options = "metadata" 这行，开启 metadata 选项让 WSL 可藉由 metadata 取得读写权限。

设定好 wsl.conf 後退出 Ubuntu ，重启他

wsl --shutdown   #停止所有 wsl 下的环境
wsl -d <Ubuntu 环境名称>

记得也要重启 Docker 。

要确认环境是否运行中可以用指令

wsl -l -v

References

File Permissions for WSL

WSL commands and launch configurations