VSCode安装使用|创建一个可运行的html页面|配置美化

最新推荐文章于 2024-06-24 20:05:23 发布
最新推荐文章于 2024-06-24 20:05:23 发布
阅读量2.4k 收藏 5
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44155199/article/details/107993356
版权
本文介绍了如何从官方地址安装VSCode，并针对JavaScript和Vue开发进行配置。通过添加插件提升开发体验，同时详细说明了如何在VSCode中创建并运行一个简单的HTML页面，包括建立工作区、创建文件夹和编写h1标题，最后通过右键运行展示页面。
摘要由CSDN通过智能技术生成

安装地址

https://code.visualstudio.com/Download
这个是vscode官方下载地址，一直下一步就好了，没有其他的特殊选项

我是用来开发js和vue的
可以到商店里安装以一些插件
举几个我能用到的例子：
在这里插入图片描述
最后，说一下如何开发一个html页面

在这里插入图片描述

  • 在你的电脑里创建一个文件夹

  • 在这里插入图片描述

  • 单机vscode菜单栏的文件

  • 打开刚才创建的文件夹

  • 然后点击文件夹，再将文件另存为工作区，命名为1010

  • 现在就生成了一个工作区在这里插入图片描述

  • 在工作区下面创建一个demo文件

  • demo文件下创建一个hello.html

  • 然后编写一个h1标题

  • 在这里插入图片描述

  • 右键运行

