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的用法还在了解测试中。
一个个测试来的~， 感觉有用能够点个赞，今天持续更新