## 介绍

在 Mac 中使用 Docker 时，需要安装和使用 Docker Desktop，比较吃性能，所以在本地一般没有怎么用起来。

OrbStack 是原生Swift应用，快速、轻便、简单。需注意，免费版仅适合个人非商用目的。下载安装包即可使用，或通过 brew 安装，有 Apple Silicon 芯片的版本。

官网地址： https://orbstack.dev/

在 Docker 栏内，有 containers 容器，数据卷 volume，images 镜像这几个标签。

## 创建与使用 volume

比起挂载在任意的文件，使用 volume 有特殊优化处理。

可以通过 UI 界面创建，创建一个 nginx-file 的卷，即 `docker volume create nginx-file` 。

可直接在 UI 界面打开 volume 文件位置，往里面操作文件。

## 安装镜像、创建容器

软件内不包含这些可视化功能，需要通过命令行操作，如

- 查找镜像与用法
- 安装镜像，如 `docker pull nginx`
- 创建容器，使用 volume 名称作为源而不是路径，如 `docker run --name=nginx -p 80:80 -v nginx-file:/usr/share/nginx/html -d nginx`

运行镜像后，访问 `http://localhost/index.html` 发现已经可以看到 nginx 的示例页面了。

## 容器管理

UI 界面中的容器管理中功能就比较多了：

* 启动、关闭、杀容器等
* 删除容器
* 查看信息，能看到容器 ID、已映射端口、已挂载到本地的目录等
* 查看日志
* 进入终端

## 配置 daemon.json

可以通过运行 `orb config docker` 来编辑配置，或直接编辑 `~/.orbstack/config/docker.json` 文件。

然后使用 `orb restart docker` 重新启动 docker。

## 效果

进行了一系列的小试验后，整体软件的内存占用还不到 1bg，速度也快。

非常值得一试，在我的这个 16g 小内存的 Macbook Air 中，Docker 可能也可以用起来了。


OrbStack: Mac 下更快的 Docker 容器运行环境

使用 Mac 原生的终端编辑器，会有一些小问题，比如 tmux 以及 vim select (insert) 模式时无法复制文本出来。

替换为 iTerm2 后，使用起来自然很多，开箱即用。

## 安装

官网：http://iterm2.com/

安装：`brew install iterm2`

安装后直接打开即可。

常见问题： https://iterm2.com/faq.html

## 终端设置

设置支持复制：

preferences -> General -> Selection -> Applications in terminal may access clipboard

vim 开启鼠标后无反应，需设置鼠标响应：

preferences -> Profiles -> terminal -> 勾选 Enable mouse reporting

## vim 复制文本

鼠标响应在某种情况下，如使用 vim 时，会禁用选择功能，这样就无法选中内容复制了。在 FAQ 中有提到，可通过按住 option 键再去拖拽选中文本，再进行 commond + c 复制。

## ssh 设置

避免连接远程机器超时自动断开，在 ~/.ssh/config 文件中：

```
Host *
     ServerAliveInterval 60
```


iTerm2 好用的 Mac 终端软件

Sublime Text 是我使用的第一个编辑器，它的快捷键非常优秀，通过插件和设置，使这套快捷键可以在 VSCode 和 Jetbrains 系列 IDE 中一致。

以下会列出这些快捷键的 mac 与 win 的版本，主要以 mac 为主，如未说明差别，代表 win 下可使用 ctrl 代替 cmd 。

## 窗口调整

- 放大缩小窗口 `cmd + 加/减`
- 切换 tab 标签页 (有文件名、路径，方便切换): mac `control + tab`, win `ctrl + tab`
- 打开多个 tab 页时，可拖拽另一个到当前编辑区右侧或下方，创建出多窗口
- 切换 tab, 仅 mac , `cmd + option + 左/右`

## 文件操作

- 创建新文件: `cmd + N`
- 打开本地文件 `cmd + O`
- 关闭当前文件: `cmd + w`
- 从左下方“结构/outline”可以看到文件的结构，如函数、变量，或 markdown 的目录
- 从编辑区上方面包屑导航，可以快速查看和跳转当前文件结构，或查看和打开上层文件

## 查找命令、查找文件、行列跳转

