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)到對(duì)應(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í)行后臺(tái)運(yùn)行的進(jìn)程
ctrl+/ 當(dāng)行注釋
ctrl+shift+/ 多行注釋 ,(也可使用輸入/**后回車,自動(dòng)補(bǔ)全已有變量(常用))
ctrl+alt+l 格式化當(dāng)前文件
ctrl+alt+shift+l 格式化全部文件
ctrl+shift+上/下 將當(dāng)前選中塊移動(dòng)到上/下方模塊上/下面
alt+shift+上/下 將當(dāng)前行移動(dòng)到上/下方行的上/下面
ctrl+g 跳轉(zhuǎn)當(dāng)輸入行號(hào)
f2 高亮當(dāng)前頁下一個(gè)錯(cuò)誤項(xiàng)
shift+f2 高亮當(dāng)前頁上一個(gè)錯(cuò)誤項(xiàng)
ctrl+shift+backspace 回到上一次編輯的位置
ctrl+alt+上/下 當(dāng)前頁上/下一個(gè)todo
ctrl+e 展示最近打開使用的文件
ctrl+shift+e 用列表形式展開最近編輯過的文件位置信息, 類似于git的diff
ctrl+` 快速切換結(jié)構(gòu)模式
alt+shift+. 增加字號(hào)
alt+shift+, 減少字號(hào)
alt+shift+g 將光標(biāo)移動(dòng)到當(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+;
向前移動(dòng)一個(gè)單詞 ctrl+alt+shift+j
向后移動(dòng)一個(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模式
- 此時(shí)可輸入想要跳轉(zhuǎn)的地方的字母或其他任意字符, 編輯器便會(huì)自動(dòng)定位并編號(hào), 一般都是兩位
-
輸入想要跳轉(zhuǎn)的位置的編號(hào)即可跳轉(zhuǎn)
演示:
任意位置跳轉(zhuǎn)
5. 塊注釋快捷鍵 Editor > Live Template > JavaScript > +
Abbreviation: ///
Description: 塊注釋
Template text:
/**
* $VAR$
*/
Expand with:Tab
()[]{} 自動(dòng)補(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í)會(huì)有*)
用點(diǎn)后一個(gè)后綴自動(dòng)完成一些函數(shù) Editor > General > Postfix Completion 選中 Enable postfix completion
選中文本后輸入引號(hào)或括號(hào)自動(dòng)包裹選中的文本 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í)自動(dòng)帶上創(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)到對(duì)應(yīng)數(shù)字標(biāo)記的書簽位置
shift+f11 查看所有書簽
8 . 修改換行長(zhǎng)度, 一行顯示長(zhǎng)度
由原來的120 調(diào)整為180 , 現(xiàn)代顯示器顯示的寬度都比較寬, 故對(duì)此調(diào)節(jié)可閱讀更多內(nèi)容
settings=>Editor=>Code Style=>General=>Hard wrap at: 180
9. 將設(shè)置同步到云端
a. 賬戶同步
b. 申請(qǐng)一個(gè)倉庫同步
a. 賬戶同步比較簡(jiǎn)單走搁，
找到設(shè)置位置 File->Manage IDE Settings -> Sync Settings to JetBrains Account
b. 申請(qǐng)個(gè)一個(gè)代碼倉庫保存忌栅，可以是公開的倉庫也可以是私人倉庫索绪。
因網(wǎng)絡(luò)速度原因贫悄，可以選擇Gitee私有倉庫窄坦，當(dāng)然公開了設(shè)置問題也不大唤反，私有最安全
首先在gitee上申請(qǐng)一個(gè)倉庫，然后將倉庫https鏈接設(shè)置到webstorm即可
位置 File->Manage IDE Settings -> Settings Repository
將申請(qǐng)的https://gitee.com/xxx/xxx.git 填入
然后下面又三個(gè)選項(xiàng)嫡丙，
- Merge:
如果本地已有配置可以選擇Merge按鈕拴袭，將遠(yuǎn)端和本地都保留下來 - Overwrite Local
覆蓋本地設(shè)置 - Overwrite Remote
將本地配置上傳并覆蓋遠(yuǎn)端的配置
10. 在webstorm中調(diào)試vue項(xiàng)目(vite版)
-
確保node.js插件已啟用
Node.js插件啟用 -
編輯Run/Debug Configurations
Edit Configurations
如果配置了vite.config.js中open:true 則會(huì)彈出兩個(gè)瀏覽器, 建議open:false , 這樣彈出的瀏覽器就是debug啟動(dòng)的, 只有在debug啟動(dòng)下的瀏覽器才能響應(yīng)代碼斷點(diǎn)調(diào)試
效果如下:
調(diào)試js的效果很好 , 有種開發(fā)后端的感覺了!!!
