webstorm 配置项文档 + 使用文档 （二）

webstorm 配置项文档 + 使用文档

时间: 2020-10-13 webstorm2020.2.3 版本

通过 ctrl+F 搜索你想了解的 webstorm 配置

有些效果按 Apply 就可以看出效果， 而有些效果则需要按 OK 才行。

Save Files 保存文件

• Strip trailing spaces on Save for 删除尾随空格逻辑

  • Modified Lines 只在修改行删除
  • All 所有行
  • None 禁用
• Delete trailing spaces on caret line 删除光标所在行的尾随空格
• Ensure an empty line at the end of a file on Save 保存时确保文件末尾有空行

Code Editing 代码编辑

Highlight on Caret Movement 光标移动时的高亮逻辑

• Matched brace 大括号匹配
• Current scope 当前范围
  
• Usages of element at caret 当前光标所在的元素
  

Refactorings 重构

• Specify refactoring options 指定重构选项

  • in the editor 在编辑器中
    
  • In the modal dialogs 在模态对话框中
    

TODO: 后续两个选项暂时不知道有何作用

Error Highlighting 错误高亮

• Error stripe mark min height 错误条纹标记最小高度
• Autoreparse delay 自动解析延迟
• The " Next Error'action goes through 执行“Next Error”操作

Quick Documentation 快速文档

• Show quick documentation on mouse move 鼠标移动时显示快速文档

Editor Tooltips 编辑器工具提示

• Tooltip delay 工具提示延迟

Font 字体

• Font 字体

  • Show only monospaced fonts 仅仅显示等宽字体
• Size 大小
• Line spacing 行距
• Fallback font 对于主字体不支持的符号时使用的字体
• Enable font ligatures 启用字体连字

Color Scheme 配色方案

此节点下的所有节点均是配置颜色方案

Code Style 代码样式

使用html,javascript举例，其他语言节点同理

General 常规

• Line separator 行分隔符

  • System-dependent 依赖于系统
  • Unix and macos ( \ n )
  • Windows ( \ r \ n )
  • Classic macos ( \ r )

• Hard wrap 强行换行点

  • Wrap on typing 是否自动换行
• Visual guides 换行点视觉参考线
• Detect and use existing file indents for editing 检测并使用现有文件缩进进行编辑

Formatter Control 格式化控制

• Enable formatter markers in comments 是否在启用在注释中控制是否格式化代码

  • Formatter off 格式化关闭的注释
  • Formatter on 格式化开启的注释
  • Enable regular expressions in formatter markers 对于上面填的注释markers是否可以是正则表达式

如何理解此选项？

其实就是用一块特定的注释包围的代码不进行格式化， 例子:

上面的语句我不想被格式化掉，就可以这样做:

• Do not format , optimize imports , arrange code 不进行格式化，分析import代码的域

Scope的概念见本文档的Scope域部分

Inspections 检查

选项过多，而且有些建议因人而异，有需要的话可以另开篇文章。

File and Code Templates 文件和代码模板

新建文件时的代码模板。

使用的是Apache Velocity 模板引擎。

TODO: 阅读idea源码

File Encodings文件编码

Live Templates 实时模板/用户代码片段

用过IDE，编辑器的都明白，用户代码片段是最常用的功能了。

创建代码片段例子

• 点击“+”号， 新建片段
• 创建如图所示的片段
  
• 使用: 在vue template中输入“efi”即可生成

使用模板变量(进阶)

上图使用的变量如果没有定义内容的话，两个$中的变量名无论命名成什么都一样, ide光标总是会从左往右，从上至下跳转

（可以试试随意命令两个$中的内容）

点击“Edit variable”开启编辑变量，使变量更有意义! 以下是表达式所代表的意义:

• blockcommentend() 块注释结束
  代表注释结束的部分， 根据当前语句位置，可以是"-->" "*/"等!!
• blockcommentstart() 块注释开始
  代表注释开始的部分， 根据当前语句位置，可以是"/\*" "<!--"等!!

• camelcase(String) 小驼峰命名
  单独用没什么用，但是配合其他变量便能发挥出它的威力了，例子如下:

  • 当前文件名：dom-to-image.min.js
  • 创建片段名为test, 内容为$1$
    
  • 编辑变量 ( Expression中的内容是可编辑的！ )
    

  • 在文件中输入test

    内容被替换为

      domToImageMinJs

• capitalize(String) 首字母大写

  用法同上,以下用法皆相似

• capitalizeAndUnderscore(String)

将字符串的所有字母大写，并在各部分之间插入下划线

• clipboard() 获取剪切板的字符
• commentEnd() 注释结束

  注意和blockcommentend()区分， 一个是行注释一个是块注释

• commentStart() 注释开始
• complete() 在变量的位置调用代码完成。

---

complete的用法还在理解测试中。
一个个测试来的~， 觉得有用可以点个赞。

---

难受，没人看，算了