当前位置：首页 > 文章列表 > 文章 > 软件教程 > VSCode-轻量级实用编辑器推荐及使用技巧

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

2025-05-28 19:09:33 0浏览收藏

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

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

一、常用插件

vscode-icon：为vscode的文件夹目录添加对应的图标，提升用户体验。

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

jQuery Code Snippets：jQuery开发必备插件，提供代码片段。

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

Path Intellisense：自动补全文件路径，提高开发效率。

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

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

markdown-helper
Bracket Pair Colorizer：为括号添加独立颜色，方便识别。

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

VueHelper：提供Vue的snippet代码片段。

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

Auto Rename Tag：自动同步修改标签，提高开发效率。
Markdown Preview Enhanced：增强的Markdown预览器。
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 安装扩展
Mac：cmd+shift+p
Windows / Linux：ctrl+shift+p
然后键入“ext install”。选择合适的扩展，再按回车键。
1.2 扩展推荐
Mac: cmd+shift+p
Windows / Linux: ctrl+shift+p
键入“ext”→选择“Show Extension Recommendations”
1.3 卸载扩展
Mac: cmd+shift+p
Windows / Linux: ctrl+shift+p
键入“ext”→选择“Show Installed Extensions”→点击extension card右下角的“x”
2. 编辑器切换
Mac: cmd+1, cmd+2, cmd+3
Windows / Linux: ctrl+1, ctrl+2, ctrl+3
3. 历史
使用ctrl+tab来浏览历史。
3.1 向后浏览：
Mac: ctrl+-
Windows / Linux: alt+left
3.2 向前浏览：
Mac: ctrl+shift+up
Windows / Linux: alt+right

五、常用编辑技巧

括号匹配
Mac: cmd+shift+\
Windows / Linux: ctrl+shift+\
多游标选择
Mac: opt+cmd+up 或 opt+cmd+down
Windows: ctrl+alt+up 或 ctrl+alt+down
Linux: alt+shift+up 或 alt+shift+down
为当前选择添加游标。
复制一行
Mac: opt+shift+up 或 opt+shift+down
Windows / Linux(Issue #5363): shift+alt+down 或 shift+alt+up
4. 缩小/扩大选择
Mac: ctrl+shift+cmd+left 或 ctrl+shift+cmd+right
Windows / Linux: shift+alt+left 或 shift+alt+right
5. 定位特定的一行
Mac: ctrl+g 或 cmd+p , :
Windows / Linux: ctrl+g
6. 撤销游标位置
Mac: cmd+u
Windows / Linux: ctrl+u
7. 上下移动一行
Mac: opt+up 或 opt+down
Windows / Linux: alt+up 或 alt+down
8. 代码格式化
Mac: opt+shift+f
Windows / Linux: shift+alt+f
9. 代码折叠
Mac: shift+cmd+[ 和 shift+cmd+]
Windows / Linux: ctrl+shift+[ 和 ctrl+shift+]
10. 选择当前一行
Mac: cmd+i
Windows / Linux: ctrl+i
11. 打开README预览
在markdown文件中使用：
Mac: shift+cmd+v
Windows / Linux: ctrl+shift+v
12. 分割（Side by Side）Markdown编辑和预览
在markdown文件中使用：
Linux: ctrl+k v
预览选择一个符号
键入alt+f12，或者使用快捷菜单。
14. 查找所有引用
选择一个符号，键入shift+f12，或者使用快捷菜单。
其他配置问题：以下问题需在文件-首选项-设置中添加

scss的css提示问题

// scss提示
"files.associations": {
  "*.css": "scss"
}

编辑器缩进问题

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

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