- 查找命令(cmd palette): `cmd + shift + p`
- 查找文件: `cmd + p`
- 跳转, 行号:列号: mac: `control + g`, win: `ctrl + g`
- 回到上次编辑位置(如跳转函数后回去原位置): mac: `control + 减号`, win:  `alt + 减号`；操作后，再回到下次编辑的位置：`control + 减号`, win:  `alt + shift + 减号`

## 注释

- 单行注释: `Cmd + /`
- 多行注释: mac `cmd + option + /`, win `ctrl + shift + /`

## 查找、替换

- 查找: `cmd + F`
- 替换: mac `cmd + option + F`, win `ctrl + H`
- 项目中查找: `cmd + shift + F`

## 格式化与缩进

- 格式化代码: mac `option + shift + F`, win `alt + shift + F`
- 增加本行缩进 `cmd + ]`
- 减少本行缩进 `cmd + [`
- 行首时, 增加缩进 `tab`
- 减少本行缩进 `shift + tab`
- 优化 import `option + shift + o`

## 折叠

- 折叠: win `cmd + option + [`, win `ctrl + shift + [`
- 展开: win `cmd + option + ]`, win `ctrl + shift + ]`

## 行操作

- 选择当前光标行： `cmd + L`
- 复制当前选中行(单行或多行): `cmd + shift + D`
- 直接移动当前行(单行或多行): mac `option + 上/下`, win `alt + 上/下`
- 合并两行(或多行: `cmd + J`

## 光标在中间时，前后新开一行

- 前（下）面新开一行编辑: `cmd + Enter`
- 后（上）面新开一行编辑: `cmd + shift + Enter`

## 多行游标

- 依次往下找： mac `cmd + D`
  - 跳过: `cmd+K` 再按依次往下找的 `cmd + D`
- 垂直选取：mac `option + shift + 左键`, win `alt + shift + 左键`
- 三击左键，往下拖：选中多行

## 操作粒度

- 每次移动一个字符: 直接用左右箭头
- 移动一个单词: mac `option + 箭头`, win `alt + 箭头`
- 移到行首、行尾: mac `cmd + 箭头`, win `Home` 和 `End` 键，或 `Fn + 箭头` （没有 Home 键的键盘中）
- 以上操作配合 `shift`, 移动并选中

## 智能提示

- 未输入内容时，**唤起智能提示**: mac `control + 空格`, win `ctrl + 空格`
- 在智能提示中，查看提示方法的详细说明: 再次点击 `control + 空格`
- 跳转到类型定义位置: `cmd + 左键点击该方法`
- 通过 `/**` 创建 JSDoc 供编辑器识别类型

## emmet

- 声明标签 `div.wrap>ul>li.item`
- 可使用模糊匹配省略标签名：`.wrap>ul>.item`
- 多个样式类：`.left.item`
- 分组：`(.left>.main)+(.right>.main)`
- 控制标签个数：`.wrap>ul>li*5`
- 编写内容，并自动添加序号：`ul>li.nav${$$标题}*5` （$会自动生成数字，$$生成 2 位，从 01 开始；）


好用的 Sublime Text 通用快捷键

试用  JetBrains 全家桶，包括 WebStorm / PHPStorm / CLion / IDEA / DataGrip 等软件一个月后，确实好用，最终还是下单了。

好的 IDE 可以节省掉折腾环境的时间，让人专注于代码本身。

以下记录一些让我完成从 VSCode 到 JetBrains 全家桶过渡的常用设置与操作。

### 通用设置

- git 启用用暂存区域：设置 - 版本控制 - git - 使用暂存区域，开启后就像 vscode 一样，有 staged changes 和 changes 两栏
- 不自动加入 git：设置 - 版本控制 - 确认 - 当文件创建时: 不添加、当文件删除时: 不移除
- 代码提示时间：编辑器 - 常规 - 代码完成：自动弹出时间、显示文档弹出时间，按需调整，如果电脑速度慢可以尝试调整该参数
- 项目目录树右上角齿轮 - 树外观 - 压缩空的中间软件包 ，取消勾选；（IDEA) 或者保持压缩状态，新建包名时需要在前级目录创建时把不需要的路径删掉；
- 开启 eslint ，开启 prettier 设置，勾选保存时自动运行、执行重新格式化代码时运行；（WebStorm)
- 设置最大内存大小：帮助 - 更改内存设置
- 工具 - 终端 - Shell 路径，设置为 Git Bash (Windows)
- 设置-搜索“编码/encode”，更改为 UTF-8，包括全局编码、项目编码、属性文件的默认编码，都需要设置 (Windows)

