Create by fall on 02 Mar 2023 Recently revised in 11 Feb 2025

所有的包名称就是 npm 中的包名称，可以直接在 npm 官网进行搜索

系统工具​

git 工具​

命令行相关​

操作系统​

工程化​

打包​

格式化 lint​

测试​

语法转换​

通用工具​

这些工具是不依赖于 DOM，前后端通用的 package

时间处理​

node​

更倾向于服务端（node）使用的内容

文件处理​

数据库​

爬虫​

浏览器​

更倾向于在前端使用（或者是依赖于 DOM 等浏览器提供的对象），这些包默认是不依赖框架，或者在多个框架中都可以使用的

React​

UI / 组件​

文件相关​

Vue​

编辑器​

markdown​

文件查看​

CSS​

可视化​

跨端​

React Native​

tauri​

electron​

环境配置​

使用 Chocolatey 进行快速安装，以及一些 PowerShell、VS code 、npm 的配置

Chocolatey​

快速安装软件，同类命令行应用有：Scoop 、winget

当然不是普通的环境搭建方式，而是敲（或者是复制粘贴）三五行代码就可以搞定的那种安装。

社区中有两种快速安装环境的工具 Scoop & Chocolatey，这节课，我们学习使用 Chocolatey。

WinGet 作为微软官方出品还需观望，也不知道微软这次靠不靠谱。

choco 安装​

在 powershell（右键开始菜单，选中 Windows PowerShell 管理员）执行下面程序进行安装

Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

注：必需要管理员权限才能进行安装。否则报一大堆错

软件使用​

例如，安装 node.js、nvm

choco install nodejs 
choco install nvm

一行代码搞定前端全家桶！

# windows 系统
# 不建议直接安装 node，而是通过 nvm 安装 node
choco install -y googlechrome firefox git vscode nvm.portable sourcetree

注：安装的 firefox 是国际版的，不是国内版，两个版本之间无法共享账户数据

不仅仅是前端全家桶

安装 python 全家桶！

choco install -y git tortoisegit vscode python
refreshenv
python -m pip install --upgrade pip
# 中国教育网用户切换镜像
# pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple
pip install pipenv

安装 docker

choco install docker-desktop

搜索软件​

choco search nodejs

VS code​

快捷键​

• ctrl + D：阔选光标所在位置的内容，再次按下阔选相同内容
• Alt + Shift + F：格式化代码
• alt + ↑/↓：移动选中的整行内容
• shift + alt +↑/↓：复制当前选中的行
• ctrl + enter：创建新的行，并且跳转到下一行
• ctrl + ~：呼出 vs code 命令行
• ctrl + /：为所选区域添加注释
• alt + shift +a：为所选区域添加注释，注意，这个快捷可能微信的截图 alt + a 冲突
• 选中变量，然后点击 f2，可以重命名所有名称相同的变量，该操作跨文件

插件​

• Chinese（simplified）功能和名字一样，提供中文的操作界面
• Git Graph，提供图表方式来查看 git 版本历史
• volar 为 vue 提供代码高亮，代码格式化
• Material Icon Theme 提供各式各样的图标，用来美化和区分不同类型的文件
• node-snippets 快速生成 node 代码块
• ESlint 控制代码规范，对代码进行格式化处理，在配置中可以开启格式化功能

慎用插件

默认配置​

可以同步到 github 上面

// 注意要在设置中开启保存时格式化代码
{
  "workbench.iconTheme": "material-icon-theme",
  "editor.fontSize": 14,
  "editor.wordWrap": "on",
  "editor.linkedEditing":true,
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  // 滚轮缩放编辑器大小
  "editor.mouseWheelZoom": false,
  "diffEditor.ignoreTrimWhitespace": false,
  "editor.unicodeHighlight.nonBasicASCII": false,
  "diffEditor.renderSideBySide": false,
  "javascript.updateImportsOnFileMove.enabled": "never",
  // 可以生成预览窗口，而不是打开一个文件就是一个独立的窗口
  "workbench.editor.enablePreview": true, 
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features",
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[typescript]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  },
  "editor.quickSuggestions": {
    "strings": true
  },
  "search.followSymlinks": false,
  "search.maxResults": 200,
  "files.autoSave": "onFocusChange",
  "emmet.includeLanguages": {
    "editor.formatOnType": "true",
    "editor.formatOnSave": "true"
  },
  "git.confirmSync": false,
  "editor.fontLigatures": false,
  "editor.autoClosingOvertype": "always",
  "editor.stickyScroll.enabled": true,
  "editor.stickyScroll.maxLineCount": 3,
  "css.lint.float": "warning",
  "css.lint.duplicateProperties": "error",
  "css.lint.important": "warning",
  "css.lint.universalSelector": "warning",
  "less.lint.universalSelector": "warning",
  "scss.lint.duplicateProperties": "warning",
  "scss.lint.float": "warning",
  "eslint.format.enable": true,
  "[scss]": {
    "editor.defaultFormatter": "vscode.css-language-features"
  },
  "window.commandCenter": false,
  "extensions.autoUpdate": "onlyEnabledExtensions",
  "explorer.compactFolders": false,
}

