VSCode使用介绍

最新推荐文章于 2024-04-29 00:18:14 发布

qq_41306610

最新推荐文章于 2024-04-29 00:18:14 发布

阅读量427

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_41306610/article/details/108264536

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1 安装下载在此不多说了，网上有很多。

2 打开后打开一个写好的file。我打开的是test.html

3 代码如下，利用CSS的一个动画效果：（也可以使用txt文本改造，直接打开，这是完成的代码）

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>動起來</title>
	<!--
		1. 在当前行中间换行到下一行：ctrl+enter
		2. 当光标点击到某一行时，默认选中全行，可以直接复制剪切
		3. 直接删除某一行：shift+delete或者ctrl+shift+k
		4. 多行光标选择：alt+鼠标左键
		5. 跳转行号：ctrl+G
		6. 格式化：alt+shift+f
		7. Ctrl+/ 注释  
	    8. 向上移动一行：alt+↑
        9. 向下移动一行：alt+↓
        10. 向上复制一行：alt+shift+↑
		11. 向下复制一行：alt+shift+↓	
		12. 查找：ctrl+F
		13. 替换：ctrl+H
		14. 文件中查找：ctrl+shift+f
		15. 打开文件夹： ctrl+o
		16. 转到定义：F12
        17. 转到实现：ctrl+F12
	-->
	<style>
		.banner {
			width: 50px;
			height: 20px;
			background: red;
			position: relative;
			animation: mymove 10s infinite;
			-webkit-animation: mymove 10s infinite;
			/* Safari and Chrome */
		}

		@keyframes mymove {
			0% {
				background: red;
				left: 0px;
				top: 0px;
			}

			25% {
				background: yellow;
				left: 200px;
				top: 0px;
			}

			50% {
				background: blue;
				left: 200px;
				top: 200px;
			}

			75% {
				background: green;
				left: 0px;
				top: 200px;
			}

			100% {
				background: red;
				left: 0px;
				top: 0px;
			}
		}

		@-webkit-keyframes mymove {



			0% {
				background: red;
				left: 0px;
				top: 0px;
			}

			25% {
				background: yellow;
				left: 200px;
				top: 0px;
			}

			50% {
				background: blue;
				left: 200px;
				top: 200px;
			}

			75% {
				background: green;
				left: 0px;
				top: 200px;
			}

			100% {
				background: red;
				left: 0px;
				top: 0px;
			}
		}
	</style>
</head>

<body>
	<div class="banner">

		<p><strong>动起来</strong></p>
		<h1></h1>

		<div>

</body>

</html>

4 一些实用的快捷键

1. 在当前行中间换行到下一行：ctrl+enter
       2. 当光标点击到某一行时，默认选中全行，可以直接复制剪切
       3. 直接删除某一行：shift+delete或者ctrl+shift+k
       4. 多行光标选择：alt+鼠标左键
       5. 跳转行号：ctrl+G
       6. 格式化：alt+shift+f
       7. Ctrl+/ 注释
   8. 向上移动一行：alt+↑
9. 向下移动一行：alt+↓
10. 向上复制一行：alt+shift+↑
       11. 向下复制一行：alt+shift+↓
       12. 查找：ctrl+F
       13. 替换：ctrl+H
       14. 文件中查找：ctrl+shift+f
       15. 打开文件夹： ctrl+o
       16. 转到定义：F12
17. 转到实现：ctrl+F12

5 利用VSCode使用浏览器打开：

在扩展栏的搜索栏中输入open in browser，找到open in browser这款插件，点击右下角“安装”字样即可安装（我截图的时候已经安装好了，所以是个齿轮）。

6 .安装完成后可以看一下这款插件的扩展文档，里面有插件的各种信息，及插件的使用方式等。

7两种打开方式

1）在test.html 页面使用 Alt + B 就直接使用浏览器打开了此文件

2）在test.html 页面右键

结果如下

8 设置默认浏览器：

进入下路径

输入open-in-browser.default 写入Chrome 默认浏览器就是谷歌了

qq_41306610

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
VSCode使用介绍

1安装下载在此不多说了，网上有很多。2打开后打开一个写好的file。我打开的是test.html3代码如下，利用CSS的一个动画效果：（也可以使用txt文本改造，直接打开，这是完成的代码）<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>動起來</title> <!-- 1. 在当前行中间换行到下一行：ctrl+enter ...
复制链接

扫一扫

专栏目录