VSCode常用插件-快捷键-常用技巧---实用分享

最新推荐文章于 2023-11-17 10:55:01 发布
最新推荐文章于 2023-11-17 10:55:01 发布
阅读量369 收藏 9
点赞数 5
分类专栏： 分享 开发工具 干货 文章标签： 开发工具 javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44070254/article/details/116091809
版权
分享 同时被 3 个专栏收录
10 篇文章 2 订阅
订阅专栏
干货
7 篇文章 0 订阅
订阅专栏
开发工具
2 篇文章 0 订阅
订阅专栏

文章目录

前言

vscode之所以被称为宇宙第一神器，其中丰富的插件功不可没，安装起来超级简单，给我们开发带来了极大的便捷。 注意，新手学习期间，不建议安装形形色色的插件，用到啥就安装啥。因为有些插件会到vue学习的时候引起冲突，这里给大家分享一些关于VSCode的使用插件和方法.

关于上篇的VSCode的插件推荐，有兴趣的可以参考：

https://blog.csdn.net/weixin_44070254/article/details/116023535?spm=1001.2014.3001.5501

一、VSCode常用的插件

  1. Chinese (Simplified) 汉化

  2. Auto Rename Tag

  3. One Dark Pro 颜色主题

  4. 格式化代码（vscode系统自带）

  5. open in browser 浏览器预览页面

  6. Live Server 实时预览（推荐）

  7. vscode-icons 设置文件图标主题

  8. Easy LESS 编译less文件

  9. 会了吧 学习单词插件 （可以使用）

1.Chinese (Simplified)

vscode下载完毕是英文版的，先安装这个插件，改为中文版，所以是我们第一个安装的插件。

在这里插入图片描述

2.Auto Rename Tag

修改开始标签，结束标签跟着自动变化，比较好用。

在这里插入图片描述

3.One Dark Pro 颜色主题

我比较喜欢的一个颜色主题

在这里插入图片描述
页面的效果：

在这里插入图片描述

4.格式化代码（vscode系统自带）

现在格式化代码的插件非常多，比如Prettier等等。

刚开始学，不太建议安装插件，先自己手写规范的语法格式

但是html标签嵌套比较多，可能需要自动格式化比较好，所以我们可以利用vscode自动的功能格式化代码，暂且不用格式化插件，自动保存照样能格式化代码。
（1） 点击管理按钮—选择里面的设置命令

在这里插入图片描述

（2）选择用户 —> 文本编辑器 —> 正在格式化 —> 勾选如下图的2个按钮

在这里插入图片描述
这样，我们不用安装插件，就可以自动保存自动格式化代码了。

5.open in browser 浏览器预览页面

编写完代码，需要浏览器预览，可以安装这个插件

在这里插入图片描述
在这里插入图片描述

6. Live Server 实时预览（推荐）

刚才的插件是可以预览我们的页面，但是改完代码，浏览器必须要重新刷新，比较麻烦，因此推荐各位小伙伴安装 live server 这个插件，修改完代码，自动更新浏览器

在这里插入图片描述
小技巧：

刚开始学习前端，基本页面很少，可以左边编辑器，右边浏览器，这样编写完毕代码，保存完毕后，浏览器自动更新了。

在这里插入图片描述
注意点：

使用live server 各位小伙伴要注意， 先用vscode 打开 文件所在的目录文件夹

在这里插入图片描述

7. vscode-icons 设置文件图标主题

可以很清楚看到文件对用的图标。

在这里插入图片描述
在这里插入图片描述

8. Easy LESS 编译less文件

我们写的less不能直接引入到html文件中， 通过这个插件可以自动帮我们生成 css文件

在这里插入图片描述

9. 会了吧

是的，你没看错，这个插件的名字就是 <会了吧>

你是不是还在为英文单词不认识而发愁，是不是认识不会读而烦心， 这个插件你值得拥有。

在这里插入图片描述
里面会有单词介绍，点击还会有发音，喜欢吧。

在这里插入图片描述

二、VSCode常用的快捷键

注意，其实这个快捷键都是可以自定义的，为了防止自定义快捷键和默认冲突我，先熟悉默认的，后期熟悉可以自定义更改。

1. 快速复制一行

快捷键： shift+alt+ 下箭头(上箭头) 或者 ctrl+c 然后 ctrl+v

在这里插入图片描述

2.选定多个相同的单词

快捷键： ctrl + d

先双击选定一个单词，然后按下 ctrl + d 可以往下依次选择相同的单词。 这样同时修改相同的单词就非常方便

在这里插入图片描述

3. 添加多个光标

快捷键： Ctrl + Alt + 上箭头(下箭头)

在这里插入图片描述

4. 全局替换某写单词

当我们一个页面需要修改大量相同的文字的时候，我们一个的修改超级麻烦，此时我们可以使用全局替换

