1.下载安装包

建议下载exe安装,安装后可以在右键菜单栏里显示,下载地址:

xvscode官网 https://code.visualstudio.com/

vscode 怎么运行android studio vscode配置android开发环境_Code

直接可以鼠标右键,将工程代码打开

vscode 怎么运行android studio vscode配置android开发环境_vscode_02


2 插件安装

2.1 C/C++ 必备安装的

<1>开发C/C++必备的安装

 

vscode 怎么运行android studio vscode配置android开发环境_vscode_03

<2>CSS Peek:看函数和变量定义,并且能查找相关的引用

vscode 怎么运行android studio vscode配置android开发环境_ide_04

<3>Prettier -Code formatter:代码格式化

vscode 怎么运行android studio vscode配置android开发环境_json_05

<4>Bracket Pair Colorizer :这款插件可以给()、[]、{}这些常用括号显示不同颜色

这个没必要安装,主要是不习惯

vscode 怎么运行android studio vscode配置android开发环境_ide_06

<5>vscode-icons-mac: 显示文件夹图标

vscode 怎么运行android studio vscode配置android开发环境_json_07

<6>文件自动转换成UTF8

虽然vscode已经自带自动识别文件编码格式,但是在使用中发现,有时不能自动识别,不知道是什么原因,所以安装了一个GBK to UTF8的插件

vscode 怎么运行android studio vscode配置android开发环境_ide_08


2.2 其它辅助的

<1>Code Spell Checker

vscode 怎么运行android studio vscode配置android开发环境_vscode_09

开发人员遇到的大量异常通常可以通过更正变量、函数和程序包名称中的拼写错误来解决

比如输入starrt,就会出现错误的提示,写成start后就正常了

vscode 怎么运行android studio vscode配置android开发环境_Code_10

             

vscode 怎么运行android studio vscode配置android开发环境_vscode_11


<2>Remote-SSH: 远程连接服务器

 

vscode 怎么运行android studio vscode配置android开发环境_Code_12


<3>Trailing Spaces 

空格标红,代码格式化后,这块红色会去掉

vscode 怎么运行android studio vscode配置android开发环境_vscode_13

<4>Markdown All in One:支持markdown文档

vscode 怎么运行android studio vscode配置android开发环境_vscode_14


3. 设置 

3.1 函数大纲

怎么可以看代码的函数列表:
Ctrl+Shift+P(命令窗口) -> View: Quick Open View -> outline

OUTLINE:

vscode 怎么运行android studio vscode配置android开发环境_ide_15

最新版本,OUTLINE可以挪到右边panel里

配置工程头文件路径,Ctrl+Shift+p, 选择C/C++:Edit Configurateions(JSON),弹出c_pp_properties.json文件进行配置: 模板如下

{
    "configurations": [
        {
            "name": "Win32",
            "includePath": [
                "${workspaceFolder}/**"
            ],
            "defines": [
                "_DEBUG",
                "UNICODE",
                "_UNICODE"
            ],
            "compilerPath": "D:\\Program Files (x86)\\Microsoft Visual Studio 14.0\\VC\\bin\\cl.exe",
            "cStandard": "c17",
            "cppStandard": "c++17",
            "intelliSenseMode": "windows-gcc-x64"
        }
    ],
    "version": 4
}

3.2 设置喜欢的主题颜色 

先下载主题"Slack Theme",

配置工程头文件路径,Ctrl+Shift+p, 选择Open Settings(JSON)弹出

然后在setting.json里,写入如下的内容

{

    "workbench.colorCustomizations": {
        "list.inactiveSelectionBackground": "#C5DEF0",
        "sideBar.background": "#C5D2DE",
        "sideBar.foreground": "#0a0a0a",
        "editor.background": "#D2DED1",
        "editor.foreground": "#0c0101",
        "sideBarSectionHeader.background": "#CAC9C9",
        "sideBarSectionHeader.foreground": "#000000",
        "activityBar.border": "#FFFFFF",
        "statusBar.background": "#525357",
        "scrollbarSlider.activeBackground": "#77D4CB",
        "scrollbarSlider.hoverBackground": "#8CE6DA",
        "badge.background": "#81CA91"
    },

    "editor.fontSize": 16,
    "editor.tokenColorCustomizations": {
        "numbers": "#ff0000",
        "comments": "#ada6ad",
        "functions": "#008000",
        //"variables": "#061acc",
        //"types": "#0D7C28",
        //"keywords": "#008030",
        //"strings": "#ffffbb",
    },

    "workbench.colorTheme": "Slack Theme Hoth",
    "files.autoGuessEncoding": true,
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "security.workspace.trust.untrustedFiles": "open"
}

