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的用法還在理解測試中。
一個個測試來的~， 以爲有用能夠點個贊。

---

難受，沒人看，算了