快捷键： ctrl + h 注意选择全部替换即可

在这里插入图片描述

5. 快速定位到某一行

当我们页面比较长的时候，上下滚动页面布方便，其实我们可以利用快捷键，快速的调到指定的行数上。

快捷键： ctrl + g

在这里插入图片描述

6. 选择某个区块

可以选择一个区块进行操作

快捷键： 按住shift + alt 然后拖动鼠标

在这里插入图片描述

7. 放大缩小整个编辑器界面

快捷键： ctrl + + / - ctrl + 加号或者减号

在这里插入图片描述

8. 自定义快捷键

有些快捷键，我们使用不习惯，其实我们可以自定义快捷键的。

比如js 的多行注释是 shift + alt + a ，我们想修改为 ctrl + shfit + /

设置方法： 管理按钮 — 键盘快捷方式 — 输入 shift + alt + a 找到这个快捷键 ----- 点击编辑按钮 ---- 直接按下 ctrl + shift + / ---- 最后按下回车 修改完毕。

在这里插入图片描述

总结

好了，这里只是介绍几个常用的快捷键，各位有兴趣的可以参考使用。 更多分享可以去链接参考：

关于上篇的VSCode的插件推荐：

https://blog.csdn.net/weixin_44070254/article/details/116023535?spm=1001.2014.3001.5501

JavaScript编程基础练习题—干货分享：

https://blog.csdn.net/weixin_44070254/article/details/116070003?spm=1001.2014.3001.5501

更多实际开发案例点击跳转主页：

https://blog.csdn.net/weixin_44070254?spm=1000.2115.3001.5343

