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