有了这些vscode插件,写前端代码想不快都难


初识VS Code

Visual Studio Code(以下简称vscode)是一个轻量且强大的代码编辑器,跨平台支持Windows,Mac OS X和Linux。内置JavaScript、TypeScript和Node.js支持,而且拥有丰富的插件生态系统,可通过安装插件来支持C++、C#、JAVA、Python、PHP等其他语言。

功能如此之多,不禁感叹VScode YYDS!!

起因

其实写这篇文章也是有点缘分的,前几天,帮学弟搞了一个他们老师布置的作业(啊,不得不说我也不会哈哈,热区这个东西还真就是我的盲区了),解决完他的问题之后我就问他为啥不用Vscode去写代码,一个!就能完成HTML5的格式不快吗?

然后他就说感觉Vscode不好用!!当场我就把我之前的那个插件教程给上去了,殊不知那是我几个月前水的文章,现在一看真的是太水了,我自己看都懵了。
在这里插入图片描述
上图就是我近4个月前写的文章了,自己现在看还是不是很明了,何况新手是吧,后来我就下载了一个录屏软件,来辅助这次的教程,有gif动图会显得更生动!

基础配置

好了,巴拉这么多,回归正题,下载插件!(Vscode以插件出名)

首先我们先熟悉一下Vscode的界面(刚开始上手,小白或者是说英文不好的小伙伴可能会有点懵逼)
在这里插入图片描述
上面也许还是会有新手不太懂,但是没什么关系,用着用着你就明白了,首先我们需要打开插件商店,毕竟VScode是围绕插件来进行生态的。

为了节目效果,我又一次删除了我所有插件,就连中文都删了

下载中文插件

在这里插入图片描述
这个不用多说,让Vscode的所有界面和解释都变成中文,英文好的小伙伴就不需要了吧哈哈,反正博主我就是英文不好(死记硬背)

亲笔认证:最强插件

啊,博主自己认为的,如果有异议也可以私信我噢,前端开发怎么能没有这个嘞是吧~

Live Server 实时预览

在这里插入图片描述
光说不练假把式,那么我们就来看看这个插件到底强在哪,先创建一个html文件

在这里插入图片描述
不知道小伙伴能不能看得清楚,大概就是不用刷新浏览器,只要你修改代码,然后就能实时看到网页的变化,当然实现上面的操作还需要一个设置支持,那就是自动保存

首先点击左下角的设置图标,然后再点击设置
在这里插入图片描述
当然选择哪种自动保存的办法都是看小伙伴的喜好,我习惯离开编辑器就报存,方便。

  1. off:关闭自动保存。
  2. afterDelay:当文件修改后的时间超过"Files:Auto Save Delay"中配置的值时自动进行保存
  3. onFocusChange:编辑器失去焦点时自动保存更新后的文件。
  4. onWindowChange:窗口失去焦点时自动保存更新后的文件。

自动闭合标签插件 Auto Close Tag

小伙伴应该会发现我演示的都是从零开始,因为我把插件都删除了,一起体验重新安装插件让VScode变得完善的感觉吧。

那么说到这个插件,可以说可有可无,但是多一个插件多一份舒心也是很好的,当你写了<div类似这样的代码时,那么下一刻你再输入>就会帮你闭合这个标签
在这里插入图片描述
让我们来看看演示

在这里插入图片描述

标签同步修改 Auto Rename Tag

在这里插入图片描述
这个插件可以说挺好用的,当你写错标签然后修改前面的标签时,这个插件会帮你自动将结束标签也修改了,就不用你动后面的啦,详情看演示

在这里插入图片描述

高亮代码

当你看别人或者自己写的项目时,总会遇到那种一堆括号的函数,那么如何区分对应的关系呢,这个插件对配对的括号进行着色,方便区分,未安装该插件之前括号统一都是白色的。

Bracket Pair Colorizer 用不同颜色高亮显示匹配的括号

在这里插入图片描述
下载插件前
在这里插入图片描述
下载插件后
在这里插入图片描述

TODO提示高亮显示

如果我们在编写代码时想在某个地方做一个标记,后续再来完善或者修改里面的内容,可以利用此插件高亮显示,之后可以帮助我们快速定位到需要修改的代码行。
在这里插入图片描述
说到这个插件,就来说说前端开发的一些潜规则吧
在这里插入图片描述

// TODO: + 说明

如果代码中有该注释,说明在该注释处有功能代码待编写,待实现的功能在说明中会简略说明。

// FIXME: + 说明

如果代码中有该注释,说明该注释处代码需要修正,甚至代码是错误的,不能工作,需要修复,如何修正会在说明中简略说明。

在某个地方做一个标记,后续再来完善或者修改里面的内容,这就是要高亮的原因。

让你CSS效率提高一个档次 wscats.eno

使用less必备插件,写好less能帮助你编译出css代码,less写起来比css方便快捷。
在这里插入图片描述
如下,我没有创建css文件,只是创建less然后保存之后就默认css创建在同一个文件夹下,那我们可以看看less和css的差距,为什么会说less方便。
在这里插入图片描述
转成css后显示
在这里插入图片描述
发现没有,css那些父级嵌套的处理,在less里面能够直接嵌套,这就是方便,当然还需要更改一些设置,我之前的文章就有说明啦,这里我还是引用之前的图片,但是这里会解释清楚

扩展同样是可以单独设置的,点击扩展设置
在这里插入图片描述
然后根据我这张图去修改配置
在这里插入图片描述

vscode-icons 图标美化

下载完成后,你的文件夹和文件的图标都会发生翻天覆地的变化,有些小伙伴说这个对你文章写作没啥大用,但是我相信每一个前端开发工程师都有颗爱美的心是吧
在这里插入图片描述

常用快捷命令

记住以下命令,能帮助你更高效的开发,使用快捷键可能是程序员的必修课吧!
多试多练,能记得更快噢。

编辑器与窗口管理

Ctrl+Shift+P或者 F1: 打开命令面板。

Ctrl+Shift+N: 新建窗口。

Ctrl+Shift+W: 关闭窗口。

窗口分屏:Ctrl+1/Ctrl+3/Ctrl+3

Ctrl+B:显示/隐藏侧边栏

Ctrl+"+/-":放大/缩小界面

文件操作

Ctrl+N:新建文件

Ctrl+W:关闭文件

Ctrl+Tab:文件切换

格式调整

Ctrl+C/Ctrl+V:复制或剪切当前行/当前选中内容

Alt+Up/Down:向上/下移动一行

Shift+Alt+Up//Down:向上/下复制一行

Ctrl+Shift+K:删除当前行

Ctrl+Z:撤销上一步操作

Shift+Alt+Right:选择单行


原文链接:https://blog.csdn.net/AcssGood/article/details/120350966

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值