手把手教会 VSCode 安装和配置

目录

下载和安装VS Code

​编辑​编辑

 安装常用插件库

Chinese (Simplified) Language Pack安装

IntelliJ IDEA Keybindings

其他插件

1.Code Spell Checker

2.HTML CSS Support

3.JavaScript (ES6) code snippets

4.Mithril Emmet

5.Path Intellisense

6.Vue 3 Snippets

7.VueHelper

8.Auto Close Tag

9.Auto Rename Tag

10.Beautify

11.Bracket Pair Colorizer

12.open in browser

13.Vetur

14.File Utils

个性化设置


Visual Studio Code (VS Code) 是由微软推出的一款完全免费、轻量级、跨平台的开源代码编辑器。它不仅功能强大,扩展性高,还拥有丰富的插件支持,适合多种编程语言。对于开发者来说,VS Code 是一个非常友好的编程环境。VS Code 对前端代码有非常强大的支持,同时也其他编程语言(例如:C++、Java、Python、PHP、Go等)。VS Code 提供了非常强大的插件库,大大提高了开发效率。  

本篇文章将介绍如何在 Windows 系统上安装 VS Code,并介绍一些常用的配置和插件安装。


下载和安装VS Code

进入VS Code官网:https://code.visualstudio.com

点击 DownLoad for Windows下载windows版本

如果需要下载其他版本(如Mac),点击 other platformsother platforms

other platforms

点击下载后,等待下载完成

下载完成后,打开下载的文件夹

 双击打开VS Code安装包

打开后勾选我同意此协议,点击下一步

 选择安装路径(建议安装在C盘外

安装路径选择好后,点击下一步

 这里直接点击下一步

 勾选创建桌面快捷方式,下面默认的勾选选项不用动,勾选好后点击下一步

点击安装

 等待安装完成

现在VS Code就安装好了,点击完成即可运行并打开VS Code


 安装常用插件库

VS Code提供了非常丰富的插件功能,根据你的需要,安装对应的插件可以大大提高开发效率。

首先点击左边边栏的插件图标,接着在搜索框查找我们需要安装的插件。

下面我们将进行部分插件介绍及其安装的演示

注意:这个过程需要联网

Chinese (Simplified) Language Pack安装

适用于 VS Code 的中文(简体)语言包

输入插件名 Chinese (Simplified) Language Pack ,点击安装

安装完成后右下角提示重启VS Code,点击重启

重启后,汉化后的界面就呈现出来了

IntelliJ IDEA Keybindings

安装VSCode的插件 IntelliJ IDEA Keybindings 即可在VSCode中使用IDEA的快捷键。这样就不用学习两套快捷键了。

其安装步骤与上述一样

下面再给大家推荐一些好用的前端开发插件,可以按照上述流程安装,下面就不多赘述。

其他插件

1.Code Spell Checker

拼写检查器。比如 banana 单词写错成 banane ,会提示你是否修改成 banana ,也可以将 banane 添加至检查器的字典中。

2.HTML CSS Support

在编写样式表的时候,自动补全功能大大缩减了编写时间。

3.JavaScript (ES6) code snippets

支持ES6语法提示

4.Mithril Emmet

一个能大幅度提高前端开发效率的一个工具,用于补全代码

5.Path Intellisense

路径提示插件

6.Vue 3 Snippets

在 Vue 2 或者 Vue 3 开发中提供代码片段,语法高亮和格式化的 VS Code 插件,能极大提高你的开发效率。

7.VueHelper

vscode最好的vue代码提示插件,不仅包括了vue2所有api,还含有vue-router2和vuex2的代码

8.Auto Close Tag

自动闭合HTML/XML标签

9.Auto Rename Tag

自动完成另一侧标签的同步修改

10.Beautify

格式化 html ,js,css

安装过程中, 如果提示是否需要继续安装, 选择 "仍要安装"。

11.Bracket Pair Colorizer

给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色

安装过程中, 如果提示是否需要继续安装, 选择 "仍要安装"。

12.open in browser

vscode不像IDE一样能够直接在浏览器中打开html,而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件,支持自定义打开指定的浏览器,包括:Firefox,Chrome,Opera,IE以及Safari

13.Vetur

Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。vscode官方钦定Vue插件,Vue开发者必备。

14.File Utils

File Utils插件,可以方便快捷的来创建、复制、移动、重命名文件和目录。


个性化设置

主题和字体的设置如下

如果有帮助,欢迎点赞、评论、收藏和关注

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值