首页 > 软件开发 > 软件开发

软件开发VScode 超好用的插件「工欲善其事,必先利其器」

admin 软件开发 2021-05-25 09:25:08 Vscode 
后台-系统设置-扩展变量-手机广告位-内容正文底部

目录

  • 一、开发类
  • 二、效率类


一、开发类

  1. HTML CSS Support:html提示css自动补全。
    在这里插入图片描述

  2. Auto Close Tag:自动闭合标签。
    在这里插入图片描述

  3. Auto Rename Tag:重新命名标签。
    在这里插入图片描述

  4. CSS Peek:快速查看当前标签设置的css属性。「将光标移动要需要查看的标签,然后按下f12即可查看」
    在这里插入图片描述

  5. cdnjs:在线的js文档。
    在这里插入图片描述

  6. ESLint:可组装的JavaScript和JSX检查工具。
    在这里插入图片描述

  7. Prettier - Code formatter:代码格式化。
    在这里插入图片描述

  8. Tabnine Autocomplete AI:代码智能提示。
    在这里插入图片描述

  9. Code Runner:编译运行代码。在这里插入图片描述
    setting.json 常见语言配置:

{
  "code-runner.executorMap": {
    "javascript": "node",
    "php": "C:\\php\\php.exe",
    "python": "python",
    "perl": "perl",
    "ruby": "C:\\Ruby23-x64\\bin\\ruby.exe",
    "go": "go run",
    "html": "\"C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe\"",
    "java": "cd $dir && javac $fileName && java $fileNameWithoutExt",
    "c": "cd $dir && gcc $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt"
  }
}
  1. Sass:自动编译sass或scss文件。
    在这里插入图片描述
    setting.json相关配置
"liveSassCompile.settings.formats": [
 {
   "format": "expanded", // 设置编译之后的格式
   "extensionName": ".css", // 编译后缀名
   "savePath": "~/../css" // 编译之后的路径 相对路径
 }
],
"liveSassCompilce.settings.excludeList": ["**/node_modules**", ".vscode/**"],

不知道编译格式可以看这里,配置完成后,别忘记了开启编辑器右下加的watch sass功能。


二、效率类

  1. Chinese (Simplified) Language:中文(简体)语言包为 VS Code 提供本地化界面。
    在这里插入图片描述

  2. Live Server:启动本地服务,实时预览效果。
    在这里插入图片描述

  3. GitHub Pull Requests and Issues:管理你的github仓库。
    在这里插入图片描述

  4. 码云(Gitee)常用功能:管理你的gitee仓库。
    在这里插入图片描述

  5. GitLens — Git supercharged:显示文件最近的commit和作者,显示当前行commit信息
    在这里插入图片描述

  6. Git Blame 在状态栏显示当前行的Git信息
    在这里插入图片描述

  7. Git History(git log) 查看git log
    在这里插入图片描述

  8. Path Intellisense:路径智能补全。
    在这里插入图片描述

  9. Image preview:预览引入的图片素材。
    在这里插入图片描述

  10. Local History:记录文件编辑的历史记录。
    在这里插入图片描述

  11. any-rule:包含70条常用的正则表达式。
    在这里插入图片描述

  12. Bracket Pair Colorizer:括号颜色高亮。
    在这里插入图片描述

  13. Code Spell Checker:单词拼写检查。
    在这里插入图片描述

  14. WakaTime:记录你的编码时间。需要登录官网。
    在这里插入图片描述

  15. Markdown Preview Enhanced:查阅 makedown 文件效果。
    在这里插入图片描述

  16. project-tree:自动生成工作树。
    在这里插入图片描述
    安装完成之后使用快捷键 ctrl + shift + p 输入 Project Tree 回车即会自动生成。
    在这里插入图片描述

  17. Material Icon Theme:设置文件图标主题。
    在这里插入图片描述

  18. Monokai Pro:深色模式的主题风格。
    在这里插入图片描述




最后,如果您有更好的方法,欢迎在留言区中分享;或者实际操作中遇到什么问题均可留言或者私信我,感谢您的观看!

文章来源:https://blog.csdn.net/weixin_44808483/article/details/115295626

后台-系统设置-扩展变量-手机广告位-内容正文底部
版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:https://www.jcdi.cn/ruanjiankaifa/30740.html

留言与评论(共有 0 条评论)
   
验证码:
后台-系统设置-扩展变量-手机广告位-评论底部广告位

教程弟

https://www.jcdi.cn/

统计代码 | 京ICP1234567-2号

Powered By 教程弟 教程弟

使用手机软件扫描微信二维码