webstorm使用设置

• 常用快捷键
  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空格

• 添加文件模板 Editor> File and code Templates>Files +
  vue模板

• 添加快捷键
  上下左右: 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 跳转到下次位置

• 快速跳转到代码某个位置, 不使用鼠标
  类似于浏览器插件Vimium中的F键
  步骤:

1.先按Ctrl+; (注: 此处的;是键盘上的L键的右边那个键), 进入insert模式

2. 此时可输入想要跳转的地方的字母或其他任意字符, 编辑器便会自动定位并编号, 一般都是两位

3. 输入想要跳转的位置的编号即可跳转
   演示:

   

   任意位置跳转

• 块注释快捷键 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}.
 */

• 必备插件
  .ignore
  acejump
  key promoter x 快捷键提示
  codeGlance2 代码缩略图

• bookmark 书签的妙用
  f11 添加书签
  ctrl+ f11 添加带有数字标记的书签
  ctrl+数字 跳转到对应数字标记的书签位置
  shift+f11 查看所有书签

• 修改换行长度, 一行显示长度
  由原来的120 调整为180 , 现代显示器显示的宽度都比较宽, 故对此调节可阅读更多内容
  settings=>Editor=>Code Style=>General=>Hard wrap at: 180

• 将设置同步到云端
  a. 账户同步
  b. 申请一个仓库同步

a. 账户同步比较简单，
找到设置位置 File->Manage IDE Settings -> Sync Settings to JetBrains Account

账户同步设置

b. 申请个一个代码仓库保存，可以是公开的仓库也可以是私人仓库。
因网络速度原因，可以选择Gitee私有仓库，当然公开了设置问题也不大，私有最安全
首先在gitee上申请一个仓库，然后将仓库https链接设置到webstorm即可
位置 File->Manage IDE Settings -> Settings Repository

Settings Repository

将申请的https://gitee.com/xxx/xxx.git 填入

Settings Repository input

然后下面又三个选项，

1. Merge:
   如果本地已有配置可以选择Merge按钮，将远端和本地都保留下来
2. Overwrite Local
   覆盖本地设置
3. Overwrite Remote
   将本地配置上传并覆盖远端的配置