3.3 文件编码全局设置 

设置文件编码全局,可以解决搜索不到中文的问题

如果工程的文件都是gbk的编码格式,而vscode的默认编码是UTF8,会出现搜索不到中文

设置: File  >> Preferences >> Setting >>Text Editor >>Files>>Encoding

vscode 怎么运行android studio vscode配置android开发环境_json_16


3.4 修改C/C++的代码格式化风格

vscode 修改C/C++的代码格式化风格

3.5 ssh连接远程linux服务器 

Host tom@192.168.1.221
  HostName 192.168.1.221
  User tom
  ForwardAgent yes

//上面的解决了连接时,用户名自动识别成了windows的用户名
//也解决了HOST NAME,这个NAME不识别,改成用IP可以

C:\Users\test\.ssh路径下,有个config文件,修改这个文件

vscode远程连接ubuntu报错:
Could not establish connection to “ubuntu20“ 过程试图写入的管道不存在

解决办法:删除下面的文件
C:\Users\Administrator\.ssh\known_hosts

3.6 vscode远程docker容器调试代码 

vscode 远程连接 docker 容器进行 C++ 代码调试实践
https://www.w3cjava.com/technical-articles/%E6%95%B0%E6%8D%AE%E5%BA%93/124937815.html

3.7 vsocde连接aarch64系统失败

问题现象:
vscode提示出现
no hostkey alg

解决办法:
vi /etc/ssh/sshd_config
添加一行内容:HostKeyAlgorithms +ssh-rsa,ssh-dss

#重启sshd服务
service sshd restart

 


 4.搭建C++编译调试环境

4.1 本机调试

目前这里搭建的环境是基于单个文件的

<1>.搭建mingw环境
参考网址: ffmpeg的编译里的msys2的安装,安装并更新国内源后,执行下面的命令:

pacman -S base-devel pacman -S mingw-w64-x86_64-gcc pacman -S mingw-w64-x86_64-gdb

添加MinGW-w64的系统 环境变量

电脑属性->高级系统设置->环境变量->Path,添加:
D:\msys64\mingw64\bin

<2>新建文件夹 .vscode,里面再建下面三个文件,

参考这篇文章: 

c_cpp_properties.json
launch.json
tasks.json 

//c_cpp_properties.json文件的内容
{
    "configurations": [
        {
            "name": "Win32",
            "includePath": [
                "${workspaceFolder}/**"
            ],
            "defines": [
                "_DEBUG",
                "UNICODE",
                "_UNICODE"
            ],
            //此处是编译器路径,以后可直接在此修改
            "compilerPath": "D:/msys64/mingw64/bin/g++.exe",
            "cStandard": "c11",
            "cppStandard": "c++17",
            "intelliSenseMode": "gcc-x64"
        }
    ],
    "version": 4
}
//launch.json文件的内容
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "(gdb) Launch",
            "preLaunchTask": "g++.exe build active file",//调试前执行的任务,就是之前配置的tasks.json中的label字段
            "type": "cppdbg",//配置类型,只能为cppdbg
            "request": "launch",//请求配置类型,可以为launch(启动)或attach(附加)
            "program": "${fileDirname}\\${fileBasenameNoExtension}.exe",//调试程序的路径名称
            "args": [],//调试传递参数
            "stopAtEntry": false,
            "cwd": "${workspaceFolder}",
            "environment": [],
            "externalConsole": true,//true显示外置的控制台窗口,false显示内置终端
            "MIMode": "gdb",
            "miDebuggerPath": "D:/msys64/mingw64/bin/gdb.exe",
            "setupCommands": [
                {
                    "description": "Enable pretty-printing for gdb",
                    "text": "-enable-pretty-printing",
                    "ignoreFailures": true
                }
            ]
        }
    ]
}
//tasks.json 
{
    // See https://go.microsoft.com/fwlink/?LinkId=733558 
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "type": "shell",
            "label": "g++.exe build active file", //这里注意一下,见下文
            "command": "D:\\msys64\\mingw64\\bin\\g++.exe",
            "args": [
                "-g",
                "${file}",
                "-o",
                "${fileDirname}\\${fileBasenameNoExtension}.exe"
            ],
            "options": {
                "cwd": "D:\\msys64\\mingw64\\bin"
            },
            "problemMatcher": [
                "$gcc"
            ],
            "group": {
				"kind": "build",
				"isDefault": true
			}

        }
    ]
}

 <3>安装Code runner :运行调试代码的插件

