• 如何使你的vscode更好用
  • Artiely
  • #vscode
  • 2020-03-16
  • 139
  • 1 min read
  • loading...

如何使你的vscode更好用

VS Code 写代码是真好用、真爽、真香!

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


但是呢,VS Code 并不是像 PyCharm/WebStorm 那样开箱即用的,需要额外安装一些插件、掌握一些快捷键和技巧,才能顺手的用起来。

我花了一点时间,为你整理了可能是前端超好用的插件,效率加倍。

推荐插件

汉化 VS code

安装之后一秒汉化 VS code ,再也不用担心看不懂英文。

图片预览

光标悬浮在图片路径上时,显示图片预览,这样我们在敲代码的时候一下子就能知道有没有引用了正确的图片或图标。

彩虹缩进

写代码的时候,能提示我们的缩进是否到位,每步交替四种不同的颜色,没有到位的话颜色变红,看着代码整整齐齐的就很舒心。

代码分享

可以把代码保存成美观的图片,主题不同,代码配色方案也不同,也可以自己设置边框颜色、大小、阴影,在教程或者文档中提供代码示例时挺有用的

ctrl+shift+p
//然后输入polaceode
复制成功
1
2

实时预览

他会启用一个本地node服务托管你的资源,点击go Live选择你要访问的资源

快捷键

这个可以根据自己的习惯和喜好来决定,只需要是插件市场输入keymap就可以出来所有编辑期的快捷键,选择你习惯的就ok了

样式转定义

ctrl+样式名就可以看到定义的样式,点击就可跳转到定义的位置

如果是vue可以安装

颜色突出

高亮js,css里的颜色值,让你一目了然

括号高亮

突出你的括号让你一目了然你的代码块

代码美化

用prettier格式美化代码

配置同步

可通过github登录同步你的配置和插件

主题配置

主题是很主观的选择在市场输入theme即可试用还是图标主题加入icon关键词即可

快捷console

调试避免不了打印变量,我们只需要选择对应的变量 ctrl + alt + L 即可输出一句console.log

待办高亮

工作中难免遇到一些未完成的待办事项 可以通过写注释的形式提醒自己

引入体积

可以让你知道引入的体积大小,调整引入使代码体积更小


优化引入后,一目了然

待续.