前端开发必备：这些 Shell 命令你都会用吗？

在前端开发中，Shell 命令是一项提升效率的必备技能。从项目初始化到代码构建、从版本控制到文件操作，熟练使用 Shell 命令可以显著优化开发流程。本篇文章将为您系统梳理前端开发中常用的 Shell 命令，帮助您在日常工作中快速上手，提高开发效率。不论您是前端新手还是资深开发者，这份指南都值得收藏！

一：项目初始化与依赖管理

• npm init：初始化一个 Node.js 项目，生成 package.json 文件。
• npm install / yarn install：安装项目依赖。
• npm install package-name：安装指定依赖包。
• npm install -D package-name：安装开发环境依赖。
• npm uninstall package-name：卸载依赖包。
• npx：运行本地依赖的 CLI 命令，例如：
  npx create-react-app my-app：创建一个 React 项目。

二：开发与调试

• npm run：运行 package.json 中定义的脚本。

  • npm start：启动开发服务器（通常在 package.json 中定义）。
  • npm test：运行单元测试。
  • npm run build：构建生产环境代码。
• node filename.js：运行 Node.js 脚本文件。

三：文件操作

• ls：列出当前目录的文件和文件夹。

  • ls -la：列出所有文件（包括隐藏文件）及其详细信息。
• cd directory-name：进入某个目录。
• pwd：打印当前路径。
• mkdir directory-name：创建新目录。
• rm：删除文件或目录。

  • rm -rf directory-name：强制删除文件夹及其内容。
• mv source target：移动或重命名文件/文件夹。

四：版本管理（Git 命令）

• git init：初始化 Git 仓库。
• git clone url：克隆远程仓库。
• git status：查看当前仓库状态。
• git add：添加文件到暂存区。
• git add .：添加所有文件。
• git commit -m "message"：提交代码到本地仓库。
• git push origin branch-name：推送代码到远程分支。
• git pull：拉取远程分支的最新代码。
• git branch：查看本地分支。
• git checkout branch-name：切换到指定分支。
• git checkout -b branch-name：新建分支。

五：构建工具相关命令

Webpack

• npx webpack：运行 Webpack。
• npx webpack --watch：监听文件改动并重新打包。
• npx webpack --config webpack.config.js：指定配置文件打包。

Vite

• npm run dev：启动 Vite 开发服务器。
• npm run build：使用 Vite 构建项目。
• npm run preview：预览构建产物。

六：Lint 和代码格式化

• npx eslint .：检查代码中的语法问题。
• npx eslint --fix .：自动修复代码中的语法问题。
• npx prettier --write .：格式化代码。

最后

Shell 命令是前端开发者不可或缺的工具，贯穿项目生命周期的方方面面。从项目初始化到开发调试、从代码构建到部署上线，Shell 命令大幅提升了开发效率，简化了繁琐的任务操作。

本篇文章汇总了前端开发中最常用的 Shell 命令，包括项目初始化、依赖管理、Git 版本控制、构建工具（如 Webpack 和 Vite）以及代码质量检查（如 ESLint 和 Prettier）。此外，还补充了一些高效文件操作和进程管理的技巧，帮助开发者快速处理开发中的日常事务。

无论你是刚入门的前端开发新手，还是希望优化工作流的资深工程师，熟练掌握这些 Shell 命令都能帮助您更轻松地应对各种开发挑战。记住，工具的高效使用，永远是提升开发效率和质量的关键！