贪吃ღ大魔王
关注
  • 5
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
PyCharm 和 VSCode 必备的常用快捷键，让你的编程效率翻倍！
leyang0910的博客
11-29 1593
本文将介绍 PyCharm 和 VSCode 中的常用快捷键以及一些实用技巧，帮助读者更好地使用这两个编辑器。作为现代编程工具的代表，PyCharm 和 VSCode 无疑是最受欢迎的代码编辑器之一。它们的强大功能和高效操作方式让开发者们能够更快地编写代码，提高工作效率。本文将介绍 PyCharm 和 VSCode 中的常用快捷键以及一些实用技巧，帮助读者更好地使用这两个编辑器。
分享几个个人觉得好用的Vscode插件以及快捷键
qq_41239398的博客
03-28 1833
前端开发所用到的vscode的插件和快捷键： 一 插件 1、Chinese //中文包 2、emmet //实现快捷键 快速搭建一个网页布局 3、JavaScript（ES6） // JavaScript 自动补全功能 4、Element UI Snippets //自动补全elementUI 快捷方式 tab 5、debug for chorm ...
ubuntu 环境下 vscode 前端开发环境插件配置 Color Picker 配置
poiser的博客
02-24 4346
VS Code Version: 1.42.1 OS Version: Ubuntu 18.04 Browser Version: chrome Version 74.0.3729.108 (Official Build) (64-bit)   最近在学习前端，那么自然是需要一个好用开发环境，这里用的是vscode，首要的是安装一些好用的插件，多数插件都很容易安装，少数两个有点麻烦，不多说了...
VSCode 常用快捷键与插件
Stan的专栏
11-28 8354
command + B : show left pane or hide it; ctrl + ~ : show or hide terminal; command + shift + F : 在左边pane中搜索； command + P : 搜索某个文件并可以打开它，此时预览模式，如果想要编辑该文件应该hit 右箭头（->）即快速导航到某一个文件； command + P + : ：输入一个数
PyCharm 和 VSCode 中的常用快捷键以及一些实用技巧
最新发布
2301_76161259的博客
11-17 213
作为现代编程工具的代表，PyCharm 和 VSCode 无疑是最受欢迎的代码编辑器之一。它们的强大功能和高效操作方式让开发者们能够更快地编写代码，提高工作效率。本文将介绍 PyCharm 和 VSCode 中的常用快捷键以及一些实用技巧，帮助读者更好地使用这两个编辑器。需要最新专业版PyCharm永久使用权限的扫码免费获取，还剩最后几个名额。
开发工具-vscode 使用技巧
xiaoliizi的博客
06-01 2820
关于 vscode 的一些使用技巧
macOS版VSCode实用技巧，巧用快捷键，让你的编码飞起来
一束尘光的技术分享
10-23 1322
VSCode实用技巧，巧用快捷键和插件，让你的代码飞起来
vscode配置和快捷键
热门推荐
Shanks
12-22 2万+
以下内容转载自https://www.cnblogs.com/qianguyihao/archive/2019/04/18/10732375.html 本文的最新内容，更新于 2020-06-19。大家完全不用担心这篇文章会过时，因为随着 VS Code 的版本更新和插件更新，本文也会随之更新。 本文的最新内容，也会在GitHub上同步更新，欢迎 star。 VS Code 软件实在是太酷、太好用了，越来越多的新生代互联网青年正在使用它。 前端男神尤雨溪大大这样评价 VS Code： .
VSCode常用快捷键大全｜VSCode高级玩家宝典之第一篇
三钻 - 之前端到全栈之路
04-19 1万+
所以对于个好的程序员，一个好的代码编辑器可以起到很大的作用，在开发的过程中可以给我们带来很多便利、帮助、效率和影响。甚至一个好的编辑器可以给开发者日常编程中带来更高的喜悦感。
vscode常用快捷键-实用插件分享.pptx
01-08
VSCode 快捷键和实用插件分享 VSCode 是微软出品的一款轻量级代码编辑器，免费、开源且功能强大。它提供了丰富的快捷键和插件，帮助开发者提高编码效率和体验。下面是 VSCode 的一些常用快捷键和实用插件。 VSCode...
Photoshop常用快捷键-个人整理.pdf
11-16
Photoshop常用快捷键-个人整理.pdf
vscode-plugin-swimming:vscode插件。模拟写代码，划水，摸鱼神器
05-06
vscode-plugin-swimming VSCode模拟写代码，划水，摸鱼神器。代码写的快，提早完工被压榨怎么办？你需要一个模拟写代码工具，让代码自己重写一遍。当然也可以用来CodeReview做酷炫的效果让团队其他人猜猜后面的代码...
天正建筑CAD快捷键-较全+常用.doc
11-29
今天，我们将详细介绍天正建筑CAD快捷键大全，包括F快捷键、CTRL快捷键和常用命令。 一、F快捷键 F快捷键是天正建筑CAD中最常用的快捷键之一。下面列举了一些常用的F快捷键： * F1: 获取帮助 * F2: 实现作图窗和...
JavaScript编程基础练习题---干货分享
贪吃ღ大魔王
04-23 7558
文章目录一、js的基本类型1. 为抵抗洪水，战士连续作战89个小时，编辑计算共多少天零多少小时？2. 小明要到美国旅游，可是那里的温度是以华氏度为单位记录的，他需要一个程序将华氏度温度(80度)转换为摄氏度，并以华氏度和摄氏度为单位分别显示该温度。(提示:摄氏度与华氏度的转换公式为:摄氏度 = 5/9.0*(华氏度-32) 保留3位小数)3. 705、816用js代码计算两个数字的个位、十位、百位相加的和二、逻辑分支、基础语句等1.输入一个月份返回这个月有多少天2.输入一个年份/月份/日期返回这个日期是这一
前端必备工具大全------强推！！！
贪吃ღ大魔王
04-26 4569
文章目录前言一.前端代码编辑器 VScode （宇宙第一神器） ★★★★★二. chrome浏览器 ★★★★★三. PS 软件以及插件 ★★★四. Adobe Fireworks CS6 Ansifa精简版 ★★五. 马克曼 ★★★六. 截图软件 Snipaste ★★★★★七. 绘图工具 designer ★★★★★八. X-mind 思维导图软件 ★★★★★九. Typora 编写MD笔记 ★★★★★十. git 版本控制工具 ★★★★★十一. node ★★★★★十
js关于所有循环的逻辑练习题（供初学者内部消化）-----------------系列文章（一）
贪吃ღ大魔王
04-25 1587
系列文章目录 js关于所有循环的逻辑练习题（供初学者内部消化）--------------------------------------系列文章 . https://editor.csdn.net/md?not_checkout=1&articleId=116136381 文章目录系列文章目录前言题目1：求1~100的和？题目2. 求阶乘题目3. 折纸：折多少次和珠穆朗玛峰一样高题目4. 羽毛球拍15元，球3元，水2元。200元每种至少一个，有多少可能题目5. 公鸡2文，母鸡1文，小鸡半文，每
nodejs：0到1的冲刺，毕业小白到公司大佬的逆袭之路，到底学了哪些？
贪吃ღ大魔王
06-28 944
nodejs基础 概念 Node.js 是一个开源与跨平台的JavaScript运行时环境。它是在浏览器外运行，它是一个事件驱动异步I/O单进程的服务端JS环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。 注意： nodejs实现了js代码在浏览器外执行，所以在nodejs中无法运行DOM和BOM的代码 nodejs中除了ECMAScript代码外，还内置了很多其他API nodejs让js在写前端代码的基础上，可以写后端代码，因为nodejs可以构建服务器
"Photoshop-CC常用快捷键及工具总结
总之，Photoshop-CC常用快捷键的掌握是设计师、摄影师和艺术家们必备的基本技能，可以帮助他们更高效地完成各种图像处理和编辑工作。通过熟练使用这些快捷键，可以大大提高工作效率，节约时间成本，实现更加出色的...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

贪吃ღ大魔王

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值