推广 热搜: page  考试  小红  红书  数据  论文  数据分析  关键词  哪些  搜索 

VS Code 安装、配置教程及插件推荐

   日期:2025-01-03     移动:https://sicmodule.kub2b.com/mobile/quote/18297.html
  • 官网下载:exe安装程序会有安装步骤,需要选择配置一些选项;zip无需安装,解压即可用。

    • Download Visual Studio Code - Mac, Linux, Windows

  • 更新日志

    • Visual Studio Code July 2024

只有两步需要调整,其余部分点击下一步即可

  • 自定义选择安装路径

  • 通过可以快速打开的设置面板

    在搜索栏直接输入以下路径可快速定位配置

    • 字体大小

      • editor>font-size

    • tab大小

      • editor>tab size

    • 自动保存

      • files>auto save

    • 空文件夹不折叠

      • compact Folders (取消勾选这个选项

      • 快捷键功能个人喜好(改键)删除本行左侧所有内容快速选中相同的词复制当前行的内容到 (上 / 下) 一行 (可点击, 可选中区块内容)多鼠标光标同时存在当前文件搜索当前文件替换单行注释区块 / 多行 注释打开命令面板打开设置面板打开快捷键配置面板打卡 / 关闭 左侧面板Ctrl + `打开终端

        点击左侧扩展程序图标或通过键盘快捷方式打开扩展列表页

        1、汉化包 - Chinese (Simplified)

        vscode默认语言是英文, 可以通过安装汉化包使其转成中文界面,点击install安装,重启后即可生效。

        推荐使用英文界面,多少可以提升一点英语阅读能力,认识一些单词

        2、浏览器打开文件 - open in browser

        使用快捷键在默认浏览器中打开当前html文件

        使用选择浏览器

        3、起本地服务 - live server

        插件是一个用于前端开发的扩展,它的主要作用是提供一个本地开发服务器,以便实时预览和调试网页应用程序。其最大特点在于热重载,即开发者可实时预览代码效果。 因为允许开发者在浏览器中实时预览您正在编辑的网页。每当保存文件时,该插件会自动刷新浏览器,以便开发者可以立即看到页面的更改效果。

        4、打开UI稿 - Figma for VS Code

        目前需要figma团队是专业版才可以支持vscode使用此插件

        Figma for VS Code允许您在不离开文本编辑器的情况下,直接打开 UI 设计稿,不用频繁切换窗口,复制样式,提升开发效率和体验。

        5、编辑器主题 - Material Theme

        6、编辑器图标 - Material Icon Theme

        7、预览Markdown - 

        8、快速打开github仓库代码

        GitHub Repositories 扩展允许您直接在Visual Studio Code中快速浏览、搜索、编辑和提交到任何远程GitHub存储库, 无需将代码clone至本地。

        1、注释颜色分类 - Better Comments

        Better Comments扩展将帮助您在代码中创建更人性化的注释。

        2、预览图片 - Image preview

        在代码行左侧 和 鼠标悬停路径时显示图像预览。

        3、错误提示 - Error Lens

        代码错误标红,并提示具体错误信息。

        4、单词拼写校验 - Code Spell Checker

        单词拼写校验,错误提示

        5、生成代码图片 - CodeSnap

        选中要截图的代码,单击鼠标右键会弹出菜单,点击codesnap选项,即可生成图片

        6、代码格式化 - Prettier

        • 格式化选中的代码

        • 格式化当前文件

          • ,然后输入

        此插件可以使用专门的格式化配置文件

        在你的项目根目录下创建或检查 文件,并确保其配置正确

         
        

        1、标签自动闭合, 重命名

        • Auto Close Tag

        • Auto Rename Tag

        2、路径提示 - Path Intellisense

        自动完成文件路径名代码提示。

        3、Docker

        扩展使从Visual Studio Code构建、管理和部署容器化应用程序变得容易。它还提供了Node.js、Python和.NET的一键调试

        4、自动导入 - auto import

        自动查找、解析并为所有可用导入提供代码操作和代码完成。适用于和

        1、Typescript React Code Snippets

        此插件包含了使用 的 代码片段

        2、Vue - Official

        3、Vue 3 Snippets

        4、Vue VSCode Snippets

        5、Javascript (ES6) code snippets

        6、Echarts Enhanced Completion

        1、git提交记录 - GitLens

        查看文件历史commit提交记录,代码行查看commit记录安装即用, 部分功能需要收费。


特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


0相关评论
相关最新动态
推荐最新动态
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号