其它配置​

windows 系统​

可以在 设置：系统 -> 存储 -> 保存新内容的地方 进行配置

全部切换到需要的磁盘

PowerShell​

如果 powershell 不能执行一些命令，需要进行修改执行策略：

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned

wsl​

windows subsystem for linux

linux 的子系统

# 安装 wsl
wsl --install
# 安装 ubuntu
wsl --install -d Ubuntu-22.04
# 安装后，可以通过下面命令查看当前电脑上的 wsl 子系统
wsl -l -v
# 以下命令查看线上拥有的 linux 版本
wsl -l -o

npm​

npm -v 用于检测 npm 是否安装成功（安装 node 时会同时安装 npm）

注：因为某些大家知道的原因，可能需要更换为国内的镜像，或者安装 yarn、pnpm，代替 npm。

通过该命令 npm get registry 查看当前使用的镜像。

通过 npm set registry [target-webset] 设置镜像

一些镜像网址

• https://registry.npmjs.org/（默认镜像网址）
• https://registry.npmmirror.com/（阿里镜像，原地址为 https://registry.npm.taobao.org）

项目创建​

初始项目搭建

pnpm create vite my-app-name --template <template-name>

支持的模板：

• 原生：vanilla、vanilla-ts
• Vue：vue、vue-ts
• React：react、react-ts、react-swc、react-swc-ts、preact、preact-ts
• Lit：lit、lit-ts
• Svelte：svelte、svelte-ts

声明空间​

声明空间，就是声明类型和声明变量所在的不同空间。类型声明空间是 TypeScript 声明的类型空间，这些空间的变量不能进行赋值。变量声明空间可以进行赋值：

类型声明空间

class Foo{}
type Bus = {}
interface Bar{}
// 这些都可以作为类型注解使用
let foo:Foo
let bus:Bus
let bar:Bar
// 但是 Bar、Bus 不能赋值，因为它们只存在类型声明空间
const bar = Bar // error: cannot find name 'Bar'

变量声明空间

class Foo {}
const someVar = Foo
// class Foo {}  Foo 既会被放置到变量声明空间，也会放到类型声明空间
// 所以 class 声明的内容既可以作为类型注解，也可以进行赋值

全局模块​

全局模块就是任何文件都可以访问的模块，默认情况下，在一个新的 ts 文件中写代码时，它处于全局命名空间中。

// foo.ts
const foo = 123
// 此时，如果在相同的项目里，创建一个新的文件 bar.ts 系统会允许你使用 foo 内的内容
// bar.ts
const back = foo

想避免暴露在全局作用空间

// foo.ts
export const foo = 123
// 如果想继续使用 foo 就需要进行导入，并且使用其他变量也不会污染全局作用域
// bar.ts
import {foo} from './foo' // 此时还会将该文件定义为一个模块，文件内定义的变量也不会污染全局空间
const back = foo

所以文件内，只要使用了 export 关键字，就会表示该文件是个模块。所以也常使用 export {} 放在首行，表示是一个模块。

环境声明​

通过 declare 关键字来告诉 TypeScript 一个其他地方已经存在的代码（内容）。

// main.ts
foo = 1123 // Error

通常会使用 .d.ts 结尾的文件进行声明，一般会使用 global.d.ts 或者 vendor.d.ts。

// global.d.ts
declare let foo:any
// main.ts
foo = 1123 // declare 声明了该变量，将不会报错

