hi,你好!欢迎访问本站!登录
本站由网站地图腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 教程 - 开发工具 - 正文 君子好学,自强不息!

让 VSCode 更好用10倍的小技能(新手指南)_编程开发工具

2020-09-15开发工具搜奇网4°c
A+ A-

相干引荐:《vscode基础教程》

“VS Code 写代码是真好用、真爽。”

想必你也已听过身旁不止一个人这么说。近来的 JS 2019 报告中,VS Code 也是以压倒性的上风得胜第一,其他的编辑器只能被无情碾压在地上磨擦……

JS 2019 报告

然则呢,VS Code 并非像 PyCharm/WebStorm 那样开箱即用的,须要分外装置一些插件、控制一些快捷键和技能,才随手的用起来。

我们花了一周的时刻,为你整顿了多是最全的 VS Code 新手指南,分为快捷键速查表、10个超好用插件、新手运用教程三部份,让小白也能疾速上手、效力更加。

● 快捷键速查表

先上两张我们整顿的 VS Code 经常使用快捷键的速查表:

Mac 快捷键 Windows/Linux 快捷键

快捷键用熟了,才发明 VS Code 有多轻易。真正的大神写起代码来那是手不离键盘。

● 10个超好用插件

Chinese(Simplified) Language Pack for Visual Studio Code[1]

‍ Microsoft

3,358,698 下载量


装置以后一秒汉化 VS code ,再也不必忧郁看不懂英文。


City Lights theme[2]

‍ Yummygum

54,054 下载量

这是一个不错的主题插件,不过遴选主题照样看个人,也能够在直接搜刮 “theme”能获得许多主题,找到适宜本身的。

Beautify[3]

‍ HookyQR

3,998,071 下载量

能够放大标记,调解代码间距,疾速格式化代码,能够让芜杂的 HTML、CSS、JS代码霎时变得整洁,利于别人浏览,也轻易后期保护。

vscode-icons[4]

‍ VSCode Icons Team

4,237,487 下载量

设置文件图标,依据各种范例的文件,设置对应的文件图标,我们看文件列表的时刻,一览无余,能疾速找到须要的文件(特别是文件多,范例也多的时刻)。

Image preview[5]

‍ Kiss Tamás

123,990下载量

光标悬浮在图片途径上时,显现图片预览,如许我们在敲代码的时刻一会儿就可以晓得有无引用了准确的图片或图标。

Code Spell Checker[6]

‍ Street Side Software

970,955下载量

我们一样平常敲代码许多定名都是运用英文单词,大意的小伙伴可能会拼错,这个插件就是单词拼写错时的挽救神器,它能够标志错的单词,还能够提醒单词的准确拼法。有了它,就再也不必由于单词拼错找半天的 bug 了

Live Server[7]

‍ Ritwick Server

3,551,236下载量

做前端开发的时刻,我们须要翻开浏览器举行预览和调试页面。这个插件就可以够完成静态、动态页面的及时预览,保留就可以瞥见页面更新,不须要手动去革新。

indent-rainbow[8]

‍ oderwat

567,061下载量

写代码的时刻,能提醒我们的缩进是不是到位,每步交替四种差别的色彩,没有到位的话色彩变红,看着代码整整洁齐的就很舒心。

Rainbow Brackets[9]

‍ 2gua

367,290下载量

为圆括号,方括号和蜿蜒的括号供应彩色;雷同色彩示意雷同级别的括号,伶仃的右括号以赤色凸起显现,对写 JavaScript 的人比较有效。

Polacode-2019[10]

‍ Jeff Hykin

4,704下载量

能够把代码保留成雅观的图片,主题差别,代码配色计划也差别,也能够本身设置边框色彩、大小、暗影,在教程或许文档中供应代码示例时挺有效的。

● VS Code 新手运用教程

① 装置 VS code

VS Code 官方下载地点:https://code.visualstudio.com

依据本身的电脑下载对应的版本,然后装置即可。


② 进入 VS code

界面上分为这几个部份,先团体了解下每一个部份是做什么的


③ 装置 VS Code 插件

上面提到的超好用的插件,在这里就可以够装置。


④ 入手下手写代码

首先在本身的电脑新建一个文件夹

然后在 VScode 内里翻开这个文件夹,也能够按快捷键 (Command /Ctrl+ O)

新建文件(Command/Control + N),要写后缀名,VScode 才辨认出来是什么范例的文件。


⑤ 入手下手运转代码

编辑代码,保留,用的是上面引荐的 Live Server 插件预览,装置插件后,右键挑选 " Open with Live Server "翻开或点击右下角的 "Go Live"

● 写在末了

这篇干货总结写了良久,也是想把关于 VS Code 你应当晓得的一切都在这一篇文章里通知你。

假如你也感觉到了 VS Code 的壮大,就赶在 2020 年之前尽快用起来吧!

哪怕对你们有一点点协助,我就很高兴啦

参考

  • ^汉化包插件地点 https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans

  • ^City Lights theme https://marketplace.visualstudio.com/items?itemName=Yummygum.city-lights-theme

  • ^Beautify https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify

  • ^vscode-icons https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

  • ^Image preview https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview

  • ^Code Spell Checker https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

  • ^Live Server https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

  • ^indent-rainbow https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

  • ^Rainbow Brackets https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets

  • ^Polacode https://marketplace.visualstudio.com/items?itemName=jeff-hykin.polacode-2019

更多编程相干学问,请接见:编程入门!!

以上就是让 VSCode 更好用10倍的小技能(新手指南)的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  移步手机端
让 VSCode 更好用10倍的小技能(新手指南)_编程开发工具

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

本文来源:搜奇网

本文地址:https://www.sou7.cn/300741.html

关注我们:微信搜索“搜奇网”添加我为好友

版权声明: 本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。请记住本站网址https://www.sou7.cn/搜奇网。