vscode 怎么运行android studio vscode配置android开发环境_ide_17

 <4>按F5 运行调试代码,在菜单的Run里

//main.cpp:在.vscode文件夹相同路径下
#include <iostream>
using namespace std;
 
int main()
{
    cout << "hello vscode" << endl;
    return 0;
}

引用这篇文章: Visual Studio Code (vscode) 配置C、C++环境/编写运行C、C++

"一劳永逸:因为VS需要为每一个文件夹做单独配置,所以建议把.vscode文件夹放到你常用的文件夹的顶层,这样就不用重复配置了。
不用每个新cpp文件就要一套配置。这些配置在你配置好的文件夹内的所有子文件夹和文件都能使用。"


4.2 交叉编译远程调试(低端ARM) 

VS Code + gdbserver 嵌入式arm远程调试


文件launch.json的例子:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "cpp_app",
            "type": "cppdbg",
            "request": "launch",
            "program": "${workspaceFolder}/bin/cpp_app",
            //"args": ["rtsp://admin:1@192.168.1.199:554/h264/ch1/sub/av_stream"],
            "args": [""],
            "stopAtEntry": true,
            // "cwd": "${fileDirname}",
            "cwd": "${workspaceFolder}/bin",
            "environment": [],
            //"externalConsole": false,
            "MIMode": "gdb",
            "setupCommands": [
                {
                    "description": "Enable pretty-printing for gdb",
                    "text": "-enable-pretty-printing",
                    "ignoreFailures": true
                }
            
            ],
            //不用绝对路径,因为已经设置成系统变量了
            "miDebuggerPath": "arm-linux-gnueabihf-gdb",
            "miDebuggerServerAddress": "192.168.1.168:2001"
        }
    ]
}

4.3 远程调试(高端64位 ARM)

把代码直接放到远程ARM机器上,构建cmakefile.txt 进行调试编译

不过得要在远程的机器上安装好相应的包,比如x86_linux平台

//launch.json文件内容
{
    "configurations": [
        {
            "name": "(gdb) Launch",
            "type": "cppdbg",
            "request": "launch",
            "program": "${workspaceFolder}/build/app_shout", //根据自己需要修改
            // "args": ["-d"],
            "args": [],
            "stopAtEntry": true,
            "cwd": "${fileDirname}",
            "environment": [],
            // "externalConsole": true,
            "MIMode": "gdb",
            "setupCommands": [
                {
                    "description": "Enable pretty-printing for gdb",
                    "text": "-enable-pretty-printing",
                    "ignoreFailures": true
                }
            ]
        }
    ]
}

远程主机上要安装: C/C++ Externsion Pack这个包 

vscode 怎么运行android studio vscode配置android开发环境_json_18

自己电脑在线安装一直卡住,所以进行了离线安装 

https://github.com/microsoft/vscode-cpptools/releases/tag/1.7.1

 

vscode 怎么运行android studio vscode配置android开发环境_ide_19

 按照下图进行安装:

vscode 怎么运行android studio vscode配置android开发环境_ide_20


5 搭建网页开发环境 


<1>下载安装LTS版本:https://nodejs.org/en/
<2>启动cmd:npm命令在cmd里运行,
<3>更换到国内的淘宝镜像源:npm config set registry https://registry.npm.taobao.org
<4>安装LiveServer:npm i live-server -g
<5>默认已经是配置Path环境变量: C:\Users\willis\AppData\Roaming\npm
<6>放好index.html网页到vscode打开的文件夹里
<7>在vscode的终端(terminal)里:live-server

6 搭建python开发环境 

开发先安装Anaconda:

Anaconda包括Conda、Python以及一大堆安装好的工具包,比如:numpy、pandas等

参考这篇文章: 

使用VScode编写python程序并打包成.exe文件

7 功能设置

7.1 屏蔽文件夹 

在工程workstation中屏蔽不需要的文件夹:
在工程顶层目录中新建 .vscode 文件夹,在该文件夹下面新建 settings.json 文件 。
在该文件中输入代码:

"search.exclude": {
        "test_module": true,          //被禁止搜寻的文件/文件夹
    },

    "files.exclude": {
        "test_module" : true,   //被禁止看见的文件/文件夹
    }