ESP32开发（5）：搭建Linux下VScode开发环境

此教程主要用来补充第一章，第一章我们已经搭建好了ESP32在Ubuntu下的编译环境，但是没有一个趁手的编辑环境。当然了我们可以一边打开终端编译程序，一边打开gedit或者vim编写程序，但是这种方式，对于我们这些熟悉了Windows下编程的小萌新来说，简直难受的要死，经过我多番寻找和尝试，终于发现了VScode这款编程神器。
先来感受一下界面

安装VScode

VScode是微软出的一款轻量且强大的代码编辑器，界面友好，插件丰富，同时支持Windows，OS X和Linux三种系统，堪称良心之作（据说这是微软出的第一款支持Linux的软件）。安装方法分两种，一种是umake在线安装，不过我按照网上方法装了好几次都失败了，只好选择另一种方法deb软件包安装。
首先去VScode官网下载deb软件包到自己的Ubuntu系统中。
然后进到deb软件包所在目录，输入以下命令

sudo dpkg -i code_1.32.3-1552606978_amd64.deb 

等待安装完成，然后输入code命令来启动程序，将其固定在菜单栏上。

配置VScode

配置中文环境

VScode的默认语言环境是英文的，对于英文不太好的小伙伴，使用比较麻烦，我们来看如何将其设置为中文环境。
在VScode界面下输入【Ctrl+Shift+P】打开命令面板，输入config，根据下拉菜单提示选择第一个configure display language，打开locale.json文件，将“locale”的属性改为“zh-CN”

保存后重启VScode，但是会发现语言依然是英文环境，这是因为我们没有安装中文支持包，我们点击扩展，然后输入Chinese，如下图：

会出现一堆中文的支持包，我们选择中文简体点击安装即可（我这边安装过了，所以都是中文提示，也没有安装按钮），安装完，重启软件后就是我们熟悉的中文界面了。

配置渲染

安装好后，在VScode中打开一个ESP32工程文件夹（也可以在文件上点击右键，选择以VScode打开），输入【Ctrl+`】，打开终端，这个终端默认就是bash，输入make，试着编译一下，如果一切正常，那我们就可以进行下一步了。但事情往往不是想象中那么顺利，由于某种原因，我的终端出现了显示不全的问题，如下图：

网上查了好久都没有找到方法解决，最终还是VScode自己看不下去了，提示我“由于电脑性能原因，是否需要更改终端渲染方式为dom”，具体的话我忘了，大概就这么个意思。然后我点击了确认，然后就好了，emmm……
后来为了彻底解决问题，我翻遍了VScode的设置选项，终于找到了下面这个选项。

当然也可以通过更改配置文件来更改渲染方式，在设置中打开settings.json文件，添加下面这一行，就可以将渲染方式改为dom啦。

"terminal.integrated.rendererType": "dom"

添加C/C++插件和头文件路径

一个优秀的编辑器，怎么可能没有代码提示补全功能，VScode肯定也是有的。添加C/C++插件这个其实不用怎么说的，在VScode中，当你打开某一类型文件，它会自动提示你，是否安装其支持包，开发ESP32，我们只需安装上C/C++支持包就可以了。
来感受一下这个插件的功能。我们试着在一个C文件中，输入main，然后选择第一个提示，回车确定，然后一个标准的main函数就出现了。同样的，其它标准C语句也都可以这样快速生成，如switch、ifelse等。

我们主要来看如何添加头文件路径。当我们打开一个ESP32工程，VScode必然会提示你找不到ESP32SDK库里面的头文件，比如“esp_log.h”这些文件，没有这些头文件，那编程时就没有相应的代码提示和补全，会很难受。那怎么添加头文件呢，我们需要修改工程中的一个配置文件c_cpp_properties.json，这个文件是属于工程文件夹下的，每个在VScode打开的工程文件，都可以有这样一个文件，用来配置当前工程的一些参数，这个文件可以通过头文件的错误提示小黄灯来打开，如下图：

c_cpp_properties.json

{
    "configurations": [
        {
            "name": "Linux",
            "includePath": [
                "${workspaceRoot}"
            ],
            "browse": {
                "limitSymbolsToIncludedHeaders": true,
                "databaseFilename": "",
                "path": [
                    "${workspaceRoot}",
                    "~/esp/esp-adf/esp-idf/components",
                    "~/esp/xtensa-esp32-elf"
                ]
            },
            "defines": [],
            "compilerPath": "/usr/bin/gcc",
            "cStandard": "c11",
            "cppStandard": "c++17",
            "intelliSenseMode": "clang-x64"
        }
    ],
    "version": 4
}

“browse”对象是需要我们自己添加的，这段代码的意思是，让VScode自己在这三个目录去找头文件，把有可能的头文件都反馈给用户，让用户自己去选择一个来添加。
更改完配置文件后，再去点击小黄灯，会发现多了很多文件提示，我们点击那个，那个就会自己添加到“includePath”对象下。

添加完头文件后，我们就可以开心的在VScode下开发ESP32了，来看看效果，简直美滋滋。

感谢

VScode设置中文
开源一小步
使用vscode开发ESP32之修订篇