开发

Developing

# 生成脚手架
npx --package yo --package generator-code -- yo code
# - What type of extension do you want to create? # 插件类型选择
# > New Extension (TypeScript) # 基于TS的插件
#   New Extension (JavaScript) # 基于JS的插件
#   New Color Theme # 颜色主题
#   New Language Support # 语言支持(语法高亮/代码片段/代码检查)
#   New Code Snippets # 代码片段(插入常用代码或模板)
#   New Keymap # 快捷键(定义快捷键)
#   New Extension Pack # 插件包(包含多个插件, 可一次性安装这个包来获得一组功能)
#   New Language Pack (Localization) # 语言包(本地化支持)
#   New Web Extension (TypeScript) # Web 插件(在 VSCode 的 web 版本中运行)
#   New Notebook Renderer (TypeScript) # Notebook渲染器(在 VSCode 的笔记本视图中渲染, 包含可执行代码块和展示结果区域, 场景: 可视化/教程/演示文档, 展示图表/表格等)
# - What's the name of your extension? # 如 Xxx for VS Code
# - What's the identifier of your extension?  # 插件标识符ID (aaa-bbb)
# - What's the description of your extension? # 插件描述
# - Initialize a git repository? # 是否初始化git仓库 (默认yes)
# - Bundle the source code with webpack? # 是否使用webpack打包源码 (默认no, 用tsc编译)
# - Which package manager to use? # 使用哪个包管理器 (pnpm/yarn)
# - Do you want to open the new folder with Visual Studio Code? # 选择code打开插件目录, 提示安装`Extension Test Runner`(安装)

插件入口为 src/extension.ts(建议src改成client). 按F5或 VSCode 左下角的Run Extension, 启动调试窗口, 在这个实例中可以调试插件.
调试窗口, 按 Ctrl+Shift+P 打开命令面板, 输入 "Hello World" 并运行, 右下角会弹出提示.
调试窗口, 按 Ctrl+Shift+I 打开开发者工具;
修改源码后, 在源码窗口按Ctrl+Shift+F, 或 在调试窗口 按 Ctrl+R 重载插件(Reload Window), 使修改生效.
调试窗口, 按Ctrl+Shift+P搜Webview可选Webview开发者工具/刷新Webview.

查看全文 »

在线 Playground 测试

• React Playground
• Vue Playground

state 简单状态

vue

const count = ref(0);
const increment = () => (count.value += 1);

react

const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);

state 复杂状态

vue

state = reactive({
  value: 0,
});
state.value = 1;

react

const [state, setState] = useReducer((prev, { ...next }) => ({ ...prev, ...next }), {
  value: 0,
});
setState({ value: 1 });

查看全文 »

Why Monorepo

Monorepo, 单一代码库, 包含多个项目的单个仓库(相对 multirepo, 每个项目完全独立), 方便代码重用/组件库开发.

- "apps/*" apps/web, apps/doc # 多个app
- "packages/*"
- "components/*"

Monorepo 优点

• 容易维护, 提高开发效率, 更快速地代码重构
• 代码重用, 共享模块和工具链, 减少项目差异, 提高代码重用率(测试、构建、语法检查、部署)
• 容易协作, 同一代码库, 沟通和协作更容易
• 容易测试, 被影响的统一测试, 提高测试的效率
• 场景: react/vue/google/ms/微服务...

查看全文 »

安装Dart

brew tap dart-lang/dart
brew install dart
# ~/.zshrc 或 ~/.bashrc 新增1行:
export PATH="$HOME/.pub-cache/bin:$PATH" # pub

安装fvm (同时安装多个flutter版本)

pub global activate fvm
fvm install stable # 或指定比如: 1.10.7, [Versions](http://url.cn/52OcNkr)
# ~/.zshrc 或 ~/.bashrc 新增1行:
export PATH="$HOME/fvm/versions/stable/bin:$PATH" # fullter
# fvm list # 已安装的版本号

flutter version manager

fvm或者flutter channel切换版本都不太好用(一个是需要以fvm开始命令, 一个是不能按项目切换版本),
推荐使用 direnv 设定:

brew install direnv
# 项目目录内执行 (指定了version为stable):
direnv allow;
echo 'VERSION="stable"; export PATH="$HOME/fvm/versions/$VERSION/bin:$PATH"' > .envrc;

信息打印

flutter --version
flutter doctor -v # 检查环境配置
# 安装依赖, 比如 XCode, Android Studio
brew install cocoapods

编辑器设定:

• VSCode

  • Extensions安装:Flutter, Dart
  • 如果 VSCode 提示: Could not find a flutter SDK: 重启下VSCode

  • quicktype插件, 根据JSON生成Data Class. 用法:

    • VSCode > Settings 设定 "quicktype.justTypes": false
    • 创建并打开xxx.dart, 复制json代码, VSCode: view > Command Palette > Paste JSON as Code, 根据剪贴板的json生成Code.
    • 生成的code, 最好正则替换下: \b(json\[.*\]).map\( > ($1 ?? []).map(, fromJson\((json\[.*\])\) > fromJson($1 ?? {})

• Android Studio

  • Android Studio(启动并完成设置向导, Configure/Plugins安装: Flutter, Dart)
  • shell执行: flutter doctor --android-licenses

  • Perferences:

    • Flutter Sdk path: <user>/fvm/versions/stable
    • Dart Sdk path: <user>/fvm/versions/stable/bin/cache/dart-sdk

模拟器

• Android模拟器, Android Studio配置:

  • Configure/Tools - AVD Manager, Create Virtual Device, 选择一个设备, Next.
  • 其他版本Android: Preferences - Appearance & Behavior - System Settings - Android SDK, 勾选版本(比如: Android 8.0)安装.

• IOS模拟器, Xcode配置:

  • Open Developer Tool - Simulator, Hardware - Device, 选择iOS和iPhone型号.
  • 其他版本iOS: Perferences - Components, Simulator 选择一个iOS版本下载.

flutter emulators # 列出模拟器
# flutter emulators --launch apple_ios_simulator # 启动模拟器

环境搭建完毕, 推荐用VSCore开发.

查看全文 »

把年初对dart/flutter/RN的分享内容慢慢整理下, 希望对刚入门app开发的同学有用.

Dart是什么？

• Google造的轮子(弥补js的不足)
• 落: JavaScript(NodeJS/React/RN/Vue等)崛起
• 起: Google内部孵化了Sky项目(用Dart编写, 后改名Flutter)
• Google的未来操作系统Fuchsia中，Dart被指定为官方的开发语言
• 2018年8月正式发布 Dart 2.0
• Dart可运行在有自己的VM上(DartVM), 也可以编译成Native Code运行在硬件上(Flutter将代码编译成Native Code).

Dart特性

• 单线程异步事件模型(single-threaded), similar to NodeJS
• 强类型语言，支持弱类型写法(2.0开始)
• DartVM的性能比肩Java7的JVM(作者Lars Bak负责了 HotSpot JVM/V8 engine)
• 面向对象的，一切数据类型派生自 Object
• 独特的隔离区(Isolate), 可以实现多线程 (与线程类似但不共享内存)
• Future、Stream模型(Dart:async库的核心API, 异步编程)
• 跨平台: 前端、后端、移动

Dart的方向 (Flutter: iOS,Android,Fuchsia,web,desktop)

• Native (原生, 移动app/桌面程序)
• server-side(Server端, 异步高并发/Isolate多线程)
• client-side(前端, 利用dart2js编译成js)

Dart 语法

main() { // 应用的入口, 程序开始执行的地方
 print("Hello, world!");  // 打印信息
}

查看全文 »