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

1. VS Code介绍

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

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

2. 开始

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

  • 官网:VS Code 官网
  • 直接下载地址:VS Code下载x64-1.94.1.exe

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

在开始下载前记住这个安装包在电脑中的路径地址喔!
在这里插入图片描述
最后下载后,会得到这么一个.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:代码格式化器,让你的代码更加的美观。它通过解析代码并使用自己的规则(考虑到最大行长度)重新打印代码,并在必要时包装代码,从而实现一致的风格。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/442864.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据分析-29-基于pandas的窗口操作和对JSON格式数据的处理

文章目录 1 窗口操作1.1 滑动窗口思想1.2 函数df.rolling2 JSON格式数据2.1 处理简单JSON对象和JSON列表2.1.1 处理简单的JSON结构2.1.2 处理空字段2.1.3 获取部分字段2.2 处理多级json2.2.1 展开所有级别(默认)2.2.2 自定义展开层级2.3 处理嵌套列表JSON3 参考附录1 窗口操作 …

每日学习一个数据结构-图

文章目录 图基础一、图的定义二、图的相关概念三、图的分类四、图的使用场景 和图相关的算法一、图的遍历算法二、最短路径算法三、最小生成树算法四、图匹配算法五、网络流算法 图基础 一、图的定义 在数学中,图是描述于一组对象的结构,其中某些对象对…

YOLOv11模型地址

地址链接 项目Git地址:https://github.com/ultralytics/ultralytics?tabreadme-ov-file

大模型生成PPT大纲优化方案:基于 nVidia NIM 平台的递归结构化生成

大模型生成PPT大纲优化方案:基于 nVidia NIM 平台的递归结构化生成 待解决的问题 生成PPT大纲是一种大模型在办公场景下应用的常见需求。 然而: 目前直接让大模型生成大纲往往是非结构化的,输出格式多样,难以统一和规范&#…

Idea 2024.2.3 找不到Cache Recovery设置

idea找不到官网所说的设置 下面是解决办法 1.找到对应位置 2.增加配置文件内容 idea.is.internaltrue3.重启idea 4.查看结果 解决方案原文

Kubernetes(K8s)的简介

一、Kubernetes的简介 1 应用部署方式演变 在部署应用程序的方式上,主要经历了三个阶段: 传统部署:互联网早期,会直接将应用程序部署在物理机上 优点:简单,不需要其它技术的参与 缺点:不能为应…

MySQL 查询数据

MySQL 数据库使用SQL SELECT语句来查询数据。 你可以通过 mysql> 命令提示窗口中在数据库中查询数据,或者通过PHP脚本来查询数据。 语法 以下为在MySQL数据库中查询数据通用的 SELECT 语法: SELECT column_name,column_name FROM table_name [WHER…

OpenCV高级图形用户界面(5)获取指定滑动条(trackbar)的当前位置函数getTrackbarPos()的使用

操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 返回滑动条的位置。 该函数返回指定滑动条的当前位置。 cv::getTrackbarPos() 函数用于获取指定滑动条(trackbar)的当前…

7-3 简单计算器

本题要求你为初学数据结构的小伙伴设计一款简单的利用堆栈执行的计算器。如上图所示,计算器由两个堆栈组成,一个堆栈 S1​ 存放数字,另一个堆栈 S2​ 存放运算符。计算器的最下方有一个等号键,每次按下这个键,计算器就…

GPT系列

GPT(Generative Pre-Training): 训练过程分两步:无监督预训练有监督微调 模型结构是decoder-only的12层transformer 1、预训练过程,窗口为k,根据前k-1个token预测第k个token,训练样本包括700…

c++ 计算同一行上的最大点数(Count maximum points on same line)

示例图 给定二维平面上的 N 点作为一对 (x, y) 坐标,我们需要找到位于同一条线上的最大点数。 例子: 输入:points[] {-1, 1}, {0, 0}, {1, 1}, {2, 2}, {3, 3}, {3, 4} 输出:4 那么位于同一条线上的点…

专题十_穷举vs暴搜vs深搜vs回溯vs剪枝_二叉树的深度优先搜索_算法专题详细总结

目录 搜索 vs 深度优先遍历 vs 深度优先搜索 vs 宽度优先遍历 vs 宽度优先搜索 vs 暴搜 1.深度优先遍历 vs 深度优先搜索(dfs) 2.宽度优先遍历 vs 宽度优先搜索(bfs) 2.关系图暴力枚举一遍所有的情况 3.拓展搜索问题全排列 决策树 1. 计算布尔⼆叉树的值(medi…

JAVA智能国际商城跨境电商系统小程序源码

智能国际商城跨境电商系统——全球购物,一触即达 🌍 开篇:智能科技,重塑跨境购物新体验 在这个全球化的时代,跨境购物已经不再是遥不可及的事情。而“智能国际商城跨境电商系统”正是这样一款将智能科技与跨境电商完…

Badge插件的用法

文章目录 1 概念介绍2 实现方法3 示例代码我们在上一章回中介绍了WebView组件相关的内容,本章回中将介绍如何在图标旁边添加小红点.闲话休提,让我们一起Talk Flutter吧。 1 概念介绍 在实际项目中有时候需要在图标旁边显示小红点,而且小红点内还有数字,比如购物车图标显示…

柯桥外语培训韩语学习考级韩语中TOPIK常用语法表达

-기 위해서는 -는 것이 좋다 为了......,......比较好 -는 것보다는 -는 것이 좋다 比起......,......比较好 -(으)려면 -아/어/야 한다 如果想......的话,得...... -왜냐하면 -기 때문이다 因为...... -그 이유는 -기 때문이다 理由是…

【JAVA面试题】Java和C++主要区别有哪些?各有哪些优缺点?

文章目录 强烈推荐前言区别:1. 语法和编程风格2.内存管理3.平台独立性4.性能5.指针和引用6.多线程7.使用场景 Java 的优缺点优点:缺点: C 的优缺点优点:缺点: 总结专栏集锦 强烈推荐 前些天发现了一个巨牛的人工智能学…

【第三版 系统集成项目管理工程师】第15章 组织保障

持续更新。。。。。。。。。。。。。。。 【第三版】第十五章 组织保障 15.1信息和文档管理15.1.1 信息和文档1.信息系统信息-P5462.信息系统文档-P546 15.1.2 信息(文档)管理规则和方法1.信息(文档)编制规范-P5472.信息(文档)定级保护-P5483.信息(文档)配置管理-P549练习 15.…

DP35 【模板】二维前缀和

文章目录 1.题目描述输入描述:输出描述: 示例1 2.思路3.代码 1.题目 DP35 【模板】二维前缀和 描述 给你一个 n 行 m 列的矩阵 A ,下标从1开始。 接下来有 q 次查询,每次查询输入 4 个参数 x1 , y1 , x2 , y2 请输出以 (x1, …

大文件-分片下载

0.需求背景 文件过大,单次文件流数据过多需要有下载进度需要提高下载速度 1.大文件下载的解决思路 获取文件大小,根据实际网络情况设置分片大小,确定份数根据分片的大小索引,获取分片的流数据所有的分片下载后,合并…

计算机毕业设计 基于Flask+vue的博客系统的设计与实现 Python毕业设计 Python毕业设计选题 Flask框架 Vue【附源码+安装调试】

博主介绍:✌从事软件开发10年之余,专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ 🍅文末获取源码联系🍅 👇🏻 精…