### 快捷键设置

设置中把键盘映射改为 Sublime(MacOS)，再通过设置，与 vscode 安装 Sublime Text Keymap 尽量保持一致

- 主菜单 - 导航 - 在文件中导航 - 前往声明或用法: 添加鼠标快捷键 - `cmd + 点击`, windows 下是 `ctrl + 点击`
- 重新格式化代码: 添加键盘快捷键 - `option + shift + F`, windows 下是 `alt + shift + F`
- 编辑器操作 - 添加或移除文本光标: 添加鼠标快捷键 - `option + 点击`, windows 下是 `alt + 点击`
- 主菜单 - 编辑 - 查找 - 在文件中替换: 添加键盘快捷键 - `cmd + shift + H`
- 主菜单 - 视图 - 活动编辑器 - 自动换行: 添加键盘快捷键 - `option + Z`, windows 下是 `alt + Z`
- 代码 - 代码格式化设置操作 - 优化 import： 添加键盘快捷键 `option + shift + o`

### 常用特有操作

VSCode 中没有的一些操作

- 快速打开最近使用的文件（recent files） `cmd + e`
- 重命名、标识符重构 `shift + f6`
- 优化 import `control + option + o`
- 智能提示 `option + 回车`
- git 差异列表，右键：跳转到源代码
- 排除 git 但却能被搜到：进入 `.gitignore` 文件，会弹出提示，此时选择忽略对应目录即可

### Java 常用操作

- 编写 Service 的 interface 和 Impl 类中的内容：
  - 可先在 interface 中编写方法名、返回类型、参数及注释，按 Alt + Enter ,点实现方法，自动在 Impl 类中实现。
  - 可先在 Impl 类中编写方法，然后打上 `@Override` 注解，点击报错信息将方法拉取到 interface
- 在 service 方法中点击 Alt + Enter，点击生成缺少的测试
- 根据表达式推断，创建变量类型和名称：在表达式按 Alt + Enter ，选择引入局部变量
- 自动生成serialVersionUID: 搜索设置 Serializable class without serialVersionUID (在 Inspections 里的)，勾选后，实现 Serializable 接口的类，会有 warn 提示，移上去就有快速生成的指令

### Java 插件

Java 开发可配合各种插件，让 IDEA 更好用。

- MyBatisX: 用于 xml 文件跳转；模型、Mapper、Service文件等持久层基础代码的生成；
- GenerateAllSetter： 在对象上 Alt + Enter （唤起智能提示界面），点击 Generate all setter with default 即可生成所有设置默认值的设置参数。
- Auto Filling Java Call Arguments： 在函数调用括号内 Alt + Enter ，点击 Auto fill call arguments ，即可将函数的参数生成过来。

### 易错操作

- 免打扰模式： 误触 Shift + F11 会进入免打扰模式，菜单全部消失：可重新按下这个快捷键，或者在试图-外国-退出免打扰模式进行退出。
- 鼠标替换输入模式：mac 在优化 import  时容易点到 `cmd + option + o`，这会让鼠标插入输入变成替换输入。重新按下这个快捷键后恢复。

### 快速生成与清理

菜单 - 代码 - 生成 `cmd + N`，或者直接右键，生成

- getter setter, 可全选选中所有属性一次生成
- 构造函数, 可选择哪些函数进行生成构造函数
- toString 选中两个属性，会生成对应的字符串

菜单 - 代码， 其他操作：

- 重写方法
- 实现方法
- 清理代码

## 检查项设置

可根据项目需要设置检查项，如取消部分默认的检查项；

比如 WebStorm 中打开检查项后，搜索“依赖”，取消勾选“将 package.json 依赖项升级到最新版本”。

## 调整界面

IDEA 的界面调整在主菜单的“视图”选项卡。

## 部署

可设置部署 SFTP 或 FTP 信息，直接将文件部署上去。

添加映射，如某前端项目将 dist 部署到 admin 目录下：

