前端工程师命令行终端指南

本文主要是站在一个前端工程师的角度学习一些常用的终端命令，以提升工作效率，这篇文章主要是参考The Front-End Developer’s Guide to the Terminal，在此基础上结合实际开发经历添加了一些个人见解。

工具准备

作者主要使用 windows 开发，所以本文主要是在 windows 上的终端使用的，其他平台不能保证成功。作者使用的终端工具是 git bash,常用 IDE 是 Vscode，主要是将 Vscode 的终端工具默认设置为 git bash，主要在 Vscode 的终端进行开发使用,本文的所有终端命令也都是建立在 git bash 上进行的。

Hello World

打开 Vscode 终端可以发现首行会出现一个$符号，这表明终端等待你输入一个命令,命令输入完毕后按回车表明命令执行，命令执行完毕后终端会另起一行继续出现$,如果没有出现$表明上一条命令没有执行完毕。

在终端里输入echo "hello world" 按回车。

echo 指令类似于前端 js 中常用的console.log()

Navigation

终端主要的目的是可以让我们在文件系统中进行四处浏览和打开/运行某些东西，只是在 windows 上我们之前都是用 GUI 界面进行操作的，现在是在终端中使用 shell 命令进行操作而已。这里介绍一些常见的命令。

pwd

pwd（Print Working Directoy）: 打印当前工作目录，表示的是你当前所在的文件位置

当前我所处的工作目录就是 g 盘

ls

ls（list）： 表示的是当前工作目录下的文件列表，其中高亮的表示是文件夹，颜色较浅的就是单文件

cd

cd（Change Directoy）：表明切换当前工作目录，cd 可以接两种形式的命令，一种是相对路径，一种是绝对路径。

1. 相对路径
   • . 一个 dot 表示是当前工作目录
   • ..两个 dot 表示是当前工作目录的父级目录
2. 绝对路径： cd 直接跟路径名即可，使用绝对路径是有一个很常见的问题就是如果路径很长，得手动输入路径，这要求很高而且很容易出错，这时有一个小技巧就是 Tab 键，可以书写路径时结合 Tab 键进行联想，终端会自动补全，比如说下图中的去 test 目录，输入一个 te 后按 Tab 就能够自动补全路径。（注意，如果输入的已知路径存在重名，Tab 会推导失败）。

其中在 git bash 里 ~表示的是系统用户根目录

mkdir/touch

mkdir 创建文件夹
touch 创建文件

mkdir stuff // 创建stuff文件夹
cd stuff
touch a.txt // 创建a.txt文件

Flags

Flags 可以增强某些指令的能力，比如 rm 命令，rm 是删除单个文件的指令,如下删除了 test3 文件

rf

但是 rm 默认情况下是不能删除文件夹的，但是可以通过 r flag 改变这种规则, 表示的是 递归（recursive）,它会递归删除 test 文件夹内的所有东西，包括文件夹本身，这个 flag 常和 flag f（-f,–force）结合一起使用,rm -rf something强制递归删除文件夹内的所有东西包括它本身

谨慎使用rm -rf something,这个命令不会有确认删除的提示，而且删除的内容不会出现在回收站内，一旦数据删除不可找回

la

另一个很常见的命令ls 经常会结合两个 flags

• l表示”long”,将打印用更详细的数据打印目录内容，包括创键时间修改时间等信息
• a表示”all”,打印所有的文件，包括隐藏的文件（windows 的资源管理器会默认隐藏一些文件）
  

终止命令

有时候一些进程是长期执行的，有时候需要中断，一个很常见得场景是本地开启的一个开发服务器进行 Vue 或者 React 开发时，不在开启应用时需要终止这个进程。可以使用ctrl + c,有时候如果ctrl + c不奏效可以使用ctrl + d

如果进入了 Vim 模式的话，退出编辑模式使用ESC，按住:q可以退出模式，编辑后想保存退出使用:wq

常见开发时使用的命令

前文主要讲述的是如何用终端做事情的一般计算的例子。下面讲述的是前端工程师经常需要使用的命令。

管理依赖

第一次接手项目时，通过 git 下载源代码后第一件事就是下载依赖。

cd path/to/project
npm install

运行 npm 脚本

开发过程中，有时候想快速运行一些第三方库的命令，并统一到 npm script 时就会用到，常见的如测试命令，部署命令，提交命令等等，这些都在 package.json 的 scripts 字段里进行配置。

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "commit": "cz
  }
}

这些命令可以通过npm run [name]执行，比如启动开发服务器 npm run start

打开 IDE

vscode 在 windows 默认安装下就会自动添加code命令，用于将当前工作目录使用 vscode 打开

cd /path/to/project
# . 表示当前工作目录
code .

重新安装依赖

有时候因为依赖的问题导致项目出现异常，可能需要卸载依赖后重新安装这时候可以执行

cd path/to/project
rm -rf node_modules
npm install

git

有时候也会结合 git 进行使用，下面是常用的 git 命令

#  Download a Git repository onto
#  your local machine
git clone [URL]
#  Check which files have been modified
git status -s
#  View changes
git diff
# Stage all files
git add .
#  Commit staged files
git commit -m "Short descriptive message"
# Create a new local branch
git switch -c [new branch name]
# Switch branches
git switch [branch name]
# Push your code to Github (or wherever
#  the project lives)
git push origin [branch name]
#  Start an interactive rebase
git rebase -i [branch name or commit hash]

使用技巧

下面是一些常用的小技巧，可以显著的提高命令行使用效率的小技巧

循环切换命令

有时候想快速频繁切换刚刚使用过的命令可以借助键盘上的上下箭头按键快速切换当前终端中历史的命令。

清空终端

有时候终端的信息太长，有些已经不需要看了可以使用ctrl + l快捷键或者使用clear命令实现清楚终端信息，这一点在 chrome 的 dev tools 里同样适用。

alias 别名

有时候 shell 本身的命令比较复杂难记，自己使用的时候想借助别名，使用别名来代替原来的命令，使用方式如下：使用 open 代替 start 命令，start 是以 GUI 的形式打开某个目录。注意等号前后不能有空格

alias open="start"
#  打开当前目录
open .

链式命令

有时候想实现一个命令执行完后自动执行另一个命令，这种场景很常见：安装好依赖后开启开发服务器，这种实现形式是用&&拼接两个命令

npm install && npm run start

git add . && git commit -m "Stuff" && git push origin main