webstorm使用設(shè)置

1. 常用快捷鍵

ctrl+k git提交
ctrl+shift+k 推送本地已提交
ctrl+ctrl 雙擊ctrl 可打開Run Anything運(yùn)行命令框
ctrl+alt+左 回到上次光標(biāo)的位置
ctrl+alt+右 跳轉(zhuǎn)到下次光標(biāo)的位置
ctrl+f 在當(dāng)前文檔查詢
ctrl+shift+f 全局查找(可選擇查找范圍)
ctrl+r 替換
ctrl+d 復(fù)制當(dāng)前行
shift+f6 重命名變量名稱
ctrl+shift+n 根據(jù)文件名查找文件
ctrl+b 光標(biāo)在變量或函數(shù)名成中,跳轉(zhuǎn)到定義
ctrl+shift+b 跳轉(zhuǎn)變量或函數(shù)的實(shí)現(xiàn)
alt+1 切換展開工程文件列表框
ctrl+f12 查看當(dāng)前文件的數(shù)據(jù)結(jié)構(gòu)
ctrl+alt+f12 選擇文件并在文件夾中打開
ctrl+alt+y 從硬盤中重新加載
f11 在當(dāng)前行添加或取消書簽
ctrl+f11 添加帶有數(shù)字標(biāo)記的書簽
ctrl+數(shù)字 跳轉(zhuǎn)到對應(yīng)數(shù)字標(biāo)記的書簽位置
ctrl+shift+數(shù)字 快速定義帶有數(shù)字的書簽
shift+f11 查看所有書簽
ctrl+- 折疊當(dāng)前光標(biāo)所在位置的代碼
ctrl++ 展開當(dāng)前光標(biāo)所在位置的代碼
ctrl+shift+- 折疊當(dāng)前頁代碼
ctrl+shift++ 展開當(dāng)前折疊的代碼
ctrl+[ 光標(biāo)跳轉(zhuǎn)到當(dāng)前塊的開始位置
ctrl+] 光標(biāo)跳轉(zhuǎn)到當(dāng)前塊的結(jié)束位置
alt+f11 打開運(yùn)行Gulp/Grunt/npm 任務(wù)框
shift+f9 已debug模式運(yùn)行當(dāng)前配置項(xiàng) 如dev
shift+f10 運(yùn)行當(dāng)前配置項(xiàng) 如dev
alt+shift+f10 執(zhí)行run
alt+shift+f9 已debu模式執(zhí)行run
ctrl+f2 停止執(zhí)行
ctrl+shift+f2 停止執(zhí)行后臺運(yùn)行的進(jìn)程
ctrl+/ 當(dāng)行注釋
ctrl+shift+/ 多行注釋 ,(也可使用輸入/**后回車,自動補(bǔ)全已有變量(常用))
ctrl+alt+l 格式化當(dāng)前文件
ctrl+alt+shift+l 格式化全部文件
ctrl+shift+上/下 將當(dāng)前選中塊移動到上/下方模塊上/下面
alt+shift+上/下 將當(dāng)前行移動到上/下方行的上/下面
ctrl+g 跳轉(zhuǎn)當(dāng)輸入行號
f2 高亮當(dāng)前頁下一個(gè)錯誤項(xiàng)
shift+f2 高亮當(dāng)前頁上一個(gè)錯誤項(xiàng)
ctrl+shift+backspace 回到上一次編輯的位置
ctrl+alt+上/下 當(dāng)前頁上/下一個(gè)todo
ctrl+e 展示最近打開使用的文件
ctrl+shift+e 用列表形式展開最近編輯過的文件位置信息, 類似于git的diff
ctrl+` 快速切換結(jié)構(gòu)模式
alt+shift+. 增加字號
alt+shift+, 減少字號
alt+shift+g 將光標(biāo)移動到當(dāng)前行尾位置
ctrl+w 擴(kuò)大光標(biāo)位置的選擇, 多次ctrl+w繼續(xù)擴(kuò)大
ctrl+shift+w 縮小光標(biāo)位置的選擇, 多次ctrl+shift+w繼續(xù)縮小
ctrl+shift+u 切換全大寫或全小寫當(dāng)前變量
ctrl+shift+j 將下一行已不換行形式連接
tab 插入tab空格
shift+tab 減少tab空格

2. 添加文件模板 Editor> File and code Templates>Files +

vue模板

<template>
  <div>new template</div>
</template>
<script>
  export default{
    name: "",
    props: {},
    data(){
      return {}
    },
    watch: {},
    computed: {},
    methods: {},
    mounted(){
    },
    components: {},
    destroyed(){
    }
  }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
</style>

另外一個(gè)- 最新的Vue Composition模板:

<template>
  <div class="${NAME}">
    ${NAME}#[[$END$]]#
  </div>
</template>
<script setup${SCRIPT_LANG_ATTR}>

</script>
<style ${STYLE_LANG_ATTR}>
.${NAME}{
    
}
</style>

3. 添加快捷鍵

上下左右: ctrl+alt+u ctrl+alt+i ctrl+alt+j ctrl+alt+k
home ctrl+alt+h
end ctrl+alt+;
向前移動一個(gè)單詞 ctrl+alt+shift+j
向后移動一個(gè)單詞 ctrl+alt+shift+k
ctrl+shift+h 向前全選
ctrl+shift+; 向后全選
ctrl+alt+z 跳轉(zhuǎn)到上次位置
ctrl+alt+x 跳轉(zhuǎn)到下次位置

4. 快速跳轉(zhuǎn)到代碼某個(gè)位置, 不使用鼠標(biāo)

類似于瀏覽器插件Vimium中的F鍵
步驟:

1.先按Ctrl+; (注: 此處的;是鍵盤上的L鍵的右邊那個(gè)鍵), 進(jìn)入insert模式

  1. 此時(shí)可輸入想要跳轉(zhuǎn)的地方的字母或其他任意字符, 編輯器便會自動定位并編號, 一般都是兩位
  2. 輸入想要跳轉(zhuǎn)的位置的編號即可跳轉(zhuǎn)
    演示:


    任意位置跳轉(zhuǎn)

5. 塊注釋快捷鍵 Editor > Live Template > JavaScript > +

Abbreviation: ///
Description: 塊注釋
Template text:
/**
 * $VAR$
 */  
Expand with:Tab
  • ()[]{} 自動補(bǔ)全選項(xiàng) Editor > General > Code Folding> 選中 Handlebars/Mustache blocks 并且 Editor > General > Smart Keys 選中Insert pair bracket 和 Insert pair quote 和 AngularJS Auto-insert whitespace in the interpolations

  • Tab欄 設(shè)置 Editor > General > Editor Tabs 取消 Show "close" button on editor tabs 選中 Mark modified tabs with asterisk(編輯沒保存時(shí)會有*)

  • 用點(diǎn)后一個(gè)后綴自動完成一些函數(shù) Editor > General > Postfix Completion 選中 Enable postfix completion

  • 選中文本后輸入引號或括號自動包裹選中的文本 Editor > General > Smart Keys 選中 Surround selection on typing quote or brace

  • snippets 設(shè)置自己的代碼片段.ctrl+shift+p打開命令行工具 輸入snippets后選擇首選項(xiàng):打開用戶代碼片段,然后輸入JavaScript,隨后進(jìn)入到了javascript.json文件(該文件一般位于c:\User\用戶名\AppData\Roaming\Code\User\snippets]\javascript.json),然后就可以依照所給的示例進(jìn)行打造自己的片段庫了.

  • 新建文件時(shí)自動帶上創(chuàng)建人和日期
    File>Settings>File and Code Templates>Includes>File Header 設(shè)置內(nèi)容為

