VSCode 安装教程(超详细)


VSCode 安装使用教程(图文版)

工欲善其事,必先利其器
对于我们每一位软件工程师来说,都要有自己顺手的 IDE 开发工具,它就是我们的武器。
一个好用的 IDE 不仅能提升我们的开发效率,还能让我们保持愉悦的心情,这样才是非常 Nice 的状态

那么,什么是 IDE 呢 ?

what

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

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

IDE 名称公司是否免费功能性强大
Visual Studio Code微软强大(推荐)
Sublime个人开发者是(需要注册)适中
AtomGitHub适中
WebStormJetBrains非常强大
HBuilderDCloud非常强大

为什么现在不用 Dreamweaver

  • Dreamweaver 是曾经网页制作的王牌 IDE,推崇 “所见即所得” ,用拖拽控件的方式进行网页开发
  • 但近几年,前端开发技术,形式已经发生了根本性的变化,Dreamweaver 现在不是前端工程师的主流选择了

下边我们开始玩转 VSCode

正式开始

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

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

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

VSCode 下载、安装

官网下载

在这里插入图片描述

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

Window 版 VScode 安装流程

1、下载 Vscode 安装文件

在这里插入图片描述

提示:点击上面的下载之后,它会跳转至一个新页面

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

在这里插入图片描述

3、选择安装的位置

在这里插入图片描述

4、选择开始菜单文件夹

在这里插入图片描述

5、选择附加任务

提示

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

在这里插入图片描述

6、准备安装

在这里插入图片描述

7、正在安装

在这里插入图片描述

8、安装完成

在这里插入图片描述

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

在这里插入图片描述

VSCode 常见插件安装

1、简体中文语言包

插件名称:Chinese 中文(简体)语言包

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

在这里插入图片描述

安装完成,重启 VScode 即可

在这里插入图片描述

查看中文操作界面

在这里插入图片描述

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

建议浅色系对眼睛友好

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

在这里插入图片描述

提示

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

在这里插入图片描述

查看代码效果

在这里插入图片描述

浅色 + (默认浅色)

在这里插入图片描述

查看代码效果

在这里插入图片描述

3、vscode-icons 显示代码图标

插件名称:Material Icon

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

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

插件名称:open in brower

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

在这里插入图片描述

在这里插入图片描述

5、Live Server 开启本地服务器

插件名称:Live Server

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

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

插件名称:Auto Rename Tag

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

在这里插入图片描述

在这里插入图片描述

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

插件名称:carbon-now-sh

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

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

8、prettier 格式化代码

插件名称:prettier

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

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

然后再在页面中Ctrl+S保存即可格式化代码

相关设置

1、字体设置

管理 -> 设置

  • 字体大小: 20
  • 字体系列:JetBrains Mono

在这里插入图片描述

  • 在 VSCode 中 “控制字体系列” 添加字体名称 (优先级:从左至右)
  • 同时还要在对应的电脑操作系统中安装字体才能生效
  • 在 VSCode 中推荐使用 JetBrains Mono 编程专用字体
  • JetBrains 公司最新出了一个字体 JetBrains Mono,据称是专为改善看代码体验而生

2、下载字体

在这里插入图片描述

3、在电脑中安装字体

安装

  • 下载后解压,进到ttf 文件夹下,会有一堆文件,全选后安装
  • 所有的字体都叫 JetBrains Mono,全选安装的目的是为了响应各种特殊字体(比如斜体、意大利体、粗体、如果不需要这些花里胡哨的只需安装 Regular.ttf)

在这里插入图片描述

4、在 VSCode 中启用查看字体

在这里插入图片描述

5、光标设置,平滑插入动画

在这里插入图片描述

6、关闭代码缩略图,不占用新资源

在这里插入图片描述

7、Ctrl + 鼠标滚轮缩放字体大小

如果能用 Ctrl + 鼠标滚轮缩放字号,会非常方便

  • 我们需要进行相关的配置,在 管理 -> 设置 -> 搜索:输入 “滚动” 即可看到

在这里插入图片描述

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
  • 删除当前行:shift + ctrl + k
  • 控制台终端显示与隐藏: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 跳转到行尾
  • 作为优秀的开发者,熟练的用好快捷键也是非常重要的技能之一

Emmet 语法

  • 作为大厂资深的前端工程师们,都会熟练的使用 Emmet 语法
  • 在实际开发中可以大大的提升开发效率
  • Emmet 官方文档:https://docs.emmet.io/cheat-sheet/
    在这里插入图片描述

VSCode 安装使用教程(视频版)

详情请参见:https://www.arryblog.com/guide/vscode-video.html

  • 389
    点赞
  • 2734
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 11
    评论
VSCODE安装教程如下: 1. 首先,你需要下载VSCODE安装文件。你可以从官方网站上下载安装文件。 2. 下载完成后,运行安装文件。在安装过程中,你可以选择安装的位置。如果你想将VSCODE安装在D盘的一个名为"VScode"的文件夹中,你可以点击浏览按钮,然后选择刚刚创建的文件夹作为安装路径。如果你觉得这个过程麻烦,也可以选择默认安装在C盘。\[3\] 3. 安装完成后,你可以打开VSCODE。第一次打开时,你可能需要进行一些初始设置,比如选择语言、设置编辑器主题等。你可以根据自己的喜好进行设置。\[2\] 4. 在安装完成后,你可以根据自己的需求安装一些常用的插件。比如,你可以安装简体中文语言包、编辑器主题、代码图标显示插件等。这些插件可以提升你的开发效率和体验。\[2\] 5. 此外,你还可以进行一些相关的设置,比如设置字体、启用查看字体、设置光标样式等。这些设置可以根据你的个人喜好进行调整。\[2\] 6. 最后,你可以学习一些VSCODE的快捷键,这样可以更加高效地使用VSCODE进行开发。快捷键可以帮助你快速完成一些常用的操作。\[2\] 希望以上信息对你有帮助! #### 引用[.reference_title] - *1* *3* [VScode安装教程(2023年,3月)](https://blog.csdn.net/hh2093531258/article/details/129818131)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [VSCode 安装教程详细)](https://blog.csdn.net/weixin_44950987/article/details/128129613)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

9.冄2.7.號

你的鼓励将是我创作的巨大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值