入行較淺，據我了解的，很多的前端都使用的 VScode，免費開源，各種自定義配置，體驗很好。因為一開始接觸前端時，用的就是 webstorm，之后嘗試過 VScode，還是不太適應。

所以，這次想介紹一下測試和收集到的，關于 webstorm 的一些設置。

所有截圖均是mac下的webstorm，與windows的差別幾乎很小。

希望可以幫助到大家。

1，常用基礎配置

webstorm 也是一樣可以引入各種 jar 包，來實現不同的主題。

也正是因為找不到自己心儀的主題，所以只能自己慢慢進行測試，自定義。

1.1，編輯區域字體

使用這個字體 Courier New，是因為英文和中文的標點符號，非常容易區分。

1.2，編輯區域背景色

設置的是護眼色

1.3，鼠標點到某一行的行色

1.4，鼠標選中某一段代碼的背景色

1.5，控制臺的設置

這里設置的字體，默認跟隨編輯區域的字體設置。

背景色，也是護眼色。

1.6，代碼中注釋的字體顏色（注意是設置Foreground）

Block comment 多行注釋的字體顏色

Doc Comment 文檔注釋的字體顏色（一般用不到）

Line comment 單行注釋的字體顏色

2，輔助設置

2.1，表示顏色的css代碼上，直接顯示其背景色。

直接看圖演示更容易理解。（雞肋）

但其實默認在左邊行號的后面，就有顏色的顯示，并且點擊還可以顯示調色板。

2.1，方法之間會有分割線。

經測試，在框架中如React中，也是適用的，偶爾會有點不準。
上面那個 show line numbers 就是顯示代碼左側的行號的（默認是有的）。

2.3，忽略首字符匹配

默認是First letter。

舉個例子，如果想使用 Math對象的一些方法，在鍵入 Math 時，想要有提示，第一個 M 必須大寫，才會為你提示Math

設置為 None 后，諸如此類的需要首字母大寫才能匹配出提示的，都可以直接寫小寫字母就會有提示。

2.4，多行顯示

（默認是勾選的）取消勾選，一行顯示不下時，會多行顯示。
多行效率比單行高，因為單行會隱藏超過界面部分 Tab，這樣找文件不方便。

3，自定義代碼模板

如下定義表示： 鍵入 con ，敲 tab 鍵，就會輸出console.log()，并且光標在括號內。

設置步驟：

點擊右側加號

對比上面所示的例子，對應位置自己輸入。

點擊右下方的Change，來確定該模板使用在哪里。

apply，ok 即可。

$end$，是已經定義好的變量，代表光標的位置。 也可以自定義變量，在如上圖示 右邊的 Edit variables。

如下例子配置，鍵入 fori，就如下圖示：

4，其他待續

轉載于:https://juejin.im/post/5bd912d86fb9a05d0530f491

總結

以上是生活随笔為你收集整理的webstorm设置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。