- MacOS Mojave 10.14.6
- Visual Studio Code 1.42.1
一、安装 VSCode
下载安装指定系统版本
二、智能感知(IntelliSense)
IntelliSense是各种代码编辑功能的统称。包括:代码完成,参数信息,快速信息,成员列表。默认提供JavaScript,TypeScript,JSON,HTML,CSS,SCSS 和 Less语言
其他语言支持可安装扩展
- 用户设置 - 全局应用于您打开的任何VS Code实例的设置
按F1
输入“Preferences: Open User Settings”
该配置文件位于
~/Library/Application Support/Code/User/settings.json
- 工作区设置 - 存储在工作区中的设置,仅在打开工作区时适用
工作区设置文件位于.vscode
根文件夹中的文件夹下
工作区设置将覆盖用户设置。工作区设置特定于项目,并且可以在项目的开发人员之间共享。
- 特定于语言的编辑器设置 - 该命令默认打开用户设置,如需作用于工作区需手动修改
按F1
输入“Preferences: Configure Language Specific Settings”
以下示例自定义语言模式typescript
编辑器设置 :
{
"[typescript]": {
"editor.formatOnSave": true,
"editor.formatOnPaste": true
}
}
三、Visual Studio Code 中的 TypeScript
以下配置演示如何通过脚手架创建 TypeScript 版本 React 开发环境
- React TypeScript
1.使用 npx 简易安装 TS 版本 React 启动模板
npx create-react-app my-app --template typescript
2.运行服务访问 http://localhost:3000
cd my-app
yarn start
- 调试 -客户端,使用浏览器的调试器调试客户端代码
3.安装插件 Debugger for Chrome
4.配置调试,按F1
输入"Debug: Open launch.json"
,选择 Chrome
环境回车,成功生成 .vscode
目录和 launch.json
文件:
{
"version": "0.0.1",
"configurations": [
{
"name": "Gui",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000"
}
]
}
5.按 F5
启动调试,现在可以在 tsx 文件中加入断点,直接在 Visual Studio Code 调试程序
四、Visual Studio Code 中的 CEFPython
以下配置演示如何通过脚手架创建 TypeScript 版本 React 作为 GUI,同时集成 CEFPython 框架实现 CS 架构程序,运行于 PC 端
{
"version": "0.0.1",
"configurations": [
{
"name": "Cefpython",
"type": "python",
"request": "launch",
"console": "integratedTerminal",
"program": "${workspaceFolder}/main.py"
},
]
}
6.按 F5 启动调试,现在可以在 tsx 文件中加入断点,直接在 Visual Studio Code 调试程序
五、Visual Studio Code 中的 Python Scrapy
...
图书
千摆渡:Python 开发笔记《CEF Python 使用Web技术作为Python GUI解决方案》zhuanlan.zhihu.com