工欲善其事, 必先利其器. 作为一个前端程序猿打造一个好看好用的编辑器, 对于工作效率的提高有很大的帮助.
主题
字体
字体选用的FiraCode, 下载安装然后参见VS Code Instructions相关设置. 其它好看的字体还有Source Code Pro等.
颜色主题和文件图标主题
颜色主题选用的是One Dark Pro. 编辑器内置了几款颜色主题, 如果没有喜欢的就在扩展主题里找找.
文件图标主题配置同颜色主题配置.
用户设置
Commonly Used
| 控制字段 | 控制内容 |
|---|---|
files.autoSave | 自动保存 |
editor.tabSize | 制表符的空格数 |
editor.renderWhitespace | 空白字符显示方式 |
editor.wordWrap | 换行方式 |
files.exclude | 配置排除的文件和文件夹的 glob 模式. 不需要关心的文件或文件夹在此排除. |
files.associations | 配置语言的文件关联. eg:"**.jsp": "javascript" |
files.trimTrailingWhitespace | 启用后，将在保存文件时剪裁尾随空格 |
workbench.editor.labelFormat | 控制编辑器标签的格式 |
window.openFilesInNewWindow | 控制是否在新窗口中打开文件 |
terminal.integrated.shell.osx | 终端在 macOS 上使用的 Shell 的路径 |
breadcrumbs.enabled | 启用/禁用导航路径(面包屑) |
emmet.includeLanguages | 在默认不支持 Emmet 的语言中启用 Emmet 缩写功能. eg:"vue-html": "html", "javascript": "javascriptreact" |
编辑器
| 控制字段 | 控制内容 |
|---|---|
editor.formatOnType | 控制编辑器在键入一行后是否自动格式化该行 |
editor.minimap.enabled | 是否显示小地图 |
editor.mouseWheelZoom | 按住 Ctrl 键并滚动鼠标滚轮时对编辑器字体大小进行缩放 |
editor.parameterHints.enabled | 在输入时显示含有参数文档和类型信息的小面板 |
files.exclude | 配置排除的文件和文件夹的 glob 模式. 不需要关心的文件或文件夹在此排除. |
files.associations | 配置语言的文件关联. eg:`”.jsp”: “javascript”`* |
快捷键
| 关键字 | 快捷键 |
|---|---|
删除行 | cmd + D |
合并行 | ctrl + J |
光标后退 | ctrl + _ |
光标前进 | ctrl + shift + _ |
向下面插入行 | cmd + enter |
向上面插入行 | cmd + shift + enter |
转到文件 | cmd + P |
显示所有命令 | cmd + shift + P |
文件查找 | cmd + F |
全局搜索 | cmd + shift + F |
切换行注释 | cmd + / |
切换块注释 | shift + alt + A |
撤销 | cmd + Z |
恢复撤销 | cmd + shift + Z |
缩进 | tab |
缩进 | shift + tab |
移动到行尾 | cmd + right |
移动到行首 | cmd + left |
向上移动行 | cmd + up |
向下移动行 | cmd + down |
保持打开状态(workbench.action.keepEditor) | cmd + K enter |
打开集成终端 | ctrl + ` |
集成终端清屏 | cmd + K |
格式化文件 | shift + alt + F |
常见操作
窗口
code命令
VS Code快速打开文件夹或文件,可以将其直接拖至VS Code图标上. 或cmd + shift + P打开命令面板, 向Path添加code, 用code命令操作.
文件对比
工作区
可以将其它项目与当前项目置于同一工作区, 在同一个窗口查看编辑.
自定义终端
在Mac终端改造里, 已经打造好了个性化的终端了. 在VS Code里只需要换个路径即可.
在用户设置里用以下配置覆盖.
1 | "terminal.integrated.shell.osx": "/bin/zsh", |
添加自定义snippet
VS Code内置了自定义snippet功能, 用户可以根据自己的需求去添加自己想要的代码段, 灵活且方便, 这样就完全没有必要去安装类似的插件了. 细节可参考[VS Code]跟我一起在Visual Studio Code 添加自定义snippet（代码段），附详细配置.
插件
Chinese (Simplified) Language Pack for VS Code
此中文（简体）语言包为 VS Code 提供本地化界面.
Bookmarks
在代码中做标记, 可以在不同的标记中快速便捷的切换.
Auto Rename Tag
修改HTML/XML标签时, 首尾标签会自动同步更改.
ESLint
一个开源的 JavaScript 代码检查插件, 可以在编写或保存文件时对文件进行检测. 根据规则配置文件对文件进行检测提示, 并可以自动修复部分不符合规则的部分.
"eslint.options": { "configFile": "**/**/**" }: 本地的配置文件地址路径.eslint.validate: 可被识别的文件类型.eslint.autoFixOnSave: 保存时自动修复.
Debugger for Chrome
在代码里断点, 就是相对地知道文件在哪里吧, Chrome里打断点还是挺好用地. Debugger for Chrome 配置可参见官网例子.
插件什么的真的不见得能提高多少效率, 讲真, 颜值才是正义, 颜值才是王道🤔.