1. 常用快捷键
ctrl+k git提交
ctrl+shift+k 推送本地已提交
ctrl+ctrl 双击ctrl 可打开Run Anything运行命令框
ctrl+alt+左 回到上次光标的位置
ctrl+alt+右 跳转到下次光标的位置
ctrl+f 在当前文档查询
ctrl+shift+f 全局查找(可选择查找范围)
ctrl+r 替换
ctrl+d 复制当前行
shift+f6 重命名变量名称
ctrl+shift+n 根据文件名查找文件
ctrl+b 光标在变量或函数名成中,跳转到定义
ctrl+shift+b 跳转变量或函数的实现
alt+1 切换展开工程文件列表框
ctrl+f12 查看当前文件的数据结构
ctrl+alt+f12 选择文件并在文件夹中打开
ctrl+alt+y 从硬盘中重新加载
f11 在当前行添加或取消书签
ctrl+f11 添加带有数字标记的书签
ctrl+数字 跳转到对应数字标记的书签位置
ctrl+shift+数字 快速定义带有数字的书签
shift+f11 查看所有书签
ctrl+- 折叠当前光标所在位置的代码
ctrl++ 展开当前光标所在位置的代码
ctrl+shift+- 折叠当前页代码
ctrl+shift++ 展开当前折叠的代码
ctrl+[ 光标跳转到当前块的开始位置
ctrl+] 光标跳转到当前块的结束位置
alt+f11 打开运行Gulp/Grunt/npm 任务框
shift+f9 已debug模式运行当前配置项 如dev
shift+f10 运行当前配置项 如dev
alt+shift+f10 执行run
alt+shift+f9 已debu模式执行run
ctrl+f2 停止执行
ctrl+shift+f2 停止执行后台运行的进程
ctrl+/ 当行注释
ctrl+shift+/ 多行注释 ,(也可使用输入/**后回车,自动补全已有变量(常用))
ctrl+alt+l 格式化当前文件
ctrl+alt+shift+l 格式化全部文件
ctrl+shift+上/下 将当前选中块移动到上/下方模块上/下面
alt+shift+上/下 将当前行移动到上/下方行的上/下面
ctrl+g 跳转当输入行号
f2 高亮当前页下一个错误项
shift+f2 高亮当前页上一个错误项
ctrl+shift+backspace 回到上一次编辑的位置
ctrl+alt+上/下 当前页上/下一个todo
ctrl+e 展示最近打开使用的文件
ctrl+shift+e 用列表形式展开最近编辑过的文件位置信息, 类似于git的diff
ctrl+` 快速切换结构模式
alt+shift+. 增加字号
alt+shift+, 减少字号
alt+shift+g 将光标移动到当前行尾位置
ctrl+w 扩大光标位置的选择, 多次ctrl+w继续扩大
ctrl+shift+w 缩小光标位置的选择, 多次ctrl+shift+w继续缩小
ctrl+shift+u 切换全大写或全小写当前变量
ctrl+shift+j 将下一行已不换行形式连接
tab 插入tab空格
shift+tab 减少tab空格
2. 添加文件模板 Editor> File and code Templates>Files +
vue模板
<template>
<div>new template</div>
</template>
<script>
export default{
name: "",
props: {},
data(){
return {}
},
watch: {},
computed: {},
methods: {},
mounted(){
},
components: {},
destroyed(){
}
}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
</style>
另外一个- 最新的Vue Composition模板:
<template>
<div class="${NAME}">
${NAME}#[[$END$]]#
</div>
</template>
<script setup${SCRIPT_LANG_ATTR}>
</script>
<style ${STYLE_LANG_ATTR}>
.${NAME}{
}
</style>
3. 添加快捷键
上下左右: ctrl+alt+u ctrl+alt+i ctrl+alt+j ctrl+alt+k
home ctrl+alt+h
end ctrl+alt+;
向前移动一个单词 ctrl+alt+shift+j
向后移动一个单词 ctrl+alt+shift+k
ctrl+shift+h 向前全选
ctrl+shift+; 向后全选
ctrl+alt+z 跳转到上次位置
ctrl+alt+x 跳转到下次位置
4. 快速跳转到代码某个位置, 不使用鼠标
类似于浏览器插件Vimium中的F键
步骤:
1.先按Ctrl+; (注: 此处的;是键盘上的L键的右边那个键), 进入insert模式
- 此时可输入想要跳转的地方的字母或其他任意字符, 编辑器便会自动定位并编号, 一般都是两位
-
输入想要跳转的位置的编号即可跳转
演示:
任意位置跳转
5. 块注释快捷键 Editor > Live Template > JavaScript > +
Abbreviation: ///
Description: 块注释
Template text:
/**
* $VAR$
*/
Expand with:Tab
()[]{} 自动补全选项 Editor > General > Code Folding> 选中 Handlebars/Mustache blocks 并且 Editor > General > Smart Keys 选中Insert pair bracket 和 Insert pair quote 和 AngularJS Auto-insert whitespace in the interpolations
Tab栏 设置 Editor > General > Editor Tabs 取消 Show "close" button on editor tabs 选中 Mark modified tabs with asterisk(编辑没保存时会有*)
用点后一个后缀自动完成一些函数 Editor > General > Postfix Completion 选中 Enable postfix completion
选中文本后输入引号或括号自动包裹选中的文本 Editor > General > Smart Keys 选中 Surround selection on typing quote or brace
snippets 设置自己的代码片段.ctrl+shift+p打开命令行工具 输入snippets后选择
首选项:打开用户代码片段,然后输入JavaScript,随后进入到了javascript.json文件(该文件一般位于c:\User\用户名\AppData\Roaming\Code\User\snippets]\javascript.json),然后就可以依照所给的示例进行打造自己的片段库了.新建文件时自动带上创建人和日期
File>Settings>File and Code Templates>Includes>File Header 设置内容为
/**
* Created by $USER_NAME on ${DATE}.
*/
6. 必备插件
.ignore
acejump
key promoter x 快捷键提示
codeGlance2 代码缩略图
7. bookmark 书签的妙用
f11 添加书签
ctrl+ f11 添加带有数字标记的书签
ctrl+数字 跳转到对应数字标记的书签位置
shift+f11 查看所有书签
8 . 修改换行长度, 一行显示长度
由原来的120 调整为180 , 现代显示器显示的宽度都比较宽, 故对此调节可阅读更多内容
settings=>Editor=>Code Style=>General=>Hard wrap at: 180
9. 将设置同步到云端
a. 账户同步
b. 申请一个仓库同步
a. 账户同步比较简单，
找到设置位置 File->Manage IDE Settings -> Sync Settings to JetBrains Account
b. 申请个一个代码仓库保存，可以是公开的仓库也可以是私人仓库。
因网络速度原因，可以选择Gitee私有仓库，当然公开了设置问题也不大，私有最安全
首先在gitee上申请一个仓库，然后将仓库https链接设置到webstorm即可
位置 File->Manage IDE Settings -> Settings Repository
将申请的https://gitee.com/xxx/xxx.git 填入
然后下面又三个选项，
- Merge:
如果本地已有配置可以选择Merge按钮，将远端和本地都保留下来 - Overwrite Local
覆盖本地设置 - Overwrite Remote
将本地配置上传并覆盖远端的配置
10. 在webstorm中调试vue项目(vite版)
-
确保node.js插件已启用
Node.js插件启用 -
编辑Run/Debug Configurations
Edit Configurations
如果配置了vite.config.js中open:true 则会弹出两个浏览器, 建议open:false , 这样弹出的浏览器就是debug启动的, 只有在debug启动下的浏览器才能响应代码断点调试
效果如下:
调试js的效果很好 , 有种开发后端的感觉了!!!