其他的声明文件也类似于该文件，但是更加详细，所以如果自带 .d.ts 结尾的声明文件，一般不需要自行书写。

在声明文件中，每个根级别的声明必须以 declare 关键字作为前缀， TypeScript 将不会把它编译成任何代码。

开发者需要确保这些声明文件，和声明的内容在编译时存在。

声明文件可以声明各种类型

TS的声明文件​

编译器通过声明文件能够显示来自其他包的错误和提示。并且声明文件提供有关库的所有类型信息。

获取一个库的声明文件有两种方式

• Bundled 包含了自己的声明文件，我们只需安装这个库，就可以立即使用它，看库中是否包含 index.d.ts 文件，有些库会在 package.json 文件的 typings 或 types 属性中指定类型文件。
• Definitely Typed 是一个庞大的声明仓库，为没有声明文件的 JavaScript提供类型定义。这些类型定义通过众包的方式完成，微软和开源者一同管理。（比如 React 没有自己的声明文件，可以从 Definitely Typed 获取它的声明文件）

# yarn 
yarn add --dev @types/react
# npm 
npm i --save-dev @types/react

第三方代码的声明​

有时，可能在某些内容上添加显式注解，并且你会在类型声明空间中使用它。

可以通过 type 快速实现它

declare type Staff = {
	name:string
}

我个人倾向认为这是自定义声明，在声明文件中进行声明之后，在任何其他的文件中都可以使用，并且无需进行引入。在使用中要符合 declear 中定义的约束。

第三方 NPM 模块​

可以用声明一个全局模块的方式，来解决查找模块路径的问题。

global.d.ts 是一种扩充 lib.d.ts 很好的方式，如果你需要的话。

// 定义 global.d.ts
declare module 'jquery'{
  // some variable declarations
  export var bar: number;
}
// 导入使用 main.js
// 在必要的时候进行导入
import * as $ from 'jquery'
// import vue from 'vue' // 如果没有进行 declare 声明，直接引入会报错

有人会声明 npm i @types/jquery

非 JS 资源​

在 ts 文件中，可能引入其他类型的文件，比如 png。为了避免报错，向文件中进行声明。

// index.d.ts
declare module '*.svg'
declare module '*.png'
declare module '*.vue'{ // 用于定义以 .vue 结尾的文件，并且让 typescript 跳过识别
  import type {DefineComponent} from 'vue'
  const component: DefineComponent <{}, {}, any>
  export default component
}
// 在声明之后就可以使用
import * as foo from './some/file.css'

参考文章​

如有错误（不当）可以在评论区指出。

转载请注明出处。

我见过的用户中，他们没有一个不是特别详细的，迫切的想告诉我他们想要的。问题是，你的客户并不能一直告诉你实事的全貌。他们一般来讲不会说谎，但是他们的说话方式是作为用户的表达方式，而不是开发者的表达方式。她们拥有他们的团队，和他们的沟通方式。她们会遗漏重要的细节，她们会当你已经在他们公司干活 20 年了，就跟他们一样熟悉。真正复杂的是，一开始他们就不知道怎么做。一些客户可能构建了宏图，但是他们很少能充分的地交流她们认为的这些“宏图”的细节。另一些客户可能不会特别的清楚，但是他们知道她们不想要什么。在她们不完整的说出他们想要的东西的情况下，我们怎样才能去开发一个项目？答案显而易见，多去配合他们。

下载： 从淘宝镜像上下载 git，选择最新版就可以了

npm.taobao.org/mirrors/git…

Git工作流程图（空间上的 git 操作）

共有四个区域：

• Workspace：工作区
• Index / Stage：暂存区
• Repository：仓库区（或本地仓库）
• Remote：远程仓库

git 工具​

git介绍​

配置文件​

.gitignore 是 git 的配置文件，可以用在用户主目录之下（全局配置），也可以用在项目目录下（项目配置），作用就是告诉Git 哪些文件不需要添加到版本管理中。

/mtk/ 过滤整个文件夹
*.zip 过滤所有.zip文件
/mtk/do.c 过滤某个具体文件
复制代码

通过上面这些规则进行过滤之后，被过滤的文件不会通过push传递到服务器，本地库中还是存在的。

!src/   不过滤该文件夹
!*.zip   不过滤所有.zip文件
!/mtk/do.c 不过滤该文件
复制代码

