code visual 笔记共享_Mac 开发笔记《Visual Studio Code》

• 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