Day1环境配置

一、笔记工具

1、什么是 Markdown（MD）？

Markdown 是一种轻量级标记语言，用简单的符号（如 #、*、>）就能排版，写完直接生成漂亮的网页或 PDF。

核心优点：

  • 语法简单，10 分钟上手
  • 纯文本，永不乱码
  • 一键转 HTML、PDF、Word、PPT

2、最常用的 10 条语法

效果 语法 输入示例 渲染结果
标题 # 到 ###### # 一级标题 # 一级标题
加粗 **文字** **重点** 重点
斜体 *文字* *引用* 引用
高亮行 `代码` `print()` print()
列表 - 或 1. - 苹果 - 苹果
链接 [文字](URL) [百度](https://baidu.com) 百度
图片 ![文字](URL) ![猫](https://……jpg) 猫
引用 > 文字 > 名言 > 名言
分隔线 --- --- ---
任务清单 - [ ] - [ ] 写作业 - [ ] 写作业

3、 零基础 30 秒模板

# 今日笔记
## 关键概念
- **Markdown**：轻量级标记语言
- **图床**：图片云端外链仓库

## 代码演示
```python
print("Hello MD")
## 任务清单
- [x] 学会标题
- [ ] 学会插图

把上面内容粘到任意 Markdown 编辑器就能实时看到效果。

4、 推荐工具

平台 软件 亮点 下载
Windows Typora（新版收费） 所见即所得，颜值高 链接: https://pan.baidu.com/s/1CXKqf-jwGirD-Kqvso0Thw?pwd=kzhn 提取码: kzhn

链接: https://pan.baidu.com/s/1bKlA4ZLJczgrRWo92D2PNA?pwd=gp2s 提取码: gp2s
macOS Typora / Bear Bear 支持 iCloud 同步 App Store
Linux Typora / Mark Text 开源免费 GitHub 搜索 marktext
Web 石墨文档 / 语雀 打开浏览器就能写 直接访问
插件 VS Code + Markdown All in One 免费、可装图床插件 官网下载

5、图床是什么？为什么需要？

Markdown 文件本身不存图片，只保存图片链接。

图床 = 把图片上传到云端 → 给你一条永久外链 → Markdown 里引用即可。

好处：

  • 文档体积小于 1 KB
  • 换电脑、发给别人、发博客都不会丢图
  • 支持一键粘贴上传（Typora + 插件即可）
  • 可以买阿里云、腾讯云的OSS存储桶

不设置图床的话，可以按照以下方式设置：

插入图片的时候，会在当前文件夹下创建一个图片文件夹，把图片存放在文件夹中，将笔记分享给别人的时候，如果要分享md格式，需要将文件夹一起打包，不然图片会裂（或者发送pdf文件）

image-20251031115850523

6、免费图床推荐

名称 单张上限 外链HTTPS 说明
Imgur（国际） 20 MB ✅ 需科学上网
SM.MS 5 MB ✅ 中文站，免费 5 GB
GitHub + jsDelivr 100 MB ✅ 稳定、白嫖、教程多
阿里云 OSS 40 GB/年 9 元 ✅ 最低成本付费方案

手把手教你搭建阿里云图床(PicGo+Typora+阿里云OSS)，新手小白一看就会

如果你还没有开通对象存储服务OSS，那么点击立即开通，现在新人可以免费试用三个月，存储包 20 GB。

7、 常用快捷键（Typora）

快捷键 功能
Ctrl/⌘ + 1~6 1~6 级标题
Ctrl/⌘ + =/- 升/降标题级别
Ctrl/⌘ + B 加粗
Ctrl/⌘ + I 斜体
Ctrl/⌘ + U 下划线
Ctrl/⌘ + Shift + ` 行内代码
Ctrl/⌘ + K 超链接
Ctrl/⌘ + Shift + I 插入图片
Ctrl/⌘ + / 显示/关闭源码模式
Ctrl/⌘ + L 选中当前行

8、进阶资源

二、IDE介绍

一个好用的 IDE 不仅能提升我们的开发效率，还能让我们保持愉悦的心情，这样才是非常 Nice 的状态 ^_^

那么，什么是 IDE 呢 ？

IDE（Integrated Development Environment，集成开发环境）是含代码编辑器、关键词高亮、智能感应、智能纠错、格式美化、版本管理等功能于一身的 "高级代码编辑器" 每个 IT 工程师都要有自己顺手的 IDE，它是我们的武器 要理解无论使用什么 IDE 编写出来的代码，本质上都是 "白底黑字" 的，都是 "纯文字" 的

目前，前端开发主流的 IDE 有以下 5 个

IDE 名称 公司 是否免费 功能强大度
Visual Studio Code 微软 是 强大（推荐）
Sublime 个人开发者 是（需要注册） 适中
Atom GitHub 是 适中
WebStorm JetBrains 否 非常强大
HBuilder DCloud 是 非常强大

下边我们开始玩转 VSCode

正式开始

  • Visual Studio Code 简称 VSCode ，2015 年由微软公司发布。

  • 可用于 Windows，macOS 和 Linux。它具有对 JavaScript，TypeScript 和 Node.js 的内置支持，并具有丰富的其他语言（例如 C++，C＃，Java，Python，PHP，Go）

  • 优点：内置功能非常丰富、插件全且安装简单、轻量、有 MAC 版本

img

三、VSCode 下载、安装

官网下载

在官方网站：https://code.visualstudio.com/

下载最新版本的 VSCode 即可

img

提示：

蓝色按钮会自动识别电脑操作系统，到适合的版本，只需要点击下载即可

也可以按照以下方式手动下载适配自己电脑的版本~~~

四、Window 版 VScode 安装流程

1、下载 Vscode 安装文件

img

img

提示：

点击上面的下载之后，它会跳转至一个新页面

2、下载完成单击运行，然后我们开始进行安装

img

3、选择安装的位置

安装目录文件所在，可选择、可默认，这里我设置的是：D:\Software\Microsoft VS Code

img

4、选择开始菜单文件夹

你想在哪里放置程序的快捷方式，默认即可

2

5、选择附加任务

提示：

  • 将以下四项都勾选上，桌面快捷方式需要就添加即可
  • 添加到 PATH：添加到系统环境变量中，勾选后，即可在命令行中使用 code . 即可打开 Vscode

img

6、准备安装

img

7、正在安装

img

8、安装完成

6

9、安装完成后，第一次打开 VSCode

img

五、VSCode 常见插件安装

1、简体中文语言包

插件名称：Chinese 中文（简体）语言包

  • 作用：将 VSCode 操作界面转换为中文，对英语不好的朋友，非常友好

img

img

安装完成，重启 VScode 即可

img

查看中文操作界面

img

2、编辑器主题选择、设置

建议浅色系对眼睛友好

管理 -> 颜色主题 -> 选择自己喜欢的主题即可

img

提示

  • 选择自己喜欢的主题
  • Quiet Light

img

查看代码效果

img

浅色 + （默认浅色）

13-1

img

3、vscode-icons 显示代码图标

插件名称：Material Icon

  • Theme 作用：显示 Vscode 文件、文件夹的图标
  • 在 VScode 扩展插件中搜索 “Material Icon Theme” 即可安装

img

img

img

4、open in brower 通过编辑器直接打开默认浏览器

插件名称：open in brower

  • 作用：该插件可通过编辑器打开默认浏览器显示代码效果

18

18-1

5、Live Server 开启本地服务器

插件名称：Live Server

  • 作用：通过插件可以开启本地服务
  • 优点：一边编写代码一边保存，即实时刷新预览，大大提升开发测试效率

20

20-2

6、Auto Rename Tag 自动修改标签对名称

插件名称：Auto Rename Tag

  • 作用：修改标签，自动帮你完成头部和尾部闭合标签的同步修改

21

21-1

7、carbon-now-sh 将代码生成一张图片

插件名称：carbon-now-sh

  • 作用：可提升逼格的插件，在实际开发中遇到技术问题或者做部分代码片段分享，可以使用该插件将代码生成一张图片
  • 使用方法：
    • 在 VSCode 中，选中需要生成图片的代码
    • 打开命令托盘：Windows：Ctrl + Shift + P，Mac：Cmd + Shift + P
    • 输入 Carbon，回车

24

24-0

24-1

8、prettier 格式化代码

插件名称：prettier

  • 作用：格式化美化代码
  • Ctrl + s 保存会自动格式化

25

25-1

9、ESLint （dbaeumer.vscode-eslint）

实时报错、自动修复。安装后再执行一次 npm i -D eslint @eslint/js 初始化配置即可。

注意：如果没装过node先装node，见node安装章节。

image-20251030104102773

10、Code Runner

按 Ctrl+Alt+N 直接跑当前文件，小脚本秒级看结果；Node 需先装到系统 PATH。

image-20251030104311285

image-20251030104334907

六、VSCode 快捷键

1、Window 版快捷键

常用快捷键

  • 注释:

    • 单行注释：ctrl + k ctrl + c 或 ctrl + /
    • 取消单行注释：ctrl + k ctrl + u（按下 ctrl 不放，再按 k+u）
    • 多行注释：alt + shift + A
    • 多行注释 : /**/

  • 移动行：alt + up/down

  • 显示/隐藏左侧目录栏 ctrl + b
  • 复制当前行：shift + alt + up/down
  • 选择整行：ctrl + L
  • 删除当前行：shift + ctrl + k
  • 光标在任意位置换行：ctrl+enter
  • 控制台终端显示与隐藏：ctrl + ~
  • 查找文件/安装 vscode 插件地址：ctrl + p
  • 代码格式化：shift + alt + f
  • 新建一个窗口：ctrl + shift + n
  • 多行编辑：Ctrl + Alt + up/down

2、Mac 版快捷键

Mac

  • Command + X 剪切（未选中文本的情况下，剪切光标所在行）
  • Command + C 复制（未选中文本的情况下，复制光标所在行）
  • Option + Up 向上移动行
  • Option + Down 向下移动行
  • Option + Shift + Up 向上复制行
  • Option + Shift + Down 向下复制行
  • Command + Shift + K 删除行
  • Command + Enter 下一行插入
  • Command + Shift + Enter 上一行插入
  • Command + Shift + \ 跳转到匹配的括号
  • Command + [ 减少缩进
  • Command + 1 增加缩进
  • Home 跳转至行首
  • End 跳转到行尾

作为优秀的开发者，熟练的用好快捷键也是非常重要的技能之一

七、Node安装

1、检查是否有node环境

检查系统是否有node环境，命令如下

node -v
npm -v

在这里插入图片描述 如果没有安装node，先安装node环境，下载一个node的msi安装包，直接安装即可，默认是自动带npm包管理的。

2、下载Node.js安装包

打开Node.js下载官网（传送门https://nodejs.cn/download/）

image-20251030104811754

一般我们选择我红框框起来的这个下载就可以了 下载完成后，就可以进行安装啦

3、安装Node.js

双击安装包，一直点击下一步即可。

在选安装位置时，可以使用默认位置，当然要改也可以。点击change按钮，即可更换到自己的指定安装位置。

add to path这一项一定记得要选上，不然还要手动添加

选择“Add to PATH”

一直点击下一步，最后安装成功即可。

4、验证安装

在键盘按下【win（即Windows徽标键）+R】键，输入cmd，然后回车，打开命令行界面

分别输入以下命令：

  • node -v //显示安装的nodejs版本
  • npm -v //显示安装的npm版本

若能出现对应的版本号，即视为安装成功

安装成功

若提示：‘node’ is not recognized as an internal or external command, operable program or batch file. 则说明node没有添加到系统的path环境变量中，可以手动添加或重新安装（在重新安装时一定要选上“Add to PATH”）

选择“Add to PATH”

手动添加方法：（若已经成功，则不需要看此部分） 1.在键盘按下【win（即Windows徽标键）+R】键，输入sysdm.cpl，然后回车，打开“高级系统设置”

image-20251030105302914

2.切换到“高级”选项卡下，点击下方的“环境变量”

image-20251030105325040

3.在“系统变量”中，找到path，单击选择后，点击下方“编辑”按钮

image-20251030105416757

4.点击“添加”按钮，并选择你安装的node.js目录（比如我的安装目录是“D:\Program Files\nodejs\”，跟你的可能不一样）

添加path

然后点击“确定”即可，然后可以再尝试在命令行中输入对应命令查看是否成功

5、更换npm源为淘宝镜像

因为 npm 默认的 registry ，也就是下载 npm 包时是从国外的服务器下载，由于众所周知的原因，导致国内下载很慢，因此，我们可以将源换为淘宝源 淘宝源的地址：https://registry.npmmirror.com/ 在命令行（如果不会打开，可以看前面）中，输入下列命令：

npm config set registry https://registry.npmmirror.com/

然后再输入下列命令，查看是否完成修改

npm config get registry

如图所示，若跟图片一致，则说明完成修改。

results matching ""

    No results matching ""