- 本地路径：指项目路径+目录，如 `项目路径/dist`
- 部署路径，如 `/admin`

另外，可将主机配置取消勾选“被动模式”，连接数改为“1”，虽然传输速度总体变慢，但更稳定，成功率高。

## 实时模板

idea 内置了很多实时模板 (Live Template), 如 fori forin forof

创建自己的实时模板:

- 设置-编辑器-实时模板，点击右侧加号
- 创建一个模板组，在模板组中创建动态模板

如 al (编写完后点下方“定义”绑定语言):

```java
List<Integer> list = new ArrayList();
```

设置变量：

```java
List<$VAR1$> $VAR2$ = new ArrayList();
```


JetBrains 系列软件常用设置与操作

用 JS 去写需要自行获取输入的算法平台时，除了处理输入稍微繁琐，总体来说没有什么问题。对于获取输入流，我整理了一个模板框架，个人感觉还是比较好用的，可以做到像其他语言一样按行读取。

可借助编辑器的快捷输入，去使用这套模板框架，比如：

- IDEA: Live Template
- VSCode: User snippets (File->Preferences->User snippets)
- 可通过 codemirror 的 autocomplete ，封装一个自己的 Web IDE

### abuf 基础框架模板

包括：

- 读取所有输入流放到字符串
- 定义常用的方法简写 af 和 log
- 入口函数 run 方法，传参输入流字符串，方便本地调试时传入题目用例
- 将输入流字符串拆分，提供按行读取的方法 readline

```js
let bs = ''
process.stdin.on('data', d => bs += d)
process.stdin.on('end', () => run(bs))

const af = Array.from
const log = console.log

function run(bs) {
  let buf = bs.trim().split('\n'), bp = 0
  let readline = () => buf[bp++]
  
  let [n] = readline().split(' ').map(x => +x)
}
```

### areadline 读取一行并拆分

继续读取下一行，并按空格拆分：

```
let line = readline().split(' ').map(x => +x)
```

应用场景：

- 可嵌套在 for 中使用，比如接下来读n行，遍历n次，每次使用这个 areadline 读取。
- 可直接使用 line 数组；或者使用解构赋值设置变量。

### aarr 创建指定长度的数组

算法题往往需要创建指定长度的数组。

备注：**不要将以下代码封装为函数**，而是**直接使用**。封装为函数的话，创建多层数组，会遭到优化，导致每一个二级数组都指向同一个地址。

```js
af({length: n}, () => )
```


好用的原创 JS 算法题输入流读取模板

VSCode 用于前端及 Node.js 开发功能已经足够，在 react 或 vue 的 ts 项目内都能做到较好的提示和跳转了，再配合设置和插件，整体开发体验不错。

而且前端及 Node.js 生态中的很多包都是优先更新到 VSCode，只有使用 VSCode 才能拥抱最新的生态。

## 常用设置

### 用户设置与工作区设置

在设置面板，有两个 tab 选项：

- **用户设置**，体现在 `~` 目录，所有项目生效
- **工作区设置**，会在当前位置生成 .vscode 目录，设置记录在该配置目录中。

同样的，如果需要指定某插件本项目不使用，或仅本项目使用，在插件中选择 启用（工作区）即可。

### 配置自动格式化

- 设置中勾选 `Format On Save` 即可，适用于全部文件
- 或者设置全部格式化，如

```json
"editor.codeActionsOnSave": {
    "source.fixAll": true
}
```

- 或者设置特定的格式化，如只指定 eslint 格式化

```json
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}
```

### 配置新窗口打开目录

避免开启新目录、历史项目时直接把当前项目覆盖掉。

设置 Open Folders In New Window 为 `on`

### 设置退出确认

避免错按退出按钮，导致文件未保存、项目需重新启动等。

设置 Window: Confirm Before Close 为 `Project Manager always`

### 终端设置

- windows 设置默认终端为 git bash

### 左侧栏增加 npm 指令

搜索设置下 Enable Run From Folder ，勾选；

然后到 EXPLORER 中右上角打开，选中 NPM Scripts，即可看到 npm 指令已自动添加到面板里。

可将该面板拖出来，拖到跟 EXPLORER 同级，方便访问。

