热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

【神器】vscode常用插件与配置

背景前端开发现在最火的编辑器当属VSCode了,其中丰富的插件应用可以帮助提高我们的开发效率和拓展编辑器的能力。前几天因为macpro有一批电脑硬盘有问题࿰

背景

前端开发现在最火的编辑器当属VSCode了,其中丰富的插件应用可以帮助提高我们的开发效率和拓展编辑器的能力。 前几天因为mac pro有一批电脑硬盘有问题,于是便重新换了硬盘,导致之前安装的app及所有相关配置都需要重新装一遍,借此机会也总结下我安装的插件应用及配置

常用插件

主题类

介绍两款比较受欢迎的主题,更换主题的方法

  1. Atom One Dark Theme
  2. Dracula Official 切换主题的方法

编程工具类

  1. Auto Close Tag: 自动补齐html便签
  2. Auto Rename Tag: 当你修改标签名时,会同时更改初始和结束标签
  3. Babel ES6/ES7: 高亮ES6/ES7语法
  4. Beautify: 美化Javascript, JSON, CSS, Sass, and HTML
  5. Bookmarks: 为需要的代码行做记录,并支持直接跳转
  6. Bracket Pair Colorizer: 当代码嵌套太多时,不同组[]/{}等符号具有不同的颜色,便于区分同组符号
  7. CSS Peek: 标签中设置的class,支持直接跳转到对应css区域
  8. EditorConfig for VS Code: 定义和维护代码风格(行尾结束符、缩进风格等),,参考链接
  9. ES7 React/Redux/GraphQL/React-Native snippets: 提供语法快捷方式
  10. filesize: 在编辑器底部的状态栏中会展示当前编辑文件的size大小,点击具体大小值会展示具体信息
  11. Git History: 查看文件、某一代码行的git更改历史
  12. Git History Diff: 也是用来查看文件、某一代码行的git更改历史,同时可以切换具体某次提交,查看所有文件的diff(个人觉得比Git History使用更加方便,功能也更加强大)
  13. Import Cost: 展示引入的依赖包的大小
  14. Markdown All in One: markdown语法的快捷方式
  15. Markdown Preview Enhanced: 增加markdown文件的预览功能,可以实时查看效果
  16. minapp: 微信小程序标签、属性的智能补全(支持原生小程序、mpvue 和 wepy 框架)
  17. npm Intellisense 智能import已安装的npm pkg,显示的pkg为package.json中dependencies中的依赖
  18. open in browser: 针对html文件,支持右键打开浏览器浏览
  19. Path Autocomplete: 引用路径的智能提示
  20. Prettier - Code formatter: 代码格式化
  21. TODO Highlight: 对部分代码块做todo标记,用来提醒自己在最后上线前需要处理的事宜 在User Settings 中增加todohighlight的配置
    具体配置可以参考官网wiki command+shift+P 唤起命令行面板

配置

shell命令使用zsh:

重写User Settings文件即可

"terminal.integrated.shell.osx": "zsh"

更改文件保存方式

设置文件保存的方式,提高开发效率,也防止忘记保存的情况出现。可以直接重写User Settings的配置

"files.autoSave": "onFocusChange"

也可以进入Settings的可视化配置界面,自定义配置自己的偏好,比如字体、间距等


转:https://juejin.im/post/5c7cd20de51d452a4f6bedef



推荐阅读
  • 本文介绍如何使用阿里云的fastjson库解析包含时间戳、IP地址和参数等信息的JSON格式文本,并进行数据处理和保存。 ... [详细]
  • 深入理解Tornado模板系统
    本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块,支持嵌入Python代码片段,帮助开发者快速构建动态网页。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • golang常用库:配置文件解析库/管理工具viper使用
    golang常用库:配置文件解析库管理工具-viper使用-一、viper简介viper配置管理解析库,是由大神SteveFrancia开发,他在google领导着golang的 ... [详细]
  • PyCharm下载与安装指南
    本文详细介绍如何从官方渠道下载并安装PyCharm集成开发环境(IDE),涵盖Windows、macOS和Linux系统,同时提供详细的安装步骤及配置建议。 ... [详细]
  • 本文详细介绍如何使用Python进行配置文件的读写操作,涵盖常见的配置文件格式(如INI、JSON、TOML和YAML),并提供具体的代码示例。 ... [详细]
  • Linux 系统启动故障排除指南:MBR 和 GRUB 问题
    本文详细介绍了 Linux 系统启动过程中常见的 MBR 扇区和 GRUB 引导程序故障及其解决方案,涵盖从备份、模拟故障到恢复的具体步骤。 ... [详细]
  • 导航栏样式练习:项目实例解析
    本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
  • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • 本文介绍了Java并发库中的阻塞队列(BlockingQueue)及其典型应用场景。通过具体实例,展示了如何利用LinkedBlockingQueue实现线程间高效、安全的数据传递,并结合线程池和原子类优化性能。 ... [详细]
  • 本文详细介绍了如何使用 Yii2 的 GridView 组件在列表页面实现数据的直接编辑功能。通过具体的代码示例和步骤,帮助开发者快速掌握这一实用技巧。 ... [详细]
  • 本文介绍如何通过Windows批处理脚本定期检查并重启Java应用程序,确保其持续稳定运行。脚本每30分钟检查一次,并在需要时重启Java程序。同时,它会将任务结果发送到Redis。 ... [详细]
  • 如何高效创建和使用字体图标
    在Web和移动开发中,为什么选择字体图标?主要原因是其卓越的性能,可以显著减少HTTP请求并优化页面加载速度。本文详细介绍了从设计到应用的字体图标制作流程,并提供了专业建议。 ... [详细]
  • 本文详细介绍了Git分布式版本控制系统中远程仓库的概念和操作方法。通过具体案例,帮助读者更好地理解和掌握如何高效管理代码库。 ... [详细]
  • 本文介绍了如何利用npm脚本和concurrently工具,实现本地开发环境中多个监听服务的同时启动,包括HTTP服务、自动刷新、Sass和ES6支持。 ... [详细]
author-avatar
沙楽33
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有