文章目录

  • 前言
  • 1.Arduino IDE的安装与使用
  • 2.VScode的安装与使用
  • 3.解决VScode编译Arduino程序速度慢的问题
  • 4.VScode中的Git使用
  • 5.Git中文显示乱码问题


前言

欢迎大家到我的个人博客查看本篇https://sunmengxin.cn/vscode-replace-arduino。
  对于编写Arduino程序的小伙伴，Arduino IDE虽然简单易上手，但当代码量提高或者想查看源码定义时就显得力不从心，因此找到一款能够代替Arduino IDE的编辑器就很有必要。能够支持Arduino的编辑器有很多，像之前的Visual Studio，GitHub的Atom以及微软的VScode等。这里我们选择VScode，它轻量且很多插件，比较为大家所熟知。
  VScode编辑Arduino程序支持代码高亮，代码补全，转到定义，文件跳转等，对于提高敲代码速度以及查看源码或者库文件实乃必备工具。而且VScode可以跨平台使用，Windows，MAC，Linux都支持。

话不多说，先看效果：

vscode有什么像Android studio类似的git插件吗_开发板


VScode中的界面

vscode有什么像Android studio类似的git插件吗_开发板_02


Arduino中的界面

1.Arduino IDE的安装与使用

  由于这些编辑器还是要依赖Arduino IDE，首先安装Arduino IDE和VScode。先进入Arduino的官网，下载Windows Installer安装版本,然后默认安装就行，有问题可以参考其他的安装教程。安装完成后将Arduino IDE加入到环境变量（这一步可以先跳过，到后面有问题再来配置也不迟），我的电脑右键->属性->高级系统设置->环境变量->新建一个叫ARDUINO的系统变量->值改成你的安装路径:

vscode有什么像Android studio类似的git插件吗_开发板_03


添加第三方开发板，文件->首选项->附加开发板：

vscode有什么像Android studio类似的git插件吗_git_04


  点击图中红圈链接进入开发板链接网站，然后把相应的链接粘贴到Arduino IDE的白框，每行一个：

vscode有什么像Android studio类似的git插件吗_git_05


然后在Arduino IDE里工具->开发板->开发板管理：

vscode有什么像Android studio类似的git插件吗_windows_06


  搜索esp8266即可，如果下面进度条迟迟加载不出来（原因你懂的），可以换下网络多试几遍（可能需要任务管理器结束任务），也可以挂代理，会比较快。

vscode有什么像Android studio类似的git插件吗_json_07

2.VScode的安装与使用

  进入官网下载相应的安装版本,默认安装就行，别忘勾选添加路径。然后进入VScode添加一些插件，需要什么插件搜索就行，可以参考下我的：

vscode有什么像Android studio类似的git插件吗_windows_08


  然后做一些设置，主界面->文件->首选项->设置，点击右上角按钮进入settings.json:

vscode有什么像Android studio类似的git插件吗_arduino_09


做如下设置：

"arduino.path": "C:\\Program Files (x86)\\Arduino",
    "C_Cpp.intelliSenseEngine": "Tag Parser",
    "editor.insertSpaces": true,
    "files.autoGuessEncoding": true,
    "arduino.logLevel": "info",
    "explorer.confirmDelete": false,
    "editor.detectIndentation": false,

vscode有什么像Android studio类似的git插件吗_json_10


  其中Arduino IDE的安装位置根据实际情况改动，ctrl+s保存即可。然后文件->打开文件夹，选中你存放Arduino程序的文件夹，注意是文件夹，不是里面的.ino文件。然后点击页面底部相应按钮选择开发板，编译，上传（右上角）即可：

vscode有什么像Android studio类似的git插件吗_开发板_11

3.解决VScode编译Arduino程序速度慢的问题

vscode有什么像Android studio类似的git插件吗_开发板_12


  编译时可以看到VScode有Warning警告，此时我们只需在当前项目的.vscode -> arduino.json文件中将输出目录 output 配置一下就可以大大提高二次下载的编译速度，注意json的格式，什么时候末尾该有逗号。

{
    "board": "esp8266:esp8266:generic",
    "configuration": "xtal=80,vt=flash,......省略一些",
    "programmer": "AVR ISP",
    "output": "./build",
    "sketch": "Wifi_Scan.ino"
}

4.VScode中的Git使用

  关于Git的使用和总结可以参考我的Git教程学习笔记及VScode中Git使用。打开VScode：文件->首选项->设置，然后点击图中红圈里的按钮：

vscode有什么像Android studio类似的git插件吗_json_13


  在设置里添加以下两句，其中第一句添加git安装位置（确保安装git时勾选添加到系统变量），第二局将VScode中的终端换成默认Git Bash。

"git.path": "C:\\Program Files\\Git\\cmd\\git.exe",
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",

然后用快捷键Ctrl+~打开终端输入git init：

$ git init
Initialized empty Git repository in C:/Users/MengXin/Desktop/ESP/ESP8266/code/test_hardwarw/.git/

  然后点击新建文件，输入文件名.gitignore，确定让Git跟踪哪些文件，忽略哪些文件，有关详细用法可参考Git官方中文教程。

build/
	.vscode/*
	!.vscode/arduino.json

vscode有什么像Android studio类似的git插件吗_windows_14


  输入后ctrl+s保存，然后左侧源代码管理->右上角三个点更多操作->暂存所有更改->全部提交->输入提交信息，例如我的信息第一次提交代码，然后在终端输入git log即可查看信息；这几步相当于Git命令中的：

$ git add .
$ git commit -m "第一次提交代码"
$ git log
  commit 8a636c62040cdc7897f90766636943c6ddc8af19 (HEAD -> master)
  Author: MM-X <smx******@gmail.com>
  Date:   Sat Feb 15 14:37:58 2020 +0800

    第一次提交代码

vscode有什么像Android studio类似的git插件吗_开发板_15


vscode有什么像Android studio类似的git插件吗_arduino_16

5.Git中文显示乱码问题

  在桌面空白右击->Git Bash Here->在弹出框右击->Options->Text，做如下设置即可。

vscode有什么像Android studio类似的git插件吗_开发板_17






参考：

   ESP32使用blinker库的arduino IDE上手教程,升级vscode教程,git教程   Git教程学习笔记及VScode中Git使用

  廖雪峰的Git教程