/**
 * Created by $USER_NAME on ${DATE}.
 */

6. 必備插件

.ignore
acejump
key promoter x 快捷鍵提示
codeGlance2 代碼縮略圖

7. bookmark 書簽的妙用

f11 添加書簽
ctrl+ f11 添加帶有數(shù)字標(biāo)記的書簽
ctrl+數(shù)字 跳轉(zhuǎn)到對應(yīng)數(shù)字標(biāo)記的書簽位置
shift+f11 查看所有書簽

8 . 修改換行長度, 一行顯示長度

由原來的120 調(diào)整為180 , 現(xiàn)代顯示器顯示的寬度都比較寬, 故對此調(diào)節(jié)可閱讀更多內(nèi)容
settings=>Editor=>Code Style=>General=>Hard wrap at: 180

9. 將設(shè)置同步到云端

a. 賬戶同步
b. 申請一個(gè)倉庫同步

a. 賬戶同步比較簡單,
找到設(shè)置位置 File->Manage IDE Settings -> Sync Settings to JetBrains Account


賬戶同步設(shè)置

b. 申請個(gè)一個(gè)代碼倉庫保存,可以是公開的倉庫也可以是私人倉庫。
因網(wǎng)絡(luò)速度原因,可以選擇Gitee私有倉庫,當(dāng)然公開了設(shè)置問題也不大,私有最安全
首先在gitee上申請一個(gè)倉庫,然后將倉庫https鏈接設(shè)置到webstorm即可
位置 File->Manage IDE Settings -> Settings Repository

Settings Repository

將申請的https://gitee.com/xxx/xxx.git 填入
Settings Repository input

然后下面又三個(gè)選項(xiàng),

  1. Merge:
    如果本地已有配置可以選擇Merge按鈕,將遠(yuǎn)端和本地都保留下來
  2. Overwrite Local
    覆蓋本地設(shè)置
  3. Overwrite Remote
    將本地配置上傳并覆蓋遠(yuǎn)端的配置

10. 在webstorm中調(diào)試vue項(xiàng)目(vite版)

  1. 確保node.js插件已啟用


    Node.js插件啟用
  2. 編輯Run/Debug Configurations


    Edit Configurations
Run/Debug Configurations
配置js運(yùn)行文件vite.js文件
配置Browser
debug run

如果配置了vite.config.js中open:true 則會彈出兩個(gè)瀏覽器, 建議open:false , 這樣彈出的瀏覽器就是debug啟動的, 只有在debug啟動下的瀏覽器才能響應(yīng)代碼斷點(diǎn)調(diào)試

效果如下:


debug調(diào)試

代碼斷點(diǎn)

調(diào)試js的效果很好 , 有種開發(fā)后端的感覺了!!!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容