搜索 Script Explorer Action 设置，选择 run ，点击即可启动命令，更方便启动。

重启命令的方式：重新在 NPM Scripts 面板运行该命令即可，如果已运行它会提示冲去。

### 设置窗口标题

默认窗口会显示文件名等信息，文件名比较长，在 Windows 中切换窗口，几乎就看不出哪个项目，很难找。

这就可以在设置中搜索 window.title ，将它改为 `${rootName}` ，windows 可以设置为 `${dirty}${rootName}` ，这样直接显示工作区的名字，如果是单目录打开它会是项目的名字。

### 设置分词符

比如选择 css 时，总是希望能带上 `-` 一起选择，可以搜索分词符设置 `"editor.wordSeparators"` ，将 `-` 去掉即可。

可设置到工作区或项目，指定项目使用。

可在设置中点击齿轮，很方便地重置此设置。

## 常用操作

### 终端操作

- 从底部拖拽即可拉出终端，拉回底部即可隐藏（非关闭）
- 可开启多个终端窗口，可分割并排显示

### 合并窗口 (MAC)

将 Window: Native Tabs 勾选即可。

需要合并时，在 Window 菜单勾选 Merge All Window。

### 项目设置别名跳转

VSCode 对别名 `@` 的解析，是通过  `tsconfig.json` 或 `jsconfig.json` 来解析的。如果是 js 项目，项目内需建立一个 `jsconfig.json` 文件：

```json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}
```

未启用 ts 情况下，即使使用了 jsconfig 文件，体验还是不太友好，需要进行配置。

- 安装 `别名路径跳转` 插件，未启用 tsconfig 的情况下，支持 @ 别名跳转
- Image preview 不支持别名预览，可增加工作区配置 `"gutterpreview.paths": { "@": "./src" },`
- 路径补全不完善，可增加一个工作区配置 `"path-intellisense.mappings": { "@": "${workspaceRoot}/src" },` 使提示更完善，比如支持图片路径提示

### 全局正则搜索、替换

全局正则搜索，带括号时，在替换时使用 `$1` 可代表匹配的第一个括号内容，以此类推。

如 `[0001` 格式的题目链接标题，在前面批量加个内容：

- 搜索： `\[(\d\d\d\d)`
- 替换：`[leetcode $1`

### git 相关操作：

- 设置 git diff 双窗口显示：
  - 更新 VSCode 后，git 差异变成一个窗口内同时显示新增、删除的内容了，这样对比、搜索都不方便。
  - 点击右上角的 … 按钮，取消勾选【内联视图】和【空间受限时使用内联视图】。
- 之前的 git commit 提交信息：在提交信息框中按上下方向键即可切换。
- 从 git diff 中进入文件：在编辑器右上角也有一个文件 icon，点击可回到文件。

### 重启语言服务

- 如果遇到代码提示或文件索引异常等，可重启该语言服务
- 如: restart ts server / restart eslint server

### 编写 snippets

在 Perferences 中选择 Configure User Snippets，然后在弹窗选择需要设置 snippets 的语言。

根据模板样式进行设置即可。 `$1` 指光标出现的第一个位置，`$2` 指按 Tab 键切换后光标出现的第二个位置。

需要说明，光标处于  `$1` 这种位置时，是无法使用代码提示，这些占位符只适合**值输入**的场景。

### 设置终端环境变量

可指定VSCode 内的终端特定的环境变量，就不用到全局变量中设置了，如果工作流全都集中在 VSCode ，这样更方便。

又或者有时候 VSCode 读取不到某些变量，比如 `NODE_OPTIONS` ，可能是 VSCode 有些版本自身会使用这个变量，产生冲突之类的，这时就可以通过终端环境变量来设置了。

设置方式：设置 - 功能 - 终端 - Integrated › Env: Linux

### 在项目中启用/禁用插件

安装的插件比较多，会使得 VSCode 变慢，而且有时候某些插件会与当前的想要的操作冲突。这时希望能在项目中禁用插件。

可以到插件界面，Disable 按钮有一个下拉选项，选择 Disable (Workspace)，即可在当前项目禁用插件了。虽然这里说的是工作区，但直接打开目录时是对项目生效的。

也可以设置一个多目录工作区，可以定制各个方面的环境，包括单独设置插件是否启用。