李真真爱编码
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vscode怎么运行代码HTML 怎么在vscode编写HTML代码
QQ_____365392777的博客
05-30 4万+
vscode怎么运行代码HTML 怎么在vscode编写HTML代码 vscode怎么运行代码HTML?vscode是一款源代码编辑器软件，能够用于windows、macOS以及Linux系统，具有丰富的其他语言。网站html编写也需要使用到vscode，但是很多小伙伴们不知道如何运行编写html代码，那么今天就来教大家vscode怎么运行代码HTML以及怎么在vscode编写HTML代码，一起来看看吧。 vscode怎么运行代码HTML 1、首先打开vscode软件，新建一个HTML文件，后缀名也需要写上
VScode页面开发
m0_74937538的博客
08-04 5415
当一个元素的宽度已知，并且希望它在其容器中水平居中对齐时，可以使用这个属性。11）overflow: hidden该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。13）text-overflow: ellipsis的意思就是在文本溢出容器时，使用省略号来表示溢出的部分。7)、input type="radio" 单选按钮，同组按钮内，name值保持一致，互斥，不能同时选中。9)sub下标/sup上标：上下标标签，加入（title=“*******”）链接可显示标签信息。
VSCode创建并运行html页面（使用Live Server插件）
最新发布
m0_51371779的博客
06-24 692
打开浏览器，输入网址 http://localhost:【端口号】/【html文件名】.html，我这里是http://localhost:5500/testhtml.html，大家根据自己的端口号和html文件名修改网址。在输入框中输入“xxx.html”，其中xxx是html文件的名字，回车。点击扩展按钮，搜索Live server，点击“安装”按钮。在弹出的窗口中选择刚才新建好的文件夹，点击“选择文件夹”在VSCode中点击“文件”，再点击“打开文件夹”在打开的文件夹中选择“新建文件”按钮。
vscode前端js,css,html插件
bee-factory
01-17 6万+
vscode-icon，这款必须要推荐，明显提升效率的小插件，在项目文件多类型多的情况下，找到制定文件会大大缩短时间； Class autocomplete for HTML，编写html代码的朋友们对html代码的一大体现就是重复，如果纯用手敲不仅累还会影响项目进度，这款自动补全插件真的很棒； beautify，这款类似于vscode里格式化代码的功能，不错； Emoji，很好玩的一款
vs code 代码格式化整理
热门推荐
Latency の 博客
05-22 55万+
vs code格式化代码的快捷键如下：（来源于这里）On Windows Shift + Alt + FOn Mac Shift + Option + FOn Ubuntu Ctrl + Shift + I但是自带的格式化并不能满足我的需求，这个时候，不得不说插件大法好。1、代码格式化为eslint风格（参考自这里）需要插件：eslint在设置中添加："eslint.autoFixOnSave":...
VS Code中 vue文件HTML代码格式化
海贼8023的博客
03-05 5673
问题：一般用Shift+Alt+F，可以格式化JS和CSS的部分，但template部分没反应。1. 在应用商店中搜索并安装 “Vetur” 插件2. 配置。文件 -> 首选项 -> 设置，在编辑框加上这两句"prettier.tabWidth": 4, "vetur.format.defaultFormatter.html": "prettier"3. 最后按格式化快捷键 Shift...
使用VScode写一个html页面
10-15
本文给大家分享的是使用vscode编写的第一个html页面的全过程,非常的简单,菜鸟看看就行,高手请略过
VSCode的使用配置以及VSCode插件的安装教程详解
10-14
通过定制设置和安装合适的插件，你可以创建一个符合个人习惯、高效的工作环境。记住，配置的过程是不断优化的过程，随着开发需求的变化，你可能需要不断调整设置和添加新的插件。希望这篇教程对你在学习和工作中使用...
使用VSCode 创建一个插件
10-15
使用VSCode 创建一个插件 在本篇文章中，我们将详细介绍如何使用VSCode 创建一个插件。 VS Code 的插件是一个 Node.js 应用程序，因此官方提供了基于 NPM 的工具链来帮助创建和维护插件。 首先，我们需要安装 ...
Windows下安装VScode 并使用及中文配置方法
09-17
总之，Windows环境下安装和使用VSCode是一个简单的过程，加上适当的中文配置，使得非英语用户也能轻松上手。随着对VSCode的深入使用，你会发现它不仅是一个编辑器，更是一个高效开发的综合平台。不断探索和利用其...
windows+vscode安装paddleOCR运行环境的步骤
01-19
因为最近在做文本检测相关，想试着用用百度的...官网下载安装包直接运行安装，然后新建python3.7环境 2、安装paddle相关环境 参考官网地址： https://www.paddlepaddle.org.cn/install/quick/zh/1.8.5-windows-pip ...
VSCode 设置vue 保存自动格式化代码
weixin_30723433的博客
08-22 4369
设置保存自动格式化代码，开发效率大大提升！ 操作如下： 安装VSCodeeslint插件 如下配置setting.json文件： { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSi...
vscode使用Ctrl+s保存代码自动格式化html/css/js
mm
10-11 1万+
1、使用时首先安装一下插件： 1、ESlint //代码分格检查， 2、vetur // 语法高亮，Vetur支持.vue文件的语法高亮显示，除了支持template模板以外，还支持大多数主流的前端开发脚本和插件 3、Prettier - Code formatter 4、Manta's Stylus Supremacy // 格式化 css 2、修改配置： 3、设置配置内容： {...
VScode格式化HTML代码保持标签属性不换行
wasd986523的博客
01-08 2211
参考谢谢：https://www.cnblogs.com/listen9436/p/13064294.html VScode格式化HTML代码保持标签属性不换行 属性自动换行，导致一个文件千百行 ，看着不舒服，最关键的是标签无法折叠了，这是最不能忍的 代码： {"vetur.format.defaultFormatter.html": "js-beautify-html", "emmet.includeLanguages": { "wxml"...
vscode 打开网页_简单粗暴，直接教你上手制作网页—前端开发入门
weixin_35935264的博客
01-20 1万+
首先我要说学习前端网页制作其实很简单！今天我带着你踏入前端开发的大门，我不会给大家说一些难懂的概念上的东西，有些知识其实不必知道，学习之后再慢慢了解也是可以的。简单粗暴，直接让你上手就完事了！先大致了解一下HTML的构成简单的说HTML网页的构成基本可以理解为是由标签、样式和属性组成的标签：可以理解为是组成网页的框架或是盒子。样式：决定标签的外观(大小、宽高等等)属性：标签本身自带的一些样式或是功...
VSCode JavaScript 代码格式化 美化 Beautify
wuyujin1997的博客
05-23 4160
下载插件 Beautify https://github.com/HookyQR/VSCodeBeautify Ctrl+Shift+P 搜索beautify，执行即可。
vscode编辑器设置，禁止prettier自动格式化代码，不喜勿喷
瑞朋哥的博客
03-11 2万+
{ "gitlens.advanced.messages": { "suppressCommitHasNoPreviousCommitWarning": false, "suppressCommitNotFoundWarning": false, "suppressFileNotUnderSourceControlWarning": false, "suppr...
vscode快捷键生成html页面
qq_40488847的博客
05-24 4053
vscode快捷键生成html页面直奔主题 直奔主题 为方便html文件的编写，vscode可直接通过快捷键来生成一个html页面的基本内容，即通过按“!”并且回车选中来生成。
Vscode配置设置json文件
weixin_45087659的博客
09-04 9053
{ “files.autoSave”: “off”, “vetur.format.options.tabSize”: 4, “window.zoomLevel”: 0 } // { // // vscode默认启用了根据文件类型自动设置tabsize的选项 // “editor.detectIndentation”: false, // // 重新设定tabsize // “editor.tabSize”: 4, // // #值设置为true时，每次保存的时候自动格
vscode创建一个javascript文件并运行
05-19
你可以按照以下步骤在 VS Code 中创建一个 JavaScript 文件并运行它： 1. 打开 VS Code。 2. 新建一个文件，可以通过快捷键 Ctrl + N 或者点击左上角的 File -> New File 实现。 3. 将文件保存为 .js 后缀的 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值