由于Sublime Text 安装插件的问题实在是无奈,最后向VSCode低头,决定转战VSCode,虽然可以设置成Sublime Text 快捷键,但多少还是有些不适应,只能从头继续学习了。
Mac 快捷键指示:
- ⌘ :Command键
- ⌥ :Option/Alt
- ⇧ :Shift按键
- ^ : 表示的是Control键
Mac VSCode 快捷键
全局
Command + Shift + P 显示命令面板
Command + P 快速打开
Command + Shift + N 打开新窗口
Command + W 关闭窗口
Command + , 打开用户设置
Command + K Command + S 显示快捷方式
基本
Command + X 剪切(未选中文本的情况下,剪切光标所在行)
Command + C 复制(未选中文本的情况下,复制光标所在行)
Option + ↑ 向上移动行
Option + ↓ 向下移动行
Option + Shift + ↑ 向上复制行
Option + Shift + ↓ 向下复制行
Command + Shift + K 删除行
Command + Enter 下一行插入
Command + Shift + Enter 上一行插入
Command + Shift + 跳转到匹配的括号
Command + [ 减少缩进
Command + ] 增加缩进
Command + Shift + [ 切换到上一个已打开文件标签
Command + Shift + ] 切换到下一个已打开文件标签
Control + - 切换到上一个已打开文件标签
Control + Shift + - 切换到下一个已打开文件标签
Command + K Command + 0 折叠全部代码块(这个是数字,不是字母。0是代码折叠级别,同理可以换用1,2,3等)
Command + K Command + J 展开全部代码块
Command + K Command + C 添加行注释
Command + / 添加、移除行注释
Option + Shift + A 添加、移除块注释
Command + Shift + D 复制光标所在整行,插入在该行之前
Command + K U 选中单词改为大写
Command + K L 选中单词改为小写
Command + Option + [ 代码折叠
Command + Option + ] 代码展开
多光标与选择
Command + ↑ 跳转至文件开头
Command + ↓ 跳转至文件结尾
Command + 点击 插入多个光标
Option + 左键按住不放,拖动鼠标 添加多个光标
Command + U 撤销上一个光标操作
Option + Shift + I 在所选行的行尾插入光标
Control + Shift +↑ 向上面一行添加游标
Control + Shift + ↓ 向下面一行添加游标
Command + J 删除当前行与下一行内容合并成一行(光标未选中多行内容的时候) 或 将多行内容合并成一行(已选择需要合并的多行时)
Option + Shift +↑ 向上复制一行
Option + Shift + ↓ 向下复制一行
Option + → 以单词为单位向后移动光标
Option + Shift + → 以单词为单位向后选中文本
Command + K R 在资源管理器中显示活动文件
查找替换
Command + F 查找
Command + Option + F 替换
Command + Shift + F 在当前文件中查找查找
Command + Shift + H 在文件夹中查找替换
Command + G 查找下一个
Command + Shift + G 查找上一个
Option + Enter 选中所有匹配项
Command + D 向下选中相同内容
Command + K Command + D 移除前一个向下选中相同内容
进阶
Option + Shift + F 格式化代码
Command + L 选中当前行SHIFT + ALT + F 格式化代码
Command + K Command + F 格式化选择部分
Command + K Command + X 删除行尾多余空格
Command + kk Control + kk 删除光标至当前行尾内容
导航
Control + R 跳转到当前文件的某一符号位置
Control + G 跳转至某行
Command + P 跳转到某个文件
Command + M 光标移动至括号内开始或结束的位置
Command + Shift + O 跳转到某个符号
Command + Shift + M 打开问题面板
编辑器管理
Command + W 关闭编辑器
Command + 编辑器分屏
Command + 1 切换到第一分组
Command + 2 切换到第二分组
Command + 3 切换到第三分组
Command + K Left 激活左侧编辑组
Command + K Right 激活右侧编辑组
Command + K Z 切换禅模式
文件管理
Command + N 新建文件
Command + O 打开文件
Command + S 保存文件
Command + Shift + S 另存为
Command + Option + S 全部保存
Command + W 关闭
Command + K Command + W 全部关闭
Command + Shift + T 重新打开被关闭的编辑器
Control + Tab 打开下一个
Control + Shift + Tab 打开上一个
Command + K R 在资源管理器中查看当前文件
Command + K O 新窗口打开当前文件
调试
Command + Shift + D 调试
Command + Shift + X 安装插件
显示
Command + Ctrl + F 全屏、退出全屏
Command + + 放大
Command + - 缩小
Command + B 显示、隐藏侧边栏
Command + Shift + F 显示搜索框
Command + Shift + X 显示插件面板
Command + Shift + H 全局搜索替换
Command + Shift + J 显示、隐藏高级搜索
Command + Shift + U 显示、隐藏输出面板
集成终端
Control + 显示终端 Control + Shift +
新建终端
Command + Shift + U 输出
Command + Shift + Y 调试控制台
正则替换
目标
将类似 <div id="aaaa">1</div>
这样的语句替换成<div id="aaa" calss="jiaoshou">1</div>
替换方法
调出查找和替换界面
点下最左侧的.*
按钮,启用正则搜索
Find What界面中输入<div id="aaaa">(.*)</div>
,别忘了这儿的小括号
Replace With中输入 <div id="aaaa" class="jiaoshou">$1</div>
这儿的$1
就代表了第一个括号中匹配的内容
Replace ALL!
替换前:
<div id="aaaa">较瘦f2e</div>
<div id="aaaa">前端</div>
<div id="aaaa">较瘦</div>
替换后:
<div id="aaaa" class="jiaoshou">较瘦f2e</div>
<div id="aaaa" class="jiaoshou">前端</div>
<div id="aaaa" class="jiaoshou">较瘦</div>
稍微再加点限制:
<div id="aaaa">较瘦f2e</div>
<span id="bbbb">前端</span>
<a id="cccc">较瘦</a>
Find What界面中输入 <(.*) id=(.*)>(.*)</(.*)>
Replace With中输入 <$1 id=$2 class="jiaoshou">$3</$4>
替换后:
<div id="aaaa" class="jiaoshou">较瘦f2e</div>
<span id="bbbb" class="jiaoshou">前端</span>
<a id="cccc" class="jiaoshou">较瘦</a>
element
使用E[attr]
添加属性:
带有某个属性的标签( a[title=abc]
)
eg:
<a href="" title="abc"></a>
使用E{text}
添加文本:
带有标签内容(p{内容}
)
eg:
<p>内容</p>
使用E$*N
创建多个标签
带序号的元素(p.abc$*5
)
eg:
<p class="abc1"></p>
<p class="abc2"></p>
<p class="abc3"></p>
<p class="abc4"></p>
<p class="abc5"></p>
settings.json
{
//主题设置
"workbench.colorTheme": "Monokai",
// 默认编辑器字号
"editor.fontSize": 14,
//是否自动换行
"editor.wordWrap": "on",
// tab几个缩进
"editor.tabSize": 2,
// 文件自动保存
"files.autoSave": "afterDelay",
// 自动格式化粘贴的代码
"editor.formatOnPaste": true,
// 在资源管理器删除内容时候是否进行用户提醒
"explorer.confirmDelete": false,
// 控制在资源管理器内拖放移动文件或文件夹时是否进行确认
"explorer.confirmDragAndDrop": false,
// 在资源管理器拖拽文件是否进行用户提醒
"workbench.statusBar.visible": true,
// 工作区缩放级别
"window.zoomLevel": 0,
// 重命名或移动文件时,启用或禁用自动更新导入路径
"javascript.updateImportsOnFileMove.enabled": "always",
// 启用/禁用导航路径
"breadcrumbs.enabled": true,
// 终端cmd字号
"terminal.integrated.fontSize": 16,
// 不检查缩进,保存后统一按设置项来设置
"editor.detectIndentation": false,
// 编辑器初始界面
"workbench.startupEditor": "newUntitledFile",
// 工作台状态栏是否可见
"workbench.statusBar.feedback.visible":false,
// 添加多个光标时候需要的快捷键
"editor.multiCursorModifier": "ctrlCmd",
// 自定义代码片段显示的位置
"editor.snippetSuggestions": "top",
"window.menuBarVisibility": "toggle",
// 启用后,按下 TAB 键,将展开 Emmet 缩写。
"emmet.triggerExpansionOnTab": true,
// 控制编辑器在空白字符上显示符号的方式
"editor.renderWhitespace": "all",
// 控制编辑器是否应呈现空白字符
"editor.renderControlCharacters": false,
// 在文件和文件夹上显示错误和警告
"problems.decorations.enabled": false,
// html文件格式化程序
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features",
"editor.codeActionsOnSave": {
// 禁止eslint对html进行校验
"source.fixAll.eslint": false,
// 禁止stylelint对html进行校验
"source.fixAll.stylelint": false
}
},
// 编辑器文件保存时的操作(MacOS:快捷键是 command + s ),并不能修复所有问题,多数还是需要手动修复
//
"editor.codeActionsOnSave": {
// 文件保存时开启eslint自动修复程序
"source.fixAll.eslint": true,
// 文件保存时开启stylelint自动修复程序
"source.fixAll.stylelint": true
},
// "[javascript]": {
// "editor.defaultFormatter": "vscode.typescript-language-features"
// },
// vscode-fileheader -----settings begin-----
// 文件作者
"fileheader.Author": "JiaoShouf2e",
// 文件最后修改者
"fileheader.LastModifiedBy": "JiaoShouf2e",
// vscode-fileheader -----settings end-----
//stylelint -----settings begin-----
// 防止编辑器内置linter与插件冲突设置
"css.validate": false,
"less.validate": false,
"scss.validate": false,
// 启用stylelint插件
"stylelint.enable": true,
//stylelint -----settings end-----
// eslint -----settings begin-----
// 是否为JavaScript文件开启eslint检测
"eslint.enable": true,
// 保存之后进行lint
"eslint.run": "onSave",
// 是否启用eslint的调试模式
"eslint.debug": true
// eslint -----settings end-----
}