手把手教你如何配置好VS Code的WEB基础开发环境(保姆级)

1. VS Code介绍

微软旗下的多场景开发环境软件,支持JAVA、C、C#、C++、WEB、VUE、CSS、HTML、Python等等等
如果你刚刚开始编程或者准备学习WEB,那么我强烈建议你使用这款软件

  • 缺点:(针对初学者)
    1. 需要安装各种各样的插件
    2. 一些语言还需要对配置文件进行修改

2. 开始

步入正题,先去官网下载VSCODE
这里给出VSCODE的官网和下载地址

如果直接下载地址失效了,可以前往官网
在这里插入图片描述
直接点击图片中红框的位置

在开始下载前记住这个安装包在电脑中的路径地址喔!
在这里插入图片描述
最后下载后,会得到这么一个.exe应用程序,这是一个安装包,双击打开它
在这里插入图片描述
打开后,全部点击下一步,直到点击 安装,让他自己安装即可

如果想把VS Code安装在其他的路径下面,可以自行在安装程序中更改,不出意外是可以改的
如果安装完成后还没有出现更改路径的选项可以按照图片步骤做,将整个vscode文件夹更换地址
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3. 配置插件

安装完成后,打开VS Code

  • 在界面左侧,找到图标是几个小方块的功能,点击它

在这里插入图片描述

  • 然后搜索中文插件:Chinese

在这里插入图片描述

  • 找到这个插件,点击Intall安装

在这里插入图片描述
当下图红框中的install没有了,和出现 uninstall 的时候,就可以把软件关闭重启了
在这里插入图片描述
重新打开软件后
按下“Ctrl+Shift+P”组合键以显示“命令面板”,输入“ Configure Display Language ”命令。
选中后,按“Enter”,然后会按区域设置显示安装的语言列表,并突出显示当前语言设置。选择另一个“中文”以切换 UI 语言
在这里插入图片描述
在这里插入图片描述
通过按键盘 上下键 选择项,按enter回车 确认
当选择到中文后,会要求你重启VS Code软件,这时候选择重启即可。

4. 最后

对于基本HTML编写,VS Code自己就会有一些代码提示。
例如Html文件,输入 “ ! ”英文状态下的感叹号,按下enter回车就会出现基本的代码,随后就可以开始编写了。
在这里插入图片描述

5. 其他优质插件

5.1 Bracket Pair Color DLW

在这里插入图片描述

Bracket Pair Color DLW:可以让你代码中的括号出现不同的颜色高亮,以便于区域的区分

5.2 Codelf

在这里插入图片描述

Codelf :如果还在想某个变量的名称如何命名,那么这款插件可以为你提供更多的变量名方案

5.3 css-auto-prefix

在这里插入图片描述

css-auto-prefix:自动为你补齐css中剩余的代码,提高你的编写效率

5.4 open in browser(必备)

在这里插入图片描述

open in browser:让你项目以不同的程序打开,最明显的就是Html,通过alt+b快捷键,非常的快捷

5.5 Prettier - Code formatter

在这里插入图片描述

Prettier - Code formatter:代码格式化器,让你的代码更加的美观。它通过解析代码并使用自己的规则(考虑到最大行长度)重新打印代码,并在必要时包装代码,从而实现一致的风格。

VSCode配置Web开发环境需要进行以下步骤: 1. 首先,你需要安装Maven插件。Maven是一个用于构建和管理Java项目的工具。你可以通过VSCode插件市场搜索并安装Maven插件。 2. 安装完成后,你可以创建一个Maven Web项目。在VSCode中,你可以使用Maven插件来创建和管理项目。你可以使用命令面板(Ctrl+Shift+P)并输入"Maven: Create Maven Project"来创建一个新的Maven项目。 3. 在创建项目时,你可以选择使用Maven的默认配置或自定义配置。根据你的需求进行选择。 4. 创建项目后,你可以在VSCode中打开项目文件夹。在项目文件夹中,你可以找到一个名为"index.jsp"的文件,这是项目的入口文件。\[1\] 5. 接下来,你需要配置服务器端口。默认情况下,Web应用程序使用的端口是8080。你可以在项目的配置文件"server.xml"中修改端口号。\[2\] 6. 最后,你可以根据需要进行其他配置。例如,你可以选择创建桌面快捷方式、将VSCode添加到右键菜单等。\[3\] 总结起来,配置VSCodeWeb开发环境需要安装Maven插件、创建Maven项目、配置服务器端口等步骤。希望这些信息对你有帮助。 #### 引用[.reference_title] - *1* *2* [VsCode配置JavaWeb(最新)](https://blog.csdn.net/qq_56051596/article/details/126014977)[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^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Windows下VSCode开发及运行Web程序环境配置](https://blog.csdn.net/liu2004051957/article/details/127975843)[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^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值