可以通过以上设置不过滤以上的文件

配置文件的语法

以斜杠/开头表示目录；
以星号*通配多个字符；
以问号?通配单个字符
以方括号[]包含单个字符的匹配列表；
以叹号!表示不忽略(跟踪)匹配到的文件或目录；
复制代码

配置文件示例

a、规则：fd1/*
忽略目录 fd1 下的全部内容；注意，不管是根目录下的 /fd1/ 目录，还是某个子目录 /child/fd1/ 目录都会被忽略；
b、规则：/fd1/*
说明：忽略根目录下的 /fd1/ 目录的全部内容；
c、规则：
/*
!.gitignore
!/fw/bin/
!/fw/sf/
说明：忽略全部内容，但是不忽略 .gitignore 文件、根目录下的 /fw/bin/ 和 /fw/sf/ 目录
复制代码

用 Git Bash 创建文件夹

• 根目录下右键选择“Git Bash Here”进入bash命令窗口；
• 输入vim .gitignore或touch .gitignore命令，打开文件（没有文件会自动创建）；
• 按i键切换到编辑状态，输入规则，例如node_modules/，然后按Esc键退出编辑，输入:wq保存退出。

生成密钥​

命令行中执行命令：

ssh-keygen -t rsa -C "xxxx@gmail.com" 必须填写自己使用的邮箱

git 的操作​

简单的提交代码流程​

连接克隆远程仓库 git clone balabalabala.com

在项目的文件夹中打开cmd 命令行工具（一般为含有 ReadMe 的文件夹）

git add . 将代码添加到版本里面（添加到暂存区）

git commit -m “放置你想添加的内容”

最后使用 git push 将本地库里面的代码提交到网络共享库里面

常用功能查找​

• git diff --shortstat "@{0 day ago}" 看看自己一天写了多少代码
• 查看远程仓库git remote -v
• 显示有变更的文件git status
• 退回到上一个版本：git reset --hard head
• 查看日志：git log 或者 git reflog
• 查看工作区和暂存区版本区别git diff
• 回退上一个版本git reset --hard HEAD^ 每多一个^多回退一个版本
• 回退到指定版本git reset --hard version version 为版本号

新建代码仓库​

• git init 在本地进行初始化（建立工作区）
• git init [project-name] 新建一个目录，作为代码仓库
• git clone [url]

.git 文件夹存储当前项目的所有版本信息，这个文件夹通常会隐藏

暂存区控制​

$ git add [file1] [file2] ...  # 添加指定文件到暂存区
$ git add [dir] # 添加指定目录到暂存区，包括子目录
$ git add . # 添加当前目录的所有文件到暂存区

$ git add -p
# 确认所有文件的变化，并且可以做最终修改
# 对于同一个文件的多处变化，可以分多次提交

$ git rm [file1] [file2] ... # 删除工作区文件，并且将这次删除放入暂存区
$ git rm --cached [file] # 停止追踪指定文件，但该文件会保留在工作区
$ git mv [file-original] [file-renamed] # 改名文件，并且将这个改名放入暂存区
复制代码

本地仓库​

$ git commit -m "message" # 提交暂存区内容提交到仓库区
$ git commit [file1] [file2] ... -m [message] # 提交暂存区的指定文件到仓库区
$ git commit -a # 提交工作区自上次 commit 之后的变化，直接到仓库区
$ git commit -v # 提交时显示所有 diff 信息

$ git commit --amend -m [message]
# 使用一次新的commit，替代上一次提交
# 如果代码没有任何新变化，则用来改写上一次 commit 的提交信息 message

$ git commit --amend [file1] [file2] ... # 重做上一次commit，并包括指定文件的新变化
复制代码

分支操作​

$ git branch # 列出所有本地分支
$ git branch -r # 列出所有远程分支
$ git branch -a # 列出所有本地分支和远程分支

$ git checkout master  # 切换到master分支下
$ git checkout -b [branch] # 新建一个分支，并切换到该分支
$ git branch [branch-name] # 新建一个分支，但依然停留在当前分支

$ git branch [branch] [commit] # 新建一个分支，指向指定commit
$ git branch --track [branch] [remote-branch] # 新建一个分支，与指定的远程分支建立追踪关系
$ git checkout [branch-name] # 切换到指定分支，并更新工作区
$ git checkout -  # 切换到上一个分支

$ git branch --set-upstream [branch] [remote-branch] # 建立追踪关系，在现有分支与指定的远程分支之间
$ git merge [branch] # 合并指定分支到当前分支
$ git cherry-pick [commit] # 选择一个commit，合并进当前分支
$ git branch -d [branch-name] # 删除分支

# 删除远程分支
$ git push origin --delete [branch-name]
$ git branch -dr [remote/branch]
复制代码

远程功能​

$ git fetch [remote] # 下载远程仓库的所有变动
$ git pull [remote] [branch] # 取回远程仓库的变化，并与本地分支合并
$ git remote -v # 显示所有远程仓库
$ git remote show [remote] # 显示某个远程仓库的信息
$ git remote add [shortname] [url] # 增加一个新的远程仓库，并命名

$ git push origin master # 推到 master 上
$ git push [remote] [branch] # 上传本地指定分支到远程仓库
$ git push [remote] --force # 强行推送当前分支到远程仓库，即使有冲突
$ git push -u origin login # 将当前子分支推到一个新创建的 login 分之中

$ git push [remote] --all # 推送所有分支到远程仓库
$ git push origin --delete [branch-name]  # 删除远程分支
复制代码

撤销操作​

$ git checkout [file] # 恢复暂存区的指定文件到工作区
$ git checkout [commit] [file] # 恢复某个commit的指定文件到暂存区和工作区
$ git checkout . # 恢复暂存区的所有文件到工作区
$ git reset [file] # 重置暂存区的指定文件，与上一次commit保持一致，但工作区不变

$ git reset --hard # 重置暂存区与工作区，与上一次commit保持一致
$ git reset [commit] # 重置当前分支的指针为指定commit，同时重置暂存区，但工作区不变
$ git reset --hard [commit] # 重置当前分支的HEAD为指定commit，同时重置暂存区和工作区，与指定commit一致
$ git reset --keep [commit] # 重置当前HEAD为指定commit，但保持暂存区和工作区不变

$ git revert [commit]
# 新建一个commit，用来撤销指定commit
# 后者的所有变化都将被前者抵消，并且应用到当前分支

# 暂时将未提交的变化移除，稍后再移入
$ git stash
$ git stash pop
复制代码

标签的设定和查看​

$ git tag # 列出所有tag
$ git tag [tag] # 新建一个tag在当前commit
$ git tag [tag] [commit] # 新建一个tag在指定commit
$ git tag -d [tag] # 删除本地tag

$ git push origin :refs/tags/[tagName] # 删除远程tag
$ git show [tag] # 查看tag信息
$ git push [remote] [tag] # 提交指定tag
$ git push [remote] --tags # 提交所有tag
$ git checkout -b [branch] [tag] # 新建一个分支，指向某个tag
复制代码

查看日志信息​

$ git status # 显示有变更的文件
$ git log # 显示当前分支的版本历史
$ git log --stat # 显示commit历史，以及每次commit发生变更的文件
$ git log -S [keyword] # 搜索提交历史，根据关键词

$ git log [tag] HEAD --pretty=format:%s # 显示某个commit之后的所有变动，每个commit占据一行
$ git log [tag] HEAD --grep feature # 显示某个commit之后的所有变动，其"提交说明"必须符合搜索条件
$ git log --follow [file] # 显示某个文件的版本历史，包括文件改名
$ git whatchanged [file]

$ git log -p [file] # 显示指定文件相关的每一次diff
$ git log -5 --pretty --oneline # 显示过去5次提交
$ git shortlog -sn # 显示所有提交过的用户，按提交次数排序
$ git blame [file] # 显示指定文件是什么人在什么时间修改过

$ git diff # 显示暂存区和工作区的差异
$ git diff --cached [file] # 显示暂存区和上一个commit的差异
$ git diff HEAD # 显示工作区与当前分支最新commit之间的差异
$ git diff [first-branch]...[second-branch] # 显示两次提交之间的差异

$ git diff --shortstat "@{0 day ago}" # 显示今天你写了多少行代码
$ git show [commit] # 显示某次提交的元数据和内容变化
$ git show --name-only [commit] # 显示某次提交发生变化的文件
$ git show [commit]:[filename] # 显示某次提交时，某个文件的内容

$ git reflog # 显示当前分支的最近几次提交