migrate lim-note-vscode to here

vscode/Command-Palette/README.md

@@ -0,0 +1,6 @@
+# 命令行
+
+command palette                               | 简单说明
+----------------------------------------------|---------------------------------
+`Developer: Inspect Editor Tokens and Scopes` | 查看查看代码中各个部分的作用域，对定制代码高亮很有用
+`File: Set Active Editor Readonly in Session` | 设置当前文件为只读，同理还有 Reset 和 Toggle 命令

vscode/Debug/README.md

@@ -0,0 +1,68 @@
+# [vscode 调试](https://code.visualstudio.com/docs/editor/debugging#_launch-configurations)
+
+调试文件所在位置：`.vscode/launch.json`
+
+## [支持的变量名](https://code.visualstudio.com/docs/editor/variables-reference)
+
+variables                    | 说明                             | 示例值
+-----------------------------|----------------------------------|-------------------------------------------------------------------
+`${workspaceFolder}`         | 当前工作目录的绝对路径           | `C:\Users\Public\TEMP\all-code-tmp`
+`${workspaceFolderBasename}` | 当前工作目录的文件夹名称         | `all-code-tmp`
+`${file}`                    | 当前文件的绝对路径               | `C:\Users\Public\TEMP\all-code-tmp\js\b\test.js`
+`${fileWorkspaceFolder}`     | 当前文件所在的工作目录的绝对路径 | `C:\Users\Public\TEMP\all-code-tmp`
+`${fileBasename}`            | 当前文件名                       | `test.js`
+`${fileBasenameNoExtension}` | 当前文件名，没有扩展名            | `test`
+`${fileExtname}`             | 当前文件扩展名                   | `.js`
+`${fileDirname}`             | 当前文件所在目录的绝对路径       | `C:\Users\Public\TEMP\all-code-tmp\js\b`
+`${fileDirnameBasename}`     | 当前文件所在目录的文件夹名       | `b`
+`${relativeFile}`            | 当前文件相对工作目录的相对路径   | `js\b\test.js`
+`${relativeFileDirname}`     | 当前文件所在目录的相对路径       | `js\b`
+`${userHome}`                | 当前用户的目录                   | `C:\Users\Linhi`
+`${execPath}`                | vscode 运行程序路径              | `C:\Users\Linhi\AppData\Local\Programs\Microsoft VS Code\Code.exe`
+`${pathSeparator}`           | 路径分隔符                       | `\`
+`${lineNumber}`              | 鼠标选中内容所在行数             | `3`
+`${selectedText}`            | 鼠标选中的内容                   | `log('hello, world!')`
+`${cwd}`                     |                                  | `C:\Users\Public\TEMP\all-code-tmp`
+`${defaultBuildTask}`        |                                  |
+
+## jest 调试
+
+```json
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",    // launch 直接运行文件并调试；还有一个值是 attach，表示调试一个正在运行的程序（比如网页）。
+            "name": "Jest Debug 调试",
+            "program": "${workspaceFolder}\\node_modules\\jest\\bin\\jest", // 不能是 ${workspaceFolder}\\node_modules\\.bin\\jest
+            "args": ["read-all-file-full-name.test"], // 提供给 jest 的参数
+        }
+    ]
+}
+```
+
+## nodemon 调试
+
+```json
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "nodemon",
+            // npm i -g nodemon
+            "runtimeExecutable": "nodemon",
+            "program": "${workspaceFolder}/src/",
+            "restart": true,
+            "console": "integratedTerminal",
+            "internalConsoleOptions": "neverOpen",
+            "env": {
+                "debug": "app:*",
+            }
+        }
+    ]
+}
+
+```

vscode/Debug/调试源码.md

@@ -0,0 +1,84 @@
+# 调试源码
+
+## 通过 vite 搭建的项目，测试 vue 源码
+
+1. 编译源码，生成 map 文件
+
+    ```sh
+    git clone --shallow-since="2023-09-06" https://github.com/vuejs/core.git
+
+    cd core
+
+    git checkout b775b71c788499ec7ee58bc2cf4cd04ed388e072
+    # 可选
+
+    pnpm install
+
+    node scripts/build.js --sourcemap
+
+    pnpm run build-dts
+    ```
+
+2. 可选操作
+
+    默认生成的 sourcemap 路径是相对路径，如果没有找到对应的源代码，则 vscode 会自动生成一个只读源文件。想要解决只读问题，有两种方法：
+
+    - 一种是拷贝源代码到 node_modules 中的特定位置，比如将 vue 源码中的 `packages\reactivity\src` 目录拷贝到项目中的 `node_modules\@vue\reactivity\src` 位置。另一种就是
+    - 另一种是修改 sourcemap 的路径为绝对路径，方法是添加 `output.sourcemapPathTransform` 配置，代码如下
+
+        ```js
+        /* rollup.config.js */
+        // ....
+        output.sourcemap = !!process.env.SOURCE_MAP
+        // 添加下面代码，这里大概是 116 行
+        output.sourcemapPathTransform = (relativeSourcePath, sourcemapPath) => {
+            const newSourcePath = path.join(path.dirname(sourcemapPath), relativeSourcePath);
+            return newSourcePath;
+        }
+        // ....
+        ```
+
+3. 在 vite 项目中开始调试
+
+    打开一个已有的 vite 项目，或者重新创建一个 vite 项目（`npm create vue@latest`）。
+
+    将 vue 源码生成的 dist 目录中的 map 文件拷贝到 vite 项目中对应 vue 源码位置上。比如直接将 vue 源码中的 `packages\reactivity\dist` 拷贝到项目中的 `node_modules\@vue\reactivity\dist`
+
+    （TODO: 这一块还不是很懂，但新版本的 vscode 中似乎不需要添加该配置项了。还是建议加上，因为似乎有点问题）
+    非常重要的一点：禁用 vue 的预加载❗ 不然路径就变了。
+
+    在 vite.config.js 中添加以下配置
+
+    ```js
+    export default defineConfig({
+        optimizeDeps: {
+            exclude: ['vue']
+        }
+    })
+    ```
+
+    然后启动该项目（`npm run vite`）。
+
+    打上断点
+
+    添加 `.vscode/launch.json` 文件
+
+    ```json
+    {
+        // Use IntelliSense to learn about possible attributes.
+        // Hover to view descriptions of existing attributes.
+        // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+        "version": "0.2.0",
+        "configurations": [
+            {
+                "type": "msedge",
+                "request": "launch",
+                "name": "Launch Edge against localhost",
+                "url": "http://localhost:5173/",
+                "webRoot": "${workspaceFolder}"
+            }
+        ]
+    }
+    ```
+
+    开始调试，完成！

vscode/Emmet/README.md

@@ -0,0 +1,10 @@
+# [Emmet](https://code.visualstudio.com/docs/editor/emmet)
+
+Emmet 用来提供简写，比如在 HTML 文件中，输入下面内容：
+
+- `div#id>p`
+- `div{$}*10`
+- `.box$*10`
+- `ul>li*18`
+
+可在 [Emmet 文档](https://docs.emmet.io/cheat-sheet/) 中查看所有可用的简写

vscode/Extension/README.md

@@ -0,0 +1,78 @@
+# vscode 扩展
+
+## 🍕 安装的扩展插件
+
+extension Identifier                  | extension name                         | 简单说明
+--------------------------------------|----------------------------------------|------------------------------------
+streetsidesoftware.code-spell-checker | Spell Checker                          | 拼写检查
+darkriszty.markdown-table-prettify    | Markdown Table Prettifier              | markdown 表格工具
+shd101wyy.markdown-preview-enhanced   | Markdown Preview Enhanced              | 加强版预览 markdown
+ritwickdey.liveserver                 | Live Server                            | 本地在线服务器
+pkief.material-icon-theme             | Material Icon Theme                    | 文件和文件夹图标
+formulahendry.code-runner             | Code Runner                            | 运行代码
+donjayamanne.githistory               | Git History                            | 查看 Git 历史记录
+||
+kisstkondoros.vscode-gutter-preview   | Image preview                          | 图图片预览
+vue.volar                             | Vue Language Features (Volar)          | 开发 Vue
+ms-vscode.cpptools                    | C/C++                                  | 运行 C/C++
+mikebovenlander.formate               | formate: CSS/LESS/SCSS formatter       | 格式化 CSS
+dbaeumer.vscode-eslint                | ESLint                                 | 前端代码格式检查
+tomoki1207.pdf                        | vscode-pdf                             | vscode 查看 pdf 文件
+formulahendry.auto-rename-tag         | Auto Rename Tag                        | 自动重命名元素开闭标签名
+standard.vscode-standard              | StandardJS - JavaScript Standard Style | 一种 JS 格式规范检查
+mongodb.mongodb-vscode                | MongoDB for VS Code                    | 连接 MongoDB 数据库
+ms-python.python                      | Python                                 | 运行 python
+grapecity.gc-excelviewer              | Excel Viewer                           | vscode 查看 Excel 文件
+lixquid.calculator                    | Calculator                             | 选择数学表达式直接计算结果
+emeraldwalk.runonsave                 | Run on Save                            | 保存时自动执行命令
+shahilkumar.docxreader                | Docx/ODT Viewer                        | 可以简单的查看 docx 内容，适合快速查看多个 docx 文件内容！
+
+## 🍕 没有安装或使用的插件
+
+extension Identifier               | extension name       | 简单说明
+-----------------------------------|----------------------|--------------------------------------
+helixquar.asciidecorator           | ASCIIDecorator       | 可以生成各种各样的 "终端大字体", 挺有意思的
+xsro.masm-tasm                     | MASM/TASM            | 可以直接在 vscode 运行汇编, 有些 bug, 但能满足简单的使用.
+zh-hans                            | Chinese (Simplified) | 语言包
+oderwat.indent-rainbow             | indent-rainbow       | 可以配置 vscode 的缩进颜色和对齐线颜色啥的, 太花里胡哨
+christian-kohler.path-intellisense | Path Intellisense    | 可以提示, 但是提示的位置偏下, 而且好像有些文件也还是不会显示
+sachinb94.css-tree                 | css tree             | 选中 HTML 时自动生成 css 嵌套树， 有点鸡肋
+formulahendry.auto-close-tag       | Auto Close Tag       | vscode 已经提供了标签自闭合
+
+extension Identifier        | extension name                           | 简单说明
+----------------------------|------------------------------------------|-------------------------------------
+ms-vscode-remote.remote-wsl | WSL                                      | 允许 vscode 打开 Window  中的内置 Linux 系统文件
+remisa.shellman             | shellman                                 | 提供 shell 脚本代码片段
+timonwong.shellcheck        | shellcheck                               | shell 脚本检查
+esbenp.prettier-vscode      | Prettier - Code formatter                |
+gimly81.matlab              | Matlab Unofficial                        |
+redhat.java                 | Language Support for Java(TM) by Red Hat |
+pthorsson.vscode-jsp        | Java Server Pages (JSP)                  | 不再维护（支持jsp语法高亮）
+lixquid.calculator          | Calculator                               | 选中文本直接计算出结果值
+ms-python.black-formatter   | Black Formatter                          |
+ms-python.isort             | isort                                    |
+
+## 🍕 某些插件的说明
+
+### Auto Rename Tag
+
+虽然 `"editor.linkedEditing": true` 配置和 Auto Rename Tag 类似,
+但是它不如插件好用, 比如先删除掉标签名, 再写时, 前者就无法继续重命名了
+
+### Python 插件
+
+安装一个 Python 插件，会下载很多其他相关插件。比如 pylance, Jupyter, Jupyter Cell Tags, Jupyter Keymap ,Jupyter Notebook Renderers, Jupyter Slide Show。
+
+### ASCIIDecorator
+
+【使用方法】: 选中英文, 然后通过 `ctrl+shift+p` 执行 `font selector` 就可以看到效果, 选择喜欢的字体后回车, 则文本就会被替换成选中的文字;
+
+感觉不错的字体:
+
+- ANSI Shadow
+- DOS Rebel
+- Larry 3D
+- Electronic
+- Doh
+- Big Money-系列
+- Calvin S

vscode/Extension/preview-markdown.less

@@ -0,0 +1,134 @@
+// 参考 https://shd101wyy.github.io/markdown-preview-enhanced/#/zh-cn/customize-css
+// less playground 网站：http://lesscss.org/less-preview/
+
+.markdown-preview.markdown-preview {
+  .font__special_chinese_punctuation("微软雅黑");
+
+  li,
+  pre[data-info="txt"],
+  p {
+    font-size    : 1.5rem;
+    line-height  : 2.3rem;
+    margin       : 14px 0;
+    word-break   : break-all;
+    overflow-wrap: break-word;
+  }
+
+  li input[type="checkbox"] {
+    width : 15px;
+    height: 15px;
+    margin: 0px 2px;
+
+    &::before {
+      content         : '';
+      background-color: transparent;
+    }
+
+  }
+
+  a {
+    text-decoration: none;
+    color          : skyblue;
+    padding        : 0 2px 4px 2px;
+    box-shadow     : 0 2px 0 0 skyblue;
+
+    &:hover {
+      color     : deepskyblue;
+      box-shadow: 0 2px 0 0 deepskyblue;
+    }
+  }
+
+  code {
+    word-break      : break-all;
+    border-radius   : 2px;
+    overflow-x      : auto;
+    background-color: #fff5f5;
+    color           : #ff502c;
+    font-size       : 1.3rem;
+    padding         : 0 2px;
+    border          : 0.1rem solid lightpink;
+    border-radius   : 0.4rem;
+  }
+
+  pre::-webkit-scrollbar {
+    height: 4px;
+  }
+
+  pre code {
+    word-break      : unset;
+    border          : unset;
+    border-radius   : unset;
+    overflow-x      : unset;
+    background-color: unset;
+    color           : unset;
+    padding         : unset;
+  }
+
+  pre {
+    // 不知为啥，网页端上的默认样式居然设置为 0.85em !important。所以这里只能通过 !important 来覆盖它。
+    font-size: 1.4rem !important;
+  }
+
+  blockquote {
+    padding               : 20px;
+    padding-top           : 10px;
+    border-top-left-radius: 40px;
+    outline               : 1px solid skyblue;
+
+    p:first-child {
+      font-size  : 1.2em;
+      font-weight: bold;
+      color      : skyblue;
+    }
+
+    li,
+    p {
+      font-size  : 1.3rem;
+      line-height: 2.2rem;
+    }
+  }
+
+  h2::before {
+    content: "🍕 ";
+  }
+
+  h3::before {
+    content: "🍕🍕 ";
+  }
+
+  table {
+    min-width: 80%;
+    margin   : 10px auto;
+
+    th,
+    td {
+      text-align : center;
+      line-height: 2rem;
+    }
+  }
+}
+
+
+// 字体设置
+.font__special_chinese_punctuation(@font-chinese, @font-english: "Times New Roman") {
+  @font-face {
+    // 由于 font-english 中常常包含了中文标点符号，从而导致 font-chinese, 的字体无法应用到 中文标点符号。所以特地创建这么一个函数。
+    font-family: "__@{font-chinese}";
+    src        : local(@font-chinese);
+    // ‘’ “” 【】 《》 （） …… —— 、 。 ！ ， ： ； ？
+    unicode-range: U+2018-2019, U+201C-201D, U+3010-3011, U+300A-300B, U+FF08-FF09,
+      U+2026, U+2014, U+3001, U+3002, U+FF01, U+FF0C, U+FF1A, U+FF1B, U+FF1F;
+  }
+
+  li,
+  p,
+  td,
+  th,
+  a,
+  pre[data-info="text"] {
+    font-family: "__@{font-chinese}",
+    @font-english,
+    @font-chinese,
+    serif;
+  }
+}