登录
首页 >  文章 >  软件教程

VSCode-轻量级实用编辑器推荐及使用技巧

时间:2025-05-28 19:09:33 451浏览 收藏

VSCode作为一款轻量级且实用的编辑器,深受开发者青睐。本文推荐了一些增强开发体验的插件,如vscode-icon、jQuery Code Snippets、view in browser等,并介绍了常用的快捷键,如列选择(ALT + 左键)、命令面板(F1)等。此外,还详细讲解了如何在工作区中展示多个项目文件夹,以及插件的安装、卸载和编辑器的基本设置技巧。这些内容旨在帮助用户更好地利用VSCode提升开发效率。

首先整理一些觉得不错的插件,体验一段时间后再进行调整。

一、常用插件

  1. vscode-icon:为vscode的文件夹目录添加对应的图标,提升用户体验。

vscode-轻量级实用编辑器
                                                                            原注:如果安装后不生效,请前往“文件 -- 首选项 -- 文件图标主题 -- 选择vscode icons”。

  1. jQuery Code Snippets:jQuery开发必备插件,提供代码片段。

vscode-轻量级实用编辑器
                                                                            原vscode-轻量级实用编辑器
                                                                            原3. view in broswer:通过快捷键Ctrl + F1在默认浏览器中运行当前的HTML文件,适合习惯使用HBuilder和WebStorm的开发者。

  1. Path Intellisense:自动补全文件路径,提高开发效率。

vscode-轻量级实用编辑器
                                                                            原5. Vue插件-vetur:提供Vue的语法高亮、智能感知和Emmet等功能。

vscode-轻量级实用编辑器
                                                                            原6. tortoiseSvn

  1. markdown-helper

  2. Bracket Pair Colorizer:为括号添加独立颜色,方便识别。

vscode-轻量级实用编辑器
                                                                            原9. Debugger for Chrome:使vscode映射Chrome的调试功能,可用于静态页面的断点调试。

  1. VueHelper:提供Vue的snippet代码片段。

vscode-轻量级实用编辑器
                                                                            原11. setting sync:将插件保存到GitHub上,方便同步。

  1. Auto Rename Tag:自动同步修改标签,提高开发效率。

  2. Markdown Preview Enhanced:增强的Markdown预览器。

  3. Ash Scss Snippets:在编写Scss时,以CSS方式提示常用属性。

vscode-轻量级实用编辑器
                                                                            原二、vscode常用快捷键

  • 列选择:ALT + 左键
  • 命令面板:F1
  • 切出新编辑器:Ctrl + 左键文件
  • 代码行缩进:Ctrl + [、Ctrl + ]
  • 文件切换:Ctrl + Tab
  • 转到行首/行尾:Home / End
  • 转到文件头/文件尾:Ctrl + Home / Ctrl + End
  • 重命名:F2
  • 转定义:F12 或 Ctrl + click
  • 转定义(切出新编辑器):Ctrl + Alt + click
  • 查看定义:Alt + F12
  • 查看引用:Shift + F12
  • 上下移动一行:Alt + Up / Alt + Down
  • 代码格式化:Shift + Alt + F

三、将多个项目文件夹展示在一个工作区

vscode-轻量级实用编辑器
                                                                            原展示成这样的:

第一步:先打开一个文件夹,添加到工作区,保存工作区。

第二步:把另一个文件夹拖拽到工作区,保存工作区。

四、一般设置使用

  1. 安装卸载扩展

    1.1 安装扩展

    Mac:cmd+shift+p

    Windows / Linux:ctrl+shift+p

    然后键入“ext install”。选择合适的扩展,再按回车键。

    vscode-轻量级实用编辑器
                                                                            原1.2 扩展推荐

    Mac: cmd+shift+p

    Windows / Linux: ctrl+shift+p

    键入“ext”→选择“Show Extension Recommendations”

    vscode-轻量级实用编辑器
                                                                            原1.3 卸载扩展

    Mac: cmd+shift+p

    Windows / Linux: ctrl+shift+p

    键入“ext”→选择“Show Installed Extensions”→点击extension card右下角的“x”

    vscode-轻量级实用编辑器
                                                                            原2. 编辑器切换

    Mac: cmd+1, cmd+2, cmd+3

    Windows / Linux: ctrl+1, ctrl+2, ctrl+3

    vscode-轻量级实用编辑器
                                                                            原3. 历史

    使用ctrl+tab来浏览历史。

    3.1 向后浏览

    Mac: ctrl+-

    Windows / Linux: alt+left

    3.2 向前浏览

    Mac: ctrl+shift+up

    Windows / Linux: alt+right

