前端零基础入门到上班:【Day2】开发环境VSCode安装

Java不晚

已于 2024-10-25 17:36:55 修改

阅读量1k

点赞数 25

分类专栏：前端开发入门到上班：从零基础到项目落地文章标签： vscode ide 编辑器

于 2024-10-25 17:34:06 首次发布

本文链接：https://blog.youkuaiyun.com/m0_61118741/article/details/143240046

版权

前端开发入门到上班：从零基础到项目落地专栏收录该内容

10 篇文章

订阅专栏

VSCode 安装教程：图文保姆教程

引言

在前端开发中，选择合适的代码编辑器是提高工作效率的重要一步。Visual Studio Code（简称 VSCode）作为一款强大的开源编辑器，因其简洁易用、功能强大、扩展性好而广受开发者喜爱。本教程将详细介绍 VSCode 的安装步骤及其配置，让你快速搭建一个高效的前端开发环境。

VSCode 介绍
系统要求
下载 VSCode
VSCode 安装步骤
- 4.1 Windows 系统安装
- 4.2 macOS 系统安装
- 4.3 Linux 系统安装
VSCode 基本界面介绍
常用配置与设置
- 6.1 主题与配色
- 6.2 字体与字号设置
- 6.3 文件编码与换行
安装常用扩展插件
- 7.1 JavaScript 和 TypeScript 开发
- 7.2 CSS 和 HTML 开发
- 7.3 Git 和版本控制
调试设置
常见问题与解决方案
总结

1. VSCode 介绍

Visual Studio Code 是由 Microsoft 开发的一款轻量级、跨平台的代码编辑器，具备强大的功能和扩展性。它支持多种编程语言，拥有智能代码补全、语法高亮、调试功能等，能够满足前端开发的绝大部分需求。

2. 系统要求

在安装 VSCode 之前，确保你的计算机满足以下基本要求：

Windows：Windows 7 SP1、Windows 8、Windows 10 或更高版本
macOS：macOS 10.11 (El Capitan) 或更高版本
Linux：支持多种 Linux 发行版，如 Ubuntu、Fedora 等

3. 下载 VSCode

访问 Visual Studio Code 官方网站。
点击页面中的 Download 按钮，根据你的操作系统选择适合的版本。

第一步：
在这里插入图片描述

第二步：就点我圈起来的哦~

在这里插入图片描述
第三步：点了之后~

第四步：同意验证下载VsCode.exe文件
在这里插入图片描述

啊~ 长舒一口气我们终于下载下来了加油安装很简单了哦!

啊啊啊啊差点忘记 ε＝ε＝ε＝(#>д<)ﾉ如果你的右上角下载的时候没有我的弹窗不妨看看左下角亲有的人在左下角哦

4. VSCode 安装步骤

4.1 Windows 系统安装

下载完成后，双击运行下载的 .exe 文件。
点击 Next，开始安装。
选择安装目录，建议保持默认设置，点击 Next。

这里啥也不干直接下一步亲
选择附加任务，建议勾选以下选项：
- Create a desktop icon
- Add to PATH
- Open with Code (Right Click)
点击 Install，等待安装完成。
安装完成后，点击 Finish，启动 VSCode。

4.2 macOS 系统安装

下载 .dmg 文件，双击打开。
将 Visual Studio Code 拖入 Applications 文件夹。
打开 Launchpad，找到 VSCode，点击启动。

4.3 Linux 系统安装

以 Ubuntu 为例，打开终端并输入以下命令：

sudo apt update
sudo apt install software-properties-common apt-transport-https wget
wget -q https://packages.microsoft.com/keys/microsoft.asc -O- | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main"
sudo apt update
sudo apt install code