vscode怎么新建html文件?
很多刚使用vscode做开发的小伙伴,不知道如何新建HTML文件,下面就把方法演示给大家。
1、首先在打开的vscode软件中,点击菜单【文件】。
2、接着在文件下拉选项中,点击【新建文件】。
3、然后点击右下角的【纯文本】。
4、接着在打开的窗口中,点击选择【HTML】。
5、输入感叹号,并按【tab键】即可快速生成HTML模板。
6、创建好后,效果如下图所示。
vscode开发小程序,如何与小程序开发工具同步代码
一、首页可以用小程序开发工具先创建好项目,或者是用vscode去创建也可
二、用vscode打开创建好的项目
三、在vscode中安装几个小程序插件即可
1、搜索安装vscode weapp api,这是小程序的语法结构api
2、安装vscode wxml这个插件,主要是针对wxml文件的
3、安装vscode-wechat这个插件
4、安装一下Easy WXLESS,是针对wxss文件的
以上安装好插件之后,在vscode里面编辑小程序项目,保存即可同步到小程序开发工具中啦!
这样在vscode中也可以使用小程序的api啦~
esp32 vscode lauch 设置
第一步:安装 VSCode C/C++ 扩展
1.在应用商店里搜索 C++
2.安装C/C++ IntelliSense, debugging, and code browsing
第二步:安装 VSCode ESP-IDF 扩展
1.在应用商店里搜索 Espressif
2.安装 Develop and debug applications for Espressif ESP32, ESP32-S2 chips with ESP-IDF (带乐鑫图标)
第三步:配置ESP-IDF 扩展
1.按 F1 或Ctrl+Shift+P 打开命令面板
2.输入 ESP-IDF: Configure ESP-IDF extension
加载初始设置时间较长,耐心等待
3.根据实际情况选择不同的配置方式
Express: IDF 版本 配置Python环境,扩展将安装IDF
Advanced: 手动配置已安装的开发环境
Using Existing Setup : 使用扩展检测出的环境
配置完成后显示:All settings have been configured. You can close this window.
第四步:创建项目模板,检测设置
1.按 F1 或Ctrl+Shift+P 打开命令面板 输入ESP-IDF:Create project 或按Ctrl+E+C
2.选择工程创建目录
3.选择模板类型
第五部:设置工作区的json文件
在settings.json文件中添加以下内容
"terminal.integrated.shell.windows": "cmd.exe",
"terminal.integrated.shellArgs.windows": ["/k", "c:\\esp\\esp-idf\\export.bat"],
"terminal.integrated.shell.linux": "/bin/bash",
"terminal.integrated.shellArgs.linux": ["--init-file", "~/esp/esp-idf/export.sh", "-i"],
"terminal.integrated.shell.osx": "/bin/bash",
"terminal.integrated.shellArgs.osx": ["--init-file", "~/esp/esp-idf/export.sh", "-i"],
"files.associations": {undefined
"*.md": "markdown",
"*.mdx": "tdx",
"stdio.h": "c"
},
可以在VSCode 终端中正常使用idf的各种命令。
第六步:编译工程
可以使用ESP扩展下的各个按钮完成项目的串口选择、项目配置、Full Clearn、编译、下载、监视
也可以使用命令行方式:
1.按Ctrl+` (~按键的位置)打开终端(第一次运行时扩展会有提示,选择允许 其实质就是运行~/esp/esp-idf/export.sh)
2.选择终止终端
3.重新打开终端 会看到export.sh运行的结果
Go to the project directory and run:
idf.py build
4.运行各种idf命令
第七部:下载程序并监测程序运行
1. 按Select Device Port 按钮 或运行 ESP-IDF:Device configuration命令
按提示选择/dev/ttyUSB1作为下载口
2.编译完成后,可使用下载按钮进行程序下载。此时会出现提示:
PermissionError: [Errno 13] Permission denied: '/dev/ttyUSB1'
原因:
$ ls -l /dev/ttyUSB*
crw-rw---- 1 root dialout 188, 0 2月 3 11:21 /dev/ttyUSB0
crw-rw---- 1 root dialout 188, 1 2月 3 11:21 /dev/ttyUSB1
发现ttyUSB* 设备属于root用户 dialout 用户组,当前用户不属于dialout用户组
解决方案:
(1).执行以下命令
$sudo chmod 666 /dev/ttyUSB*
修改ttyUSB设备权限为其它用户可读可写。
缺点:电脑重启后,又会出现这种问题,还要重新设置
(2).为了能让普通用户也能使用串口,可以增加udev规则来实现
$sudo vim /etc/udev/rules.d/70-ttyusb.rules
增加如下内容:
KERNEL=="ttyUSB[0-9]*",MODE="0666"
保存,重新插入USB转串口,普通用户就能搞定了
缺点:该方法会让所有的普通用户都具有访问这些串口设备的权限,存在一定的安全隐患
(3).将目标用户加入dialout用户组,可以使用以下任意一个命令
$sudo usermod -aG dialout 目标用户名
或:
sudo gpasswd --add 目标用户名 dialout
重启系统即可
第八部:跟踪调试程序
1.按 OpenOCD Server 按钮 输出提示:
❌ Error: libusb_open() failed with LIBUSB_ERROR_ACCESS
❌ Error: no device foun
按照 文档解释做如下操作:
(1). 将~/.espressif/tools/openocd-esp32/v0.10.0-esp32-20200709/openocd-esp32/share/openocd/contrib/
目录下的 60-openocd.rules 拷贝至 /etc/udev/rules.d/ 目录下
(2).确保当前用户属于 plugdev 用户组。 提示:运行 groups 命令可以查看当前用户所属的用户组
(3).重启系统
2.配置Debug 环境
参考:
注:该文档中的模板有坑。
问题:
使用 ESP-IDF Debug Adapter 配置时出现如下提示:
pygdbmi.gdbcontroller.NoGdbProcessError: gdb process has already finished with return code: 127
按照 esp_debug_adapter 说明文档 在~/.vscode/extensions/espressif.esp-idf-extension-0.6.1/esp_debug_adapter/ 目录下
$pip install -r requirements.txt
问题依然存在 暂无解决思路
使用 Microsoft C/C++ extension to debug 配置时出现如下提示:
error while loading shared libraries: libpython2.7.so.1.0: cannot open shared object file: No such file or directory
实质是系统中没有python2.7的库,解决:
$ sudo apt update
$ sudo apt upgrade
$ sudo apt install libpython2.7
问题解决
同时也解决了使用 ESP-IDF Debug Adapter 配置时出现的问题 故是否需要pip install …… 不能确定
在使用 Microsoft C/C++ extension to debug 配置时 会提示出现异常,不用理会可正常跟踪调试。
有时会提示
Error: couldn’t bind tcl to socket: Address already in use
则证明 刚刚启动的 进程未被终止。
解决办法:
a).查看当前活动进程
netstat为显示网络相关信息 a(all:默认显示所有,如果加了其他选项此项不生效) n(number:以数字形式显示) t(仅仅显示tcp连接),p(process:显示该项是由哪个程序建立起来的)
$ sudo netstat -antp
b). 强制杀死它(假设进程号为3560,-9为强制杀死)
$ sudo kill -9 3560
Debug正常运行时,状态栏由蓝色变为棕色。
附:scode的各个json文件
c_cpp_properties.json
======================================
{undefined
"configurations": [
{undefined
"name": "ESP-IDF",
"compilerPath": "${default}",
"cStandard": "c11",
"cppStandard": "c++17",
"includePath": [
"${config:idf.espIdfPath}/components/**",
"${config:idf.espIdfPathWin}/components/**",
"${workspaceFolder}/**"
],
"browse": {undefined
"path": [
"${config:idf.espIdfPath}/components",
"${config:idf.espIdfPathWin}/components",
"${workspaceFolder}"
],
"limitSymbolsToIncludedHeaders": false
}
}
],
"version": 4
}
settings.json
======================================
{undefined
"terminal.integrated.shell.windows": "cmd.exe",
"terminal.integrated.shellArgs.windows": ["/k", "c:\\esp\\esp-idf\\export.bat"],
"terminal.integrated.shell.linux": "/bin/bash",
"terminal.integrated.shellArgs.linux": ["--init-file", "~/esp/esp-idf/export.sh", "-i"],
"terminal.integrated.shell.osx": "/bin/bash",
"terminal.integrated.shellArgs.osx": ["--init-file", "~/esp/esp-idf/export.sh", "-i"],
"files.associations": {undefined
"*.md": "markdown",
"*.mdx": "tdx",
"stdio.h": "c"
},
"C_Cpp.clang_format_style": "Visual Studio",
"editor.formatOnSave": false,
"[cpp]": {undefined
"editor.quickSuggestions": true
},
"[c]": {undefined
"editor.quickSuggestions": true
},
"C_Cpp.intelliSenseEngine": "Tag Parser",
//配置下载接口
"idf.port": "/dev/ttyUSB1",
//配置下载方式
"idf.flashType": "UART",
//openOcd配置,根据开发板确定
"idf.openOcdConfigs": [
//新版建议用“board/XXX” 配置
"interface/ftdi/esp32_devkitj_v1.cfg",
"target/esp32.cfg"
]
}
launch.json
======================================
{undefined
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit:
"version": "0.2.0",
"configurations": [
{undefined
"type": "espidf",
"name": "ESP_Debug",
"request": "launch",
"debugPort": 43474,
"logLevel": 2,
//模板中有坑的地方,模板内容为 "mode": "manual",
//这样不能自动启动 Debug Adapter
"mode": "auto",
"initGdbCommands": [
"target remote :3333",
"symbol-file ${workspaceFolder}/build/${command:espIdf.getProjectName}.elf",
"set remote hardware-watchpoint-limit 2",
"mon reset halt",
"flushregs",
"thb app_main",
"c"
],
"env": {undefined
"PATH": "${env:PATH}:${config:idf.customExtraPaths}"
}
},
{undefined
"name": "GDB",
"type": "cppdbg",
"request": "launch",
"MIMode": "gdb",
"miDebuggerPath": "${command:espIdf.getXtensaGdb}",
"program": "${workspaceFolder}/build/${command:espIdf.getProjectName}.elf",
"windows": {undefined
"program": "${workspaceFolder}\\build\\${command:espIdf.getProjectName}.elf"
},
"cwd": "${workspaceFolder}",
"environment": [{ "name": "PATH", "value": "${config:idf.customExtraPaths}" }],
"setupCommands": [
{ "text": "-enable-pretty-printing",
"ignoreFailures": true },
{ "text": "file '${workspaceFolder}/build/${command:espIdf.getProjectName}.elf'"},
{ "text": "target remote :3333" },
{ "text": "set remote hardware-watchpoint-limit 2"},
{ "text": "mon reset halt" },
{ "text": "thb app_main" },
{ "text": "flushregs" }
//{ "text": "c"}
],
"externalConsole": false,
"logging": {undefined
"engineLogging": true
}
}
]
}
tasks.json 这个文用系统生成的即可 略
————————————————
版权声明:本文为CSDN博主「FuShaofeng」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:
vscode下搭建Typescript编译环境
Typescript 是微软开发的一个JavaScript的超级。著名前端框架的Angular和HTML5游戏引擎Egret等都选择了Typescript作为编写语言。“工欲善其事,必先利其器”,在学习Typescript语言之前必须要有一个良好的开发环境。这里笔者选择了轻量的Visual Studio Code,此工具具有轻量、跨平台、插件丰富等特点,是一款非常优秀的开发工具。
1、首先需要安装Nodejs,安装过程网上很容易搜到,在此不再介绍。安装完成后,在命令窗口输入
2、安装typescript模块
安装完成后,可以查看typescript模块的版本号
3、创建项目目录,在命令窗口中进入该项目目录,创建tsconfig.json。例如项目地址是D:\test\ts。
在项目目录下会生成一个tsconfig.json文件
里面有很多配置项,大家可以根据各自的需要来定制。本文用的示例配置如下,
新建tscript、js文件夹,分别用作存放typescript、javascript文件。
4、测试编译
在Visual studio code中打开ts目录,在tscript目录中新建test.ts文件。
然后点击菜单中的Tasks-Run Task。
之后会出现tsc:build 、tsc:watch两个选项
其中tsc:build选项是用于一次编译。tsc:watch选项可以监测ts文件的改动,可以进行实时编译,非常方便。经过编译后的文件会存放在之前配置好的js文件目录下。
如此就可以进行Typescript之旅了。~~
vscode怎么创建c项目?
vscode怎样编写c程序?
一、获取C/C++扩展
1、打开vscode
2、ctrl+shift+x打开商店
3、搜索C/C++安装、重启vscode
e125d1ee0c8bed76453042fba8438f7.png
二、安装GCC
1、下载MinGW
2、打开安装程序,安装到D盘(需要创建MinGW文件夹),安装完成之后生成MinGW安装管理器
3、管理器自动打开(如果没有请手动),点击All Packages,选中gcc.bin,g++.bin,gdb.bin,点击Installation,选择Apply Changes,点击Apply提交进行安装
0488d5fba2514f27925f8fe6c71df09.png
win+R,输入control进入控制面板,依次点击系统与安装-系统-高级系统设置-环境变量,找到Path-编辑-新建,将安装好的MinGW的bin文件夹路径粘贴进去。
8582b4a0e711b76938b21c60cfa0d75.png
三、配置智能提示
1、编写一个测试文件demo.c,点击引入的标准库下的“提示灯”,生成c_cpp_properties.json文件
2、编辑c_cpp_properties.json
5c59ca6c91c764055b52716e1bf6b0f.png
c_cpp_properties.json修改内容如下:
e9f6e93dd74073591bdbafd0c3345ac.png
四、开启调试功能
F5或Ctrl+F5启用调试,选择C++(GDB/LLDB)生成launch.json文件,修改如下:
Ctrl+Shift+P输入Tasks:Configure Task配置任务,选择使用模块创建task.json文件,选择Others模板,生成task.json文件,修改如下:
如果出现错误:进程终止,退出代码:1,可能是gcc还没被编辑器加载(测试方法:打开控制台,输入gcc,看提示信息),重启编辑器就可以。
4. VS Code创建flutter项目
如果和我一样,用惯了VS Code来开发项目的话,那就跟我一起来配置一下如何在VS Code里运行flutter项目。
1.在VS Code里安装扩展:
2.在VScode上打开打开终端,快捷键:Ctrl+~(Tab上一个键),在终端上输入:flutter create flutter_app02,即可创建完成!
也可以把之前的项目放到工作区
3.在终端中运行命令:flutter run
运行的时候你会发现手机提示你安装个app,点击安装完成,项目就在手机上显示了,下图是运行成功的提示。
下图是手机效果:
如果报错的话,运行下清缓存的命令:flutter clean,把文件夹.gradle删掉,然后flutter run重新跑下项目。