五、常用编辑技巧

  1. 括号匹配

    Mac: cmd+shift+\

    Windows / Linux: ctrl+shift+\

  2. 多游标选择

    Mac: opt+cmd+upopt+cmd+down

    Windows: ctrl+alt+upctrl+alt+down

    Linux: alt+shift+upalt+shift+down

    vscode-轻量级实用编辑器
                                                                            原vscode-轻量级实用编辑器
                                                                            原为当前选择添加游标。

  3. 复制一行

    Mac: opt+shift+upopt+shift+down

    Windows / Linux(Issue #5363): shift+alt+downshift+alt+up

    vscode-轻量级实用编辑器
                                                                            原4. 缩小/扩大选择

    Mac: ctrl+shift+cmd+leftctrl+shift+cmd+right

    Windows / Linux: shift+alt+leftshift+alt+right

    vscode-轻量级实用编辑器
                                                                            原5. 定位特定的一行

    Mac: ctrl+gcmd+p , :

    Windows / Linux: ctrl+g

    vscode-轻量级实用编辑器
                                                                            原6. 撤销游标位置

    Mac: cmd+u

    Windows / Linux: ctrl+u

    vscode-轻量级实用编辑器
                                                                            原7. 上下移动一行

    Mac: opt+upopt+down

    Windows / Linux: alt+upalt+down

    vscode-轻量级实用编辑器
                                                                            原8. 代码格式化

    Mac: opt+shift+f

    Windows / Linux: shift+alt+f

    vscode-轻量级实用编辑器
                                                                            原9. 代码折叠

    Mac: shift+cmd+[shift+cmd+]

    Windows / Linux: ctrl+shift+[ctrl+shift+]

    vscode-轻量级实用编辑器
                                                                            原10. 选择当前一行

    Mac: cmd+i

    Windows / Linux: ctrl+i

    vscode-轻量级实用编辑器
                                                                            原11. 打开README预览

    在markdown文件中使用:

    Mac: shift+cmd+v

    Windows / Linux: ctrl+shift+v

    vscode-轻量级实用编辑器
                                                                            原12. 分割(Side by Side)Markdown编辑和预览

    在markdown文件中使用:

    Linux: ctrl+k v

  4. 预览选择一个符号

    键入alt+f12,或者使用快捷菜单。

    vscode-轻量级实用编辑器
                                                                            原14. 查找所有引用

    选择一个符号,键入shift+f12,或者使用快捷菜单。

    vscode-轻量级实用编辑器
                                                                            原其他配置问题:以下问题需在文件-首选项-设置中添加

  5. scss的css提示问题

    // scss提示
    "files.associations": {
      "*.css": "scss"
    }
  6. 编辑器缩进问题

    // 缩进问题
    "editor.detectIndentation": false,
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    // 控制编辑器是否应自动设置粘贴内容的格式。格式化程序必须可用并且能设置文档中某一范围的格式。
    "editor.formatOnPaste": true,
    // 保存时设置文件的格式。格式化程序必须可用,不能自动保存文件,并且不能关闭编辑器。
    "editor.formatOnSave": false,

    vscode-轻量级实用编辑器
                                                                            原针对当前文件也可以在右下角状态栏中点击空格,设置相关参数。

参考文档:

  1. VsCode插件安装及推荐:https://blog.csdn.net/gossiphhh/article/details/78132398

  2. vscode 插件推荐 - 献给所有前端工程师(2017.8.18更新):https://segmentfault.com/a/1190000006697219

  3. vscode开发技巧集锦:https://blog.csdn.net/tiantangyouzui/article/details/52163175

vscode-轻量级实用编辑器
                                                                            原

以上就是《VSCode-轻量级实用编辑器推荐及使用技巧》的详细内容,更多关于Vscode,插件,设置,快捷键,工作区的资料请关注golang学习网公众号!

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>