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的用法还在理解测试中。
一个个测试来的~， 以为有用能够点个赞。

---

难受，没人看，算了