搭建前端开发环境 | siimplelab (단순함연구소)

Frontend Development Environment — Photo by Ilya Pavlov on Unsplash

前端开发需要三个工具：编辑器、运行时和版本控制。

安装VSCode

从code.visualstudio.com下载。

安装后，添加有用的扩展：

Prettier - 代码格式化
ESLint - 代码质量检查
Live Server - 本地开发服务器

用Cmd+Shift+X（Mac）或Ctrl+Shift+X（Windows）打开扩展标签页，搜索安装。

安装Node.js

从nodejs.org下载LTS版本。

验证安装：

node --version
npm --version

显示版本号表示成功。

安装Git

从git-scm.com下载。

安装后，设置用户信息：

git config --global user.name "你的名字"
git config --global user.email "email@example.com"

验证设置：

git config --list

创建第一个项目

在终端创建项目：

mkdir my-project
cd my-project
npm init -y
git init

用VSCode打开文件夹：

code .

创建index.html文件：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Project</title>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

右键选择”Open with Live Server”在浏览器中查看。

设置.gitignore

不要把node_modules包含在Git中：

echo "node_modules" > .gitignore

第一次提交

git add .
git commit -m "Initial commit"

开发环境设置完成。