### .vscode 项目内设置

可以创建 .vscode 目录进行项目内的设置：

- 创建 settings.json 文件进行项目内设置。
- 在命令中输入 configure user snippets 后，选择 New snippets file for 当前目录创建项目级 snippets，会创建 `.code-snippets` 文件。

## 常用插件

插件可按流行度、最近更新等排序，插件的命令在 command palette 中可以搜到。

### 通用必选插件

- Sublime Text Keymap and Settings Importer, 快捷键
- GitLens, 提高了 Git 的功能, 如显示文件详细提交记录、当前行的提交人等
- 翻译(英汉词典), 本地翻译插件，无需联网
- Project Manager, 配置项目为目录，支持快速打开、切换目录
- Code Runner, 运行单个插件，安装后设置:
  - `"code-runner.runInTerminal": true` 在终端运行
  - `"code-runner.ignoreSelection": true` 忽略选中，执行整个文件
  - `"code-runner.saveFileBeforeRun": true` 运行前保存文件
- Code Spell Checker, 拼写检查
- IntelliCode 代码智能提示插件

### 前端必选插件

- HTML CSS Support 提供 HTML、CSS 的代码高亮和提示
- JavaScript (ES6) code snippets
- Path Intellisense, 地址提示优化
- npm Intellisense
- ESLint
- Prettier
- Prettier ESLint
- EditorConfig for VS Code
- Import Cost, 查看引入的包大小
- Auto Rename Tag
- CSS Modules
- SVG Previewer
- Image preview, 鼠标悬停可以预览图片
- Stylelint
- Color Highlight
- node_modules, 从 package.json 中查看实际安装的依赖版本、跳转到 node_modules 内部该依赖的目录下

### 前端通用可选插件

- ES7+ React/Redux/React-Native snippets
- WXML - Language Service
- Tailwind CSS IntelliSense
  - 需要配置：
    ```json
    "tailwindCSS.includeLanguages": {
      "javascript": "javascript",
      "html": "HTML"
    },
    "editor.quickSuggestions": {
      "strings": true
    },
    ```

### vue 相关插件

- 语言支持： vue 3 项目使用 `Vue - Official` ，vue 2 项目使用 `Vetur` ，不要混用。默认关闭，工作区开启。
- `CSS Navigation` 安装后支持 vue 单文件组件内样式跳转
- `Vue 3 Snippets`, 支持 vue 代码提示，也支持 vue 2
- `uni-helper`, 支持 uniapp 开发的拓展包，按需启用

### 接口请求（可选）

- Thunder client 发起接口请求，完整的 GUI 界面，可以直接替代 Postman
- Rest Client, 通过创建 .rest 文件来请求接口 (不方便安装 Thunder client 时使用) ，通过 `@xxx` 在文件中设置变量，可通过 `rest-client.environmentVariables.$shared` 设置全局变量，也通过项目级设置变量在目录中设置变量。

### 其他工具（可选）

- Paste JSON as Code, 复制粘贴，将 json 解析为 ts 及其他语言的类型定义文件
- html to JSX, 将 html 转为 jsx
- SonarLint 查找常见代码错误，较严格，按需选用

## markdown 插件与配置

编辑器本身已经具备较强的markdown功能： https://code.visualstudio.com/Docs/languages/markdown

再配合一些设置和插件，VSCode 整体的 Markdown 编辑体验已经比较不错了。

### 一些 markdown 配置

```json
// 设置换行符在 Markdown 预览中换行
"markdown.preview.breaks": true,
// 启用突出显示当前文档中的链接匹配项
"markdown.occurrencesHighlight.enabled": true,
// 重命名/移动工作区中的文件时，请尝试更新 Markdown 文件中的链接
"markdown.updateLinksOnFileMove.enabled": "always",
// 定义通过放置或粘贴操作复制或创建的文件应位于哪个位置
"markdown.copyFiles.destination": {
  "/**/*": "images/${documentBaseName}/"
},
"[markdown]": {
  // 设置语法提示位置于底部，写项目内链接时，避免提示覆盖在文件路径提示中，不好找
  "editor.snippetSuggestions": "bottom",
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
```

### 一些 markdown 操作

