如何让 VS Code 变成你的开发神器?

标签: java  eclipse  html  web  javascript

本文来源于:点滴前端

vscode 作为目前特别火的一款开发工具,我相信使用人数是非常庞大的。那么作为平常赖以编程的开发工具你对他了解多少呢?这篇文章的重点是 vsocde 的默认高频率快捷键,如何修改快捷键,如何自定义代码片段,如何使用 vscode 的命令工具,vscode 的 emmet 功能,使用哪些插件能够倍速提升开发效率

1. 默认高频率快捷键

这里分别整理了 mac window 对应的快捷键,方便俩类终端的用户查看

mac

window

control

window

option

alt

command

ctrl

上面可以看做是 mac 对应 window 上的按键,在大多数场景都是符合的,但也不是完全符合

描述

mac

window

文件内搜索内容

command + F

ctrl + F

文件内替换

ctrl + H

全文搜索内容

command + shift + F

ctrl + shift + F

全局搜索文件

command + P

ctrl + P

当前行上移/下移

option + ↑ / ↓

alt + ↑ / ↓

复制当前行在上方/下方

option+ shift + ↑ / ↓

alt + shift + ↑ / ↓

删除当前行

command + x(不选中内容的时候剪切

就能删除当前行)

ctrl + x

合并当前行

control + J

以单词为单位移动

option + ← / →

ctrl + ← / →

移到行首/行尾

command + ← / →

home / end

键盘多光标

option + ↑ / ↓


鼠标多光标

option + 鼠标左键

alt + 鼠标左键

选中同样的全部内容

option + shift + L

alt + shift + L

侧边栏开关

command + B

ctrl + B

控制台开关

command + J

ctrl + J

命令讲解:

合并当前行

使用合并当前行功能就可以快速的让图一变成图二的样子,这是俩种习惯,如果喜欢讲内容变成一行。这个快捷键无疑是非常爽的。

侧边栏开关 / 控制台开关

侧边栏和控制台默认情况下能够占到整个电脑的 三分之一左右的样子,在笔记本上感觉码几行字就到头了。但是侧边栏和控制台还是常用功能,你掌握了这个快捷键就可以全屏幕的敲代码,并且快速控制侧边栏和控制台显隐是非常有控制感的快捷键

全局搜索文件

这个是调用出来了 vscode 的命令菜单。在这个菜单里面你可以输入中文来执行相关命令,非常强大。他在关键时刻就不仅仅是搜索文件这么简单了。列举几种常用的操作:

输入 ? 显示如何执行各种不同的命令

其中最常用的几个分别是 term(打开命令行) , view ,  :(调整到指定行), edt(查看当前打开的标签并且提供跳转功能), 无(搜索文件,并且提供跳转功能),> (显示并运行命令)。使用起来及其简单只要这些前缀 + 空格然后输入你要做的操作即可例如:

这是跳转到第一行的第三个字符

能够看到上图中一共有三个终端,并且我还重新重名了。右边的设置就是重命名功能。

2.分屏功能

我在写代码的时候经常碰到的一个场景就是不同的文件之间进行操作,俩个文件来回切换特别麻烦。其实你熟练掌握了 vscode 的分屏操作这里能够让你爽到飞起。

从图中可以看到编辑器不仅可以分屏,连控制台也可以分屏。分屏之后就可以左边看着 html 代码,右边写 css 代码了。再也不用回头看看格式对不对了。

创建分屏快捷键是 command + \ (ctrl + \), 编辑器之间分屏切换快捷键是 command + 1 - 9(cgtrl + 1-9)

3.代码片段

平常输入一部分内容的时候按回车或者是 tab 他就能给你补全。这种功能就是代码片段,像平时用的特别多的:

log -> console.log('');

switch -> switch (key) {
case value:
break;
default:
break;} 
           
for -> for (let index = 0; index < array.length; index++) {
const element = array[index];
       }

等等,非常方便。但是这些远远不够的,像默认提供的 log 代码片段就不能够满足我的需要。这个时候自定义代码片段就特别重要了,而自定义代码片段是非常简单的。像控制补全时候光标所在的位置、多光标同时修改内容、tab 键之后的下个位置是非常常见的操作,看我三言俩语带你掌握

1. command + p(ctrl + p) 打开命令菜单

2. 输入 “> 代码片段” 下方只有一个选项 首选项: 配置用户代码片段,默认是直接选中的,回车即可。

3.选择新建全局代码片段,回车

4.输入文件名称,例如 js 代码片段,回车就会打开一个新的文件。里面的内容是按照 json 格式输入的。

5. 将文中的例子打开,无用的注释去掉,有用的注释打开。得到下面这样内容的一个文件

