上手VSCode以及定制PHP和Python开发环境

VSCode是个好东西，免费，跨平台。而最大的亮点是，在同一套UI/UE下，通过不同的extension，以搭积木的方式定制出适用不同编程语言的环境，就是VSCode里首要的一个概念Workspace。

不同开发环境间的隔离原理

上手VSCode，只需要搞懂三个概念：User，Workspace，Folder。把它们称为VSCode的框架基石也不为过。

Workspace跟传统意义上的Project类似，但VSCode里不出现任何Project的概念，在它看来，你有一个工作间，工作间里除了基础设施外，还有你定制的工具（extension），然后你的桌面上摆着几个文件夹（Folder），都是这次工作要用到的东西。而你，就是用户（User）。

要配置开发环境，我们必然需要设置偏好配置（Setting）。VSCode的偏好配置，在User、Workspace、Folder下均有一份副本，三者的优先级关系是：User < Worksapce < Folder。通俗点说，你（User）有一套行为规范，工作间（Workspace）有一套行为规范，桌面的文件夹（Folder）也有一套行为规范。当你走进某个工作间后，就要以工作间的规范为准，而要处理某个特定的文件夹，又要以文件夹的规范为准。

在这三个概念的基础上，我们接下来就可以开始定制开发环境（工作间）啦。

定制PHP开发环境

1. 打开VSCode，另存为（Save Workspace As）一个新的工作间，取名字为php.template.code-workspace。

2. 在工作间里摆放PHP开发用到的工具（extension），推荐以下几个extension：HTML Preview，PHP Debug，PHP Intelephense。工作间的基础设施里已有Git，所以默认的版本管理软件是Git，但如果你要用到SVN，那么只需要添加extension：SVN。如果你喜欢用Vim，那么再添加一个extension：Vim。

   image-20200315142606240

3. 如果你安装了其他extension，但对PHP开发无用，你也无需卸载，只要将这个extension从这个工作间里Disable掉，如此就可以让这个工作间的工具箱非常清爽，不臃肿。

   image-20200315143632975

4. 打开扩展PHP Intelephense的Setting，切到User级。

   • 找到Environment: PHP Version，将你当前使用的PHP版本号填入。
   • 找到Stubs，看一下如果缺了某些PHP扩展，把它们添加进去，这样在编写代码时才能识别那些扩展的语法。
   image-20200315143941371

5. 打开调试（Debug）栏，第一次是需要创建launch.json的，

   image-20200315144440187

6. 点create a launch.json file后会提问选择环境（PHP/node.js），选择PHP。然后就会自动创建一个PHP的debug配置文件，预置了内容在里面。基本不用怎么修改就可以使用。

   • Listen for Debug：用于调试web。即web过来的访问，进入调试模式。
   • Launch currently open script：用于调试当前打开的脚本，如果需要指定脚本的参数，可以"port": 9000的下面增加"args": [<args_1>, <args_2>]。
   image-20200315145717221

7. 要想PHP的Xdebug正常工作，除了要安装好xdebug扩展，还需要在php.ini里增加几行配置：

   [XDebug]
   xdebug.remote_enable = 1
   xdebug.remote_autostart = 1
   

8. 最后将要开发的工程文件夹添加进工作间，即可开始做开发啦。

定制Python开发

1. 打开VSCode，另存为（Save Workspace As）一个新的工作间，取名字为python.template.code-workspace。
2. 在工作间里摆放Python开发用到的工具（extension），推荐的extension：Python。如果你喜欢用Vim，那么再添加一个extension，名为Vim。如果你需要使用高级的远程开发模式（这个功能在PyCharm里只有收费版才能使用），添加extension：Remote-SSH。
3. 其他需求可参考上面PHP的配置，或者网上搜一下。

Mac上常用的VSCode快捷键

• command + p：极为重要的一组快捷键。

  • 直接敲入内容，可以作为文件导航，快速切到目标文件上。
  • 先敲一个@，可以列出当前打开的文件中的所有symbols。
  • 先敲入@:，可以列出当前打开的文件中所有的classes、functions、variables等。
  • 先敲入>，则可以唤出各种功能菜单，包括extension支持的功能菜单，还可以继续输入字母来快速找到要用的功能。真的爱死这个设计了！
  image-20200315151840650

• command + b：展出和收回左栏，在写代码时常常用到。

• ctrl + `：打开和关闭终端（Terminal）窗口。

• ctrl + -：回到上一次光标所在的位置，在读代码时常常用到。