- 预览时双击即可自动跳到编辑器的对应位置
- 关联本地文档：
  - 设置链接时，可使用相对或绝对路径，有路径和文件提示，如 `[链接文字](/notes/test.md)`；文件名有空格的，可以使用 `<>` 扩住，如 `[链接文字](</notes/1. test.md>)`
  - 关联的文档，路径改变后，关联了它们的文档可自动更新其文件路径
  - 关联的本地文档可在编辑器中打开对应的编辑，以及在预览中打开对应的预览
- 粘贴图片：
  - 支持直接把复制的图片粘贴进来，支持配置粘贴进来的位置
  - 图片路径更改后，会自动同步。文件更名后，只需要把原图片资源目录也改一下名即可

### markdown 辅助插件

- Markdown Table （必选） 支持表格编辑，如插入行、列，从 excel 粘贴等
- Marp for VS Code （按需） 通过 markdown 制作 PPT


VSCode 常用操作、设置与插件

之前上传文件到 FTP 服务器，一般通过客户端软件，这个操作比较繁琐，而且每个操作系统的客户端软件操作也不太一致，需要找到一个配置一次后可直接执行的方法。

## 选型

- 在上传方面， ncftp 可以做到一条指令就完成操作，写到 shell 脚本后即可非常方便地执行上传操作，并且和项目打包构建等结合。
- 在下载方面， ncftp 命令本身不支持递归下载整个目录结构，它只能用于下载单个文件，可使用 lftp 命令下载整个目录。

封装为 shell 脚本后，也可以进一步通过服务器实现远程打包、传输等操作。

## 安装 ncftp / lftp

Ubuntu 安装：

```
apt-get install ncftp lftp
```

Mac 安装：

```
brew install ncftp lftp
```

## 上传目录操作

比如，将本地的 `~/project/out/*` 下的所有文件上传到 FTP目录 `/home` 下。

```
ncftpput -u '用户名称' -p '密码' -P 21 -m -R 地址 /home ~/project/out/*
```

参数说明：

- `-m`：如果目标目录不存在，传输前先在目录位置尝试创建目录
- `-R`：递规传子目录

## 下载目录到本地

使用 lftp 进行下载；通过 quit 命令，标记处理完毕后退出可交互界面。

```
lftp -u username,password -e "mirror /remotepath /localpath; quit" ftp://hostname
```

通过 ncftp 和 lftp 实现命令行 FTP 服务器上传下载

micro 是一个操作逻辑类似于 Windows 常规编辑软件的终端编辑器软件。这个软件很好用，上手即用，无学习成本。

## 安装
 
turmux 安装 micro 编辑器

```
pkg install micro
```

ubuntu 安装：

```
apt-get install micro
```

## 配置支持换行

使用 micro 编辑 micro 配置文件:

```sh
micro ~/.config/micro/settings.json
```

添加配置：

```json
{
    "wordwrap": true,
    "softwrap": true
}
```

## 基本操作

使用 ctrl/control 操作，符合常用的 windows 快捷键使用习惯。

保存及退出文件：

- control + s 保存文件
- control + q 退出文件，如未保存会提示：保存、不保存或不退出

撤销、重做

- control + z 撤销
- control + y 重做

选择：

- control + a 从 micro 全选
- 使用鼠标拖拽选择内容

复制、粘贴：

- control + x 从 micro 内部剪切到 micro 内部剪切板
- control + c 从 micro 内部复制东西到 micro 内部剪切板
- control + v 粘贴 micro 内部剪切板的东西

查找：

- control + f 查找内容
- control + n 查找下一个 (next)
- control + p 查找上一个 (previous)

## mac 终端 ssh 使用笔记

mac 终端 ssh 连接服务器时，仍然使用 control 键进行 micro 内部交互，而不是 command。

需要跟 mac 的内容交互时，使用 command：

- command + v 粘贴 mac 剪贴板的内容到 micro 内
- 复制 micro 内的东西到 mac：在 iterm2 终端，可按住 option 键再去拖拽选中文本，再进行 commond + c 复制到 mac 的剪切板中

## 插件安装（了解）

通过命令模式安装：

- `Ctrl+E` 切为命令模式
- 安装：`plugin install filemanager`

手动安装：