可以看到最外面是一个对象,里面只有一个名为 "Print to console" 的属性。一个属性就代表一个代码片段。现在先给你讲讲文中的这个代码片段。

  • scope : 设置作用文件,可以扩展 vue,html

  • prefix:触发代码片段的前缀

  • body:代码片段主体。其中的 $1,$2 为按 tab 键光标依次移动的位置,俗称占位符,${1:label}。这样就是留有默认值 label。想要多光标就写入数字相同的占位符,例如把 $2 改为 $1 试试

  • description:描述这个代码片段的作用,一般用不到,提示信息用最外面的属性即可

下面我将上面的改造一下,顺便再加一个:

下面是我输入前缀的提示,是不是非常简单。

4.emmet 功能

你要是连这个都没听过,赶紧关注我。因为这是能让你敲代码提高十倍效率的东西

上图中的代码结构是不是很常见,其实比这复杂的也多的是呢。然后我让你一句话打印出来

div.parent>div.childern-first+div.children-two>ul>li*$4

上面的这句话就能够变成图中的样子。你可以复制到你的 vscode 中把最后面的 4 删掉然后重新输入 4 再按 tab 就能看到效果。

这种大段的使用场景多用于第一次作图,左边放着 UI 图右边是你的编辑器。看着 UI 图中的某一个模块一口气把整个结构打印出来,然后在使用多编辑器功能,看着 UI 图和 HTML 结构图把样式一次搞到位,真的舒服到不行啊。这么神奇的东西怎么用呢,其实要点很简单。看我三言俩语带你飞。

1.知道如何生成子标签、同级标签、父标签同级标签的关键符号。>(子标签), +(同级标签) , ^ (父标签的同级标签)。例如:

div>p+p^div 可描述为 div 有子标签 p ,p 有同级标签 p,p 还有个父级标签的同级标签 div

2.如何给一个元素设置属性、值。属性用中括号[],需要多加注意的是 class , id 这俩个属性可以用 . 和 # 的简写形式。值用{}。例如:

div.abc[title=666 index=1]{123} 可描述为: div 的 class 为 abc。定义了俩属性是 title = "666", index = "1" , 值为 123

div.abc.efg.ccc 可描述为 div 的 class 为 abc efg ccc

3.重复某个标签多次用 * 。例如:

div*5 可描述为 生成 5 个 div 标签

4.迭代值用 $,迭代值在支持的好的 emmet 插件中还能实现更多操作。不过比较小众,就不介绍了。例如:

div.abc$*5 可描述为生成 5 个div 标签并且 class 值依次 为 abc1,abc2...abc5

5.添加括号()遍历一组标签,例如:

(ul>li*2{$})*2 可描述为生成俩组 ul>li*2{$}, 去掉括号的可描述为 ul 下面有 2 个子标签 li 值分别为 1, 2

更多功能可以查看这篇文章:

https://www.cnblogs.com/summit7ca/p/6944215.html

5. css 的缩写方式

这个写的文章比较少,我也是自己再输入的时候发现的一些小技巧,但是用起来真的非常舒服。

数值的单位标签可以用 首字母 + 数值 + 单位的方式(默认单位是 px )。例如:

p10 -> padding: 10px;
pl10 -> padding-left: 10px; 其他三个方向只要把 l 改成 top 的 t 
,right 的 r,bottom 的 b即可
m10 ->margin:10px;
ml10 -> margin-left: 10px;
t10 -> top: 10px;
f10 -> font: 10px;
fw500 ->font-weight: 500;
h10px -> height: 10px;
w10 -> width: 10px;

6.常用的插件

好用的插件是数不胜数的,这里我只列举一些没有了我就难受的要死的插件

1.Auto Rename Tag 自动同步双标签

2.Chinese 语言汉化

3. ESLint

这个插件需要组合使用,项目必须要支持 eslint 格式化才行,然后将代码保存变为失去焦点保存,所以不符合 eslint 格式的代码自动变成符合 eslint 格式的代码爽到怀疑人生

4.Open in Browser

html 文件中右键可以选择直接使用浏览器打开

5.Path Intellisense

路径匹配

6.vuter

因为我是 vue 重度使用者,没这个插件连个高亮都没有,没有真的不行

7.live-server

这个不是 vscode 插件,可以直接用  npm -g live-server 安装。

开启一个服务,专门用于手机访问静态资源

好用的插件远远不止这一些,像 svg 查看,导入的包大小显示,git 提交的代码提示。但是我在使用的过程中感觉也是可有可无的,也就是普适性不是特别广。如果你有缺少就没法工作的插件欢迎评论留言

总结

vscode 的功能远不止这些,还有很多有趣的东西。但是碍于文章的篇幅,以及普适性并不适合拿出来说。如果你有什么需要补充的,还是那句话欢迎留言。

