【Tools】——VS Code 插件推荐合集(持续更新),你想要的差不多都在这儿了

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

更新日志

  • [2019-08-28]
    • 添加 filesize 显示效果图片
  • [2019-07-26]
    • 修正 Todo Tree 插件的图片指示错误
    • 修改“更新记录”为“更新日志”,做到格式统一
    • 改进“更新日志”内容缩进效果
  • [2019-07-09]
    • 添加 Path Autocomplete 插件与系统自带功能重复的说明。
    • 添加简述和更新记录。
    • 修改 Import Cost 插件的部分说明。
  • [2019-06-25]
    • 添加 Mithril Emmet 插件。
  • [2019-06-04]
    • 文章发布
  • 版权信息

插件涉及以下方面

  • Git
  • Python
  • HTML
  • CSS
  • JavaScript
  • Vue
  • TodoList
  • 代码辅助标识(彩色缩进、彩色括号等等)
  • HTML结构化元素快速生成
  • 网页动态展示
  • 点击运行代码
  • 自动同步VSCode设置

VS Code 安装和汉化

  • 下载地址:VS Code官网链接
  • 选择合适的版本,安装即可
  • 安装完成后如图
    VS Code初始安装完成
  • 如果需要汉化,ctrl + shift + x,打开插件商店,输入 chinese,然后选择第一个,点击 ‘install
    中文插件
  • 安装完成后重启软件,显示如下,则汉化完成
    汉化完成

插件推荐

  • 插件搜索:ctrl + shift + x
  • 1. Python
    提供了代码分析,高亮,规范化等很多基本功能
    python

  • 2. vscode-icons
    各种漂亮图标
    vscode-icons
    点击这里设置图标
    点击这里设置图标
    然后选vscode-icons
    选择 vscode-icons

  • 3. filesize
    左下角显示文件大小的插件
    filesize
    filesize显示效果

  • 4. Bracket Pair Colorizer
    成对的彩色括号彩色括号

  • 5. Settings Sync
    可以同步 VS Code设置同步到 GitHub 账号,包括 setting 文件和插件设置等等,重新配置VS Code的时候只需同步一下即可。安装完成后,只需要新增一个Github token,添加后,剩下的根据个人喜好进行配置,其他的插件自动帮你完成。
    Settings Sync
    这里需要说一下的是很多不负责任的博文在选择 token权限的时候说让全选,其实是很危险的行为。我一开始也感觉哪里怪怪的,因为要安装的插件很多,也没有太细究,直到我需要在另一台电脑上同步VS Code 设置的时候,点开了 Setting Sync 的官网看了看才发现,哪里需要那么多权限,只需要一个权限就好。如下图
    Setting Sync

  • 6. Atom-Material
    一款安卓风的颜色主题,推荐使用推荐的字体设置。
    "editor.fontSize": 16, "editor.fontWeight": "400", "editor.lineHeight": 24, "editor.letterSpacing": 0.5
     Atom-Material
    推荐设置的显示效果
    设置后的显示效果

  • 7. Path Autocomplete

    • 自动感知目录下的文件,自己选择就好。
    • [2019-7-9 09:22:07]
      注意: VSCode本身也支持路径的感知,需要配置好用系统自带的还是用这个插件,否则,每个路径下的条目都会有两份。
      Path Autocomplete
  • 8. Import Cost

    • 在行尾显示导入的包的大小
    • [2019-07-09 09:38:34] 这个好像只支持JavaScript。
      Import Cost
  • 9. Indent-Rainbow
    带颜色的缩进
    Indent-Rainbow
    缩进效果
    锁紧效果

  • 10. GitLens
    能显示每一行代码的作者以及提交时间。
    GitLens
    效果
    GitLens使用效果

  • 11. Git history
    Git 历史
    Git History

  • 12. Color Highlight
    直观显示在 css/web 中定义的颜色
    Color Hightlight

  • 13. Quokka.js
    实时执行 JavaScript 代码(做快速的 demo 很有用)
    Quokkia.js

  • 14. Code Runner
    立刻运行代码
    Code Runner

  • 15. Vetur
    Vue 工具插件
    Vetur

  • 16. Live server
    实时显示网页情况
    Live server

  • 17. Python indent
    自动纠正 Python 缩进
    Python Indent

  • 18. vscode-fileheader
    头部注释添加/更新插件
    vscode-fileheader

  • 19. TODO Highlight
    高亮显示备注中的 TODO 事项,推荐配合 第19个插件, Todo Tree 使用
    TODO Highlght

  • 20. Todo Tree
    点击左侧栏“”的logo,显示 TODOList 条目,点击相应的条目,可以打开文件并定位到 TODO 行。
    )

  • 21. Auto Close Tag
    自动写关闭标签的插件
    在这里插入图片描述

  • 22. Auto Rename Tag
    自动重命名关闭标签
    Auto Rename Tag

  • 23. Polacode
    代码段生成图片
    Polacode

  • 24. Guides
    比 VS Code自带的更好的参考线,可自定义
    Guides

  • 25. Color Info
    显示css中的颜色属性信息
    Color Info

  • 26. Regex Previewer
    正则结果预览插件
    Regex Previewer

  • 27. Mithril Emmet

    • 注意:其实vscode 内置了Emmet插件
    • 高效编写 HTML、CSS 代码的插件,能快速输入大部分内容
       Mithril Emmet
      比如,在编辑 HTML 文件时,输入tr*2>td*3,然后回车,就能快速生成一个两行三列的表格标签。
      在这里插入图片描述
      在这里插入图片描述
  • The end.

展开阅读全文

没有更多推荐了,返回首页