- 到 `https://github.com/micro-editor/plugin-channel` 查看插件列表
- 安装插件 `git clone https://github.com/micro-editor/go-plugin ~/.config/micro/plug/go-plugin`

## 更多文档：

- 帮助文档 https://github.com/zyedidia/micro/blob/master/runtime/help/help.md
- 默认和自定义快捷键 https://github.com/zyedidia/micro/blob/master/runtime/help/keybindings.md

好用的终端编辑器 micro，操作逻辑类似常规编辑器

## 安装 Termux

https://github.com/termux/termux-app/releases

到官方仓库下载 termux 进行安装。

## 界面操作

- 放大缩小界面文字：通过双指放大缩小来操作
- 输入中文/切换输入法：在底部按钮栏往右滑，显示文本输入框后，系统即可调用设备的输入法，进行输入中文
- 复制、粘贴：长按屏幕
- 切换 session: 前一个 `CTRL+ALT+P`, 后一个 `CTRL + ALT + N`

## 配置

### 设置镜像源

在 Termux 中执行如下命令 `termux-change-repo`，选择 .cn 的源即可。

### 更新源

通过 `pkg update` 更新源后，再去安装软件，不然可能安装到的软件有问题。

通过 `pkg install <软件名称>` 指令为 termux 安装软件，也可使用 `apt` 指令来安装。

```
pkg install micro git golang
```

### 获取设备文件内容

termux 默认只能访问 termux app 内部的文件，执行 `termux-setup-storage` 命令获取设备存储空间的访问权限。

### 模拟 root 权限

安装 root 的环境模拟工具 proot `pkg install proot`

- 终端输入 `termux-chroot` 模拟 root 环境
- 输入 `exit` 退出 root 环境

## 安装 Ubuntu

termux 安装的是模拟系统，功能不完整，设备也会识别为安卓。比如 next.js 就无法构建，提示设备不支持，

可以安装完整的 Linux 系统，实现更多功能。

### 安装

- 安装 proot-distro `pkg install proot-distro`
- 安装 Ubuntu： `proot-distro install ubuntu`

### 进入 Ubuntu

- 进入 `proot-distro login ubuntu`
- 退出 `exit`

### 在 Ubuntu 安装软件

有些 git、 micro 之类的软件在 termux 自身的系统安装后，在 Ubuntu 中也能使用，可不进行重复安装。

如需单独在 Ubuntu 安装软件：

- 配置镜像源
- 更新依赖 `apt-get update`
- 更新后即可安装

```
apt-get install nodejs npm
```

### 访问 termux 或设备的文件

在 Ubuntu 中通过 whereis 查询 termux 内安装的软件的位置，进入后发现，termux 家目录也能被访问到。

这样就可以访问外部的文件，以及之前配置的设备内部存储目录。

```
cd /data/data/com.termux/files/home
```

## 关于桌面环境

对于以上的终端环境的使用都是比较正常的，而桌面环境方面，尝试了一下配合 termux-x11 搭建 xfce4 等桌面环境，但无论是 termux 原生还是 ubuntu / debian 内的都会有一些问题，不太能正常使用。

鉴于折腾桌面环境的成本较大，终端环境目前也已经够用，没有必要再配置桌面环境了。如有需要桌面环境的场景，还是使用电脑更为合适。


安卓平板通过 Termux 搭建 Linux 系统


在搜索选择图片轮播插件时，发现一个不错的网站。

https://openbase.com/

将开源软件包进行比较，让我们可以多方面对比，更容易选择正确的开源包。

比如这个链接：

https://openbase.com/categories/js/best-javascript-image-viewer-libraries

它把 viewerjs、photoswipe 等包进行了各方面的对比。

可以相互比较，跳到更合适自己的组件。

openbase 网站，对比各种同类组件

cloc 是个多平台可用的工具，能统计项目代码量，支持忽略空行和注释。

## 安装

在 npm 环境也可以直接安装。

```
npm i -g cloc
```

## 执行

```
cloc .
```

随后终端就会将各种格式的文件的代码行数输出。

## 排除目录执行

排除单个目录、文件：

```
cloc --exclude-dir=node_modules .
```

排除多个目录、文件：

```
cloc --exclude-dir=node_modules,package-lock.json .
```

好用的开发工具