Jupyter Notebook使用入门教程

教你一些IDE中比较骚的操作技巧!

精选一款功能强大的轻量级工具

通过技术手段,程序员发现自己被绿了!

精选整理 | 高质量推文目录整理分享

长按加入10W+朋友的IT圈

记得点击「在看」,然后转给你身边的人。

版权声明:本文为itcodexy原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/itcodexy/article/details/109573651

智能推荐

堆排序

堆排序就是利用堆进行排序的方法,基本思想是,将代排序列构造成一个大根堆,此时整个序列的最大值就是堆顶的根节点。将它与堆数组的末尾元素交换,此时末尾元素就是最大值,移除末尾元素,然后将剩余n-1个元素重新构造成一个大根堆,堆顶元素为次大元素,再次与末尾元素交换,再移除,如此反复进行,便得到一个有序序列。 (大根堆为每一个父节点都大于两个子节点的堆) 上面思想的实现还要解决两个问题: 1.如何由一个无...

基础知识(变量类型和计算)

一、值类型 常见的有:number、string、Boolean、undefined、Symbol 二、引用类型 常用的有:object、Array、null(指针指向为空)、function 两者的区别: 值类型暂用空间小,所以存放在栈中,赋值时互不干扰,所以b还是100 引用类型暂用空间大,所以存放在堆中,赋值的时候b是引用了和a一样的内存地址,所以a改变了b也跟着改变,b和a相等 如图: 值...

Codeforces 1342 C. Yet Another Counting Problem(找规律)

题意: [l,r][l,r][l,r] 范围内多少个数满足 (x%b)%a!=(x%a)%b(x \% b) \% a != (x \% a) \% b(x%b)%a!=(x%a)%b。 一般这种题没什么思路就打表找一下规律。 7 8 9 10 11 12 13 14 15 16 17 18 19 20 28 29 30 31 32 33 34 35 36 37 38 39 40 41 49 50...

[笔记]飞浆PaddlePaddle-百度架构师手把手带你零基础实践深度学习-21日学习打卡(Day 3)

[笔记]飞浆PaddlePaddle-百度架构师手把手带你零基础实践深度学习-21日学习打卡(Day 3) (Credit: https://gitee.com/paddlepaddle/Paddle/raw/develop/doc/imgs/logo.png) MNIST数据集 MNIST数据集可以认为是学习机器学习的“hello world”。最早出现在1998年LeC...

猜你喜欢

哈希数据结构和代码实现

主要结构体: 实现插入、删除、查找、扩容、冲突解决等接口,用于理解哈希这种数据结构 完整代码参见github: https://github.com/jinxiang1224/cpp/tree/master/DataStruct_Algorithm/hash...

解决Ubuntu中解压zip文件(提取到此处)中文乱码问题

在Ubuntu系统下,解压zip文件时,使用右键--提取到此处,得到的文件内部文件名中文出现乱码。 导致此问题出现的原因一般为未下载相应的字体。 解决方案: 在终端中使用unar命令。 需要注意的是系统需要包含unar命令,如果没有,采用如下的方式解决: 实例效果展示: 直接提取到此处: 使用 unar filename.zip得到的文件...

centos7安装mysql8.0.20单机版详细教程

mysql8.0之后与5.7存在着很大的差异,这些差异不仅仅表现在功能和性能上,还表现在基础操作和设置上。这给一些熟悉mysql5.7的小伙伴带来了很多困扰,下面我们就来详细介绍下8.0的安装和配置过程。 mysql在linux上的多种安装方式: 1.yum安装 由于centos默认的yum源中没有mysql,所以我们要使用yum安装mysql就必须自己指定mysql的yum源。在官网下载mysq...

Python自学记录——调用函数和定义函数

对于函数,我的理解是 抽象的方法。你不需要它是内部结构是什么样子的,只要遵从它给你的规则来使用,就能得到想要的效果。 调用函数 在 Python 中,有很多内置的函数供我们调用,常用的函数如下: help(obj) 帮助,解释传入的obj type(obj) 查看传入obj的类型 callable(obj) 查看obj是否可以像函数被调用 isinstance(obj,cls) 查看obj的数据类...

透视遮罩Shader

Unity的透视遮罩Shader 介绍 shader 效果 资源下载 介绍 一个透视遮罩的Shader,及其材质球,会按照模型的UV方向产生透视效果。 shader 效果 里面有个UV从里面向外的球形模型,添加入材质球之后,在球内部向外看时,则会透视球外部的所有3D物体,直接看到天空盒。 一般状态下的场景: 透视遮罩下的场景: 资源下载 资源链接:https://download.csdn.net...