JavaWeb学习之路(11)--VSCode来了,超好用的代码编辑器,详细安装过程

简介: 本文目录1. 编辑器2. 编辑器是干啥的3. VSCode编辑器的特长4. VSCode下载与安装5. VSCode安装6. 小结

1. 编辑器

在之前的章节中,我们一直使用最原始的记事本进行代码的编辑。然后将文件拓展名修改为.html后,通过浏览器进行查看。


随着我们学习的标签种类越来越多,大家可能已经发现了,用记事本写一段网页代码是非常费劲的。


所以本篇,我们就来给大家介绍一款超好用的代码编辑器,也是当前前端开发领域最流行的编辑器——VSCode。


2. 编辑器是干啥的

注意,如果是同样的一段代码,使用记事本编写,或者使用VSCode等编辑器进行编写,其实写出来的东西是一模一样的,都是代码。


但是,编辑器可以让编写、查看代码更加清晰、直观、高效。例如可以用颜色区分代码的不同部分,帮助大家理解代码;可以自动联想补全代码,提高大家的编写效率;可以自动为代码进行格式化,让代码更加井井有条,帮助大家更加直观的查看代码。


所以编辑器,实际上是一种提高效率的工具。


3. VSCode编辑器的特长

网页编辑器有很多,为何VSCode能够独领风骚?


我认为VSCode成功的一个关键是插件机制,就是可以通过安装各种插件来拓展VSCode的功能。


例如VSCode默认是英文版本的,可以安装一个中文插件,就能显示中文版本了。


通过插件机制,VSCode具备了无限可能性!


4. VSCode下载与安装

说了半天,我们来下载并安装VSCode,其实VSCode也是一个软件,下载后双击安装包安装就是了。


首先打开下载地址:VSCode下载地址,然后选择Windows版本下载,如下图:



点击上图中圈出的下载链接,然后稍等一会就会启动下载。


5. VSCode安装

下载完毕后,我们得到了一个安装包,它是一个exe可执行程序。双击这个程序,即可开始安装VSCode。


接下来,我通过截图的方式,详细给大家描述下安装过程,以便让大家明白我们安装过程的细节。


第1步,是要同意安装协议,相当于你要使用人家这个软件,就得同意人家的一些条件,这个嘛同意就行,然后点击下一步。




第2步,选择红线标出的两个复选框,创建桌面快捷方式很好理解,就是在桌面上放一个图标,可以双击打开VSCode;添加到PATH的意思是将VSCode添加到系统环境变量,这样我们在使用命令行等工具的时候,可以轻松调用到VSCode。注意添加到PATH这个如果不理解的话,也没啥影响,感兴趣的同学可以自己再去搜索了解。



第3步,直接点击安装就OK了。


最后,安装完毕后,可以双击桌面上的VSCode图标启动VSCode进行使用。


6. 小结

本篇介绍了VSCode的特点及安装过程,下一篇讲解下VSCode的常见用法。

相关文章
|
6月前
|
搜索推荐 C++ 开发者
VSCode安装使用教程,保姆级!
本文介绍了Visual Studio Code(VS Code)的安装和基本使用,包括从官网下载安装包,按照步骤在Windows系统上安装,以及设置个性化主题。此外,还强调了安装插件以增强功能,例如安装简体中文插件,并展示了如何搜索和安装插件。VS Code作为一个免费、开源的轻量级编辑器,其丰富的扩展性和高效性使其成为开发者工具的首选。
|
4月前
|
存储 JavaScript 前端开发
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
文章展示了在Vue项目中通过集成Quill富文本编辑器实现公告功能的完整开发过程,包括前端的公告发布、修改、删除操作以及后端的数据存储和处理逻辑。
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
|
4月前
|
JavaScript
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
文章详细介绍了在Vue项目中安装和使用`vue-quill-editor`的步骤,包括如何通过npm安装、局部挂载、在Vue页面中引入和配置使用。同时,还提供了如何实现图片的缩放和拖拽功能的进阶教程,涉及到安装额外的插件`quill-image-drop-module`和`quill-image-resize-module`,以及对Webpack配置的调整。最后,文章还提供了实际效果展示和一些后续可能的拓展功能,如上传视频和将图片上传到服务器等。
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
|
4月前
|
TensorFlow 算法框架/工具 Python
【Mac 系统】解决VSCode用Conda成功安装TensorFlow但程序报错显示红色波浪线Unable to import ‘tensorflow‘ pylint(import-error)
本文解决在Mac系统上使用VSCode时遇到的TensorFlow无法导入问题,原因是Python解析器未正确设置为Conda环境下的版本。通过在VSCode左下角选择正确的Python解析器,即可解决import TensorFlow时报错和显示红色波浪线的问题。
175 9
|
5月前
|
Shell Linux 数据安全/隐私保护
Notepad-- 轻量级文本编辑器的安装及基本使用
【7月更文挑战第11天】Notepad-- 轻量级文本编辑器的安装及基本使用
234 3
|
6月前
|
JavaScript 前端开发 C++
vscode编辑器中如何调试nextjs代码
代码可调式的重要性不言而喻。 对于Programer来说,自己编写的程序能够被优雅调试是一件幸福的事情,特别是习惯了后端程序调试的开发者... 在折腾Nextjs项目的日子里,我走了很多弯路才弄明白在vs code中如何优雅的调试代码。
363 1
vscode编辑器中如何调试nextjs代码
|
4月前
|
C++
安装VS Code报错:您选定的驱动器或UNC共享不存在或不能访问。请选择其他位置。
安装VS Code报错:您选定的驱动器或UNC共享不存在或不能访问。请选择其他位置。
|
5月前
|
JavaScript IDE 开发工具
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
346 3
|
5月前
|
JavaScript 安全
下载安装 vscode(含汉化、插件的推荐和安装)
下载安装 vscode(含汉化、插件的推荐和安装)
84 0
下载安装 vscode(含汉化、插件的推荐和安装)
|
5月前
|
JavaScript 前端开发 关系型数据库
入职必会-开发环境搭建28-VSCode下载和安装
Visual Studio Code(简称 VS Code)是由微软开发的免费开源代码编辑器,支持几乎所有主流操作系统,包括 Windows、macOS 和 Linux。它具有丰富的功能和扩展性,适用于各种编程语言和应用场景。
下一篇
DataWorks