摘要:更好的斷點控制啟用禁用重新啟用可以在調試視圖中的斷點區域設置。編輯器邊距中的斷點一般用紅色的實心圓表示。前端開發必備插件功能性插件匹配標簽,關閉對應的標簽。這可以使得團隊內的書寫更為規范且具有一致性。
Visual Studio Code是個現下比較流行的編輯器,啟動非常快,完全可以用來代替其他文本文件編輯工具。又可以用來做開發,支持各種語言,相比其他IDE,輕量級完全可配置還集成Git感覺非常的適合前端開發。 所以我仔細研究了一下文檔未來可能會作為主力工具使用。
牛逼調試工具VS Code的內置調試器幫助加速你的編輯,編譯和調試循環。總覽一下調試框的幾個功能分區 運行配置
創建你的運行配置文件 - launch.json
單擊最上方面板調試視圖中的齒輪圖標,選擇調試環境,然后VS Code將在你的工作空間的 .vscode目錄下生成一個launch.json文件。
調試器環境配置栗子生成的Node.js調試器
{ "version": "0.2.0", "configurations": [ { "name": "Launch", "type": "node", "request": "launch", "program": "${workspaceRoot}/app.js", "stopOnEntry": false, "args": [], "cwd": "${workspaceRoot}", "preLaunchTask": null, "runtimeExecutable": null, "runtimeArgs": [ "--nolazy" ], "env": { "NODE_ENV": "development" }, "externalConsole": false, "sourceMaps": false, "outDir": null }, { "name": "Attach", "type": "node", "request": "attach", "port": 5858, "address": "localhost", "restart": false, "sourceMaps": false, "outDir": null, "localRoot": "${workspaceRoot}", "remoteRoot": null } ] }
生成chrome調試器
{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome", "url": "http://localhost:8085", "webRoot": "${workspaceRoot}/FrontEnd/src/main.js" } ] }
下面以生成chrome調試器,進入調試模式為例描述一下步驟調試動作
一旦開始一個調試會話,調試動作面板將出現在編輯器的最上方
繼續 / 暫停 kb(workbench.action.debug.continue)
單步跳過 kb(workbench.action.debug.stepOver)
單步跳入 kb(workbench.action.debug.stepInto)
單步跳出 kb(workbench.action.debug.stepOut)
重新啟動 kb(workbench.action.debug.restart)
停止 kb(workbench.action.debug.stop)
Continue / Pause kb(workbench.action.debug.continue)
Step Over kb(workbench.action.debug.stepOver)
Step Into kb(workbench.action.debug.stepInto)
Step Out kb(workbench.action.debug.stepOut)
Restart kb(workbench.action.debug.restart)
Stop kb(workbench.action.debug.stop)
斷點點擊編輯器邊距可以設置或取消斷點。更好的斷點控制(啟用/禁用/重新啟用)可以在調試視圖中的斷點區域設置。
編輯器邊距中的斷點一般用紅色的實心圓表示。
禁用的斷點有一個涂成灰色的圓。
當一個調試會話開始后,不能注冊到調試器的斷點變為灰色突起的圓。
數據注入注入變量到調試視圖的變量區域,或者通過懸停在編輯器中的源碼上。變量和表達式計算是相對于調用棧中選中的棧幀的。主命令框
最重要的功能就是F1或Ctrl+Shift+P打開的命令面板了,在這個命令框里可以執行VSCode的任何一條命令,甚至關閉這個編輯器。在Ctrl+P窗口下還可以進行一下操作
按一下Backspace會進入到Ctrl+P模式里
在Ctrl+P下輸入>又可以回到Ctrl+Shift+P模式。
直接輸入文件名,跳轉到文件
? 列出當前可執行的動作
! 顯示Errors或Warnings,也可以`Ctrl+Shift+M
: 跳轉到行數,也可以Ctrl+G直接進入
@ 跳轉到symbol(搜索變量或者函數),也可以Ctrl+Shift+O直接進入
@:根據分類跳轉symbol,查找屬性或函數,也可以Ctrl+Shift+O后輸入:進入
# 根據名字查找symbol,也可以Ctrl+T
常用快捷鍵整理 編輯器與窗口管理打開一個新窗口: Ctrl+Shift+N
關閉窗口: Ctrl+Shift+W
新建文件 Ctrl+N
文件之間切換 Ctrl+Tab
切出一個新的編輯器(最多3個)Ctrl+,也可以按住Ctrl鼠標點擊Explorer里的文件名
左中右3個編輯器的快捷鍵Ctrl+1 Ctrl+2 Ctrl+3
3個編輯器之間循環切換 Ctrl+`
編輯器換位置,Ctrl+k然后按Left或Right
代碼編輯代碼行縮進Ctrl+[ Ctrl+]
Ctrl+C Ctrl+V如果不選中,默認復制或剪切一整行
代碼格式化:Shift+Alt+F,或Ctrl+Shift+P后輸入format code
上下移動一行: Alt+Up 或 Alt+Down
向上向下復制一行: Shift+Alt+Up或Shift+Alt+Down
在當前行下邊插入一行Ctrl+Enter
在當前行上方插入一行Ctrl+Shift+Enter
移動到行首:Home
移動到行尾:End
移動到文件結尾:Ctrl+End
移動到文件開頭:Ctrl+Home
移動到定義處:F12
定義處縮略圖:只看一眼而不跳轉過去Alt+F12
移動到后半個括號 Ctrl+Shift+]
選擇從光標到行尾Shift+End
選擇從行首到光標處Shift+Home
刪除光標右側的所有字Ctrl+Delete
Shrink/expand selection: Shift+Alt+Left和Shift+Alt+Right
Multi-Cursor:可以連續選擇多處,然后一起修改,Alt+Click添加cursor或者Ctrl+Alt+Down 或 Ctrl+Alt+Up
同時選中所有匹配的Ctrl+Shift+L
Ctrl+D下一個匹配的也被選中(被我自定義成刪除當前行了,見下邊Ctrl+Shift+K)
回退上一個光標操作Ctrl+U
找到所有的引用:Shift+F12
同時修改本文件中所有匹配的:Ctrl+F12
重命名:比如要修改一個方法名,可以選中后按F2,輸入新的名字,回車,會發現所有的文件都修改過了
跳轉到下一個Error或Warning:當有多個錯誤時可以按F8逐個跳轉
查看diff 在explorer里選擇文件右鍵 Set file to compare,然后需要對比的文件上右鍵選擇Compare with "file_name_you_chose".
查找 Ctrl+F
查找替換 Ctrl+H
整個文件夾中查找 Ctrl+Shift+F
終端:Ctrl + 、 打開終端,可以直接在此處啟動node環境項目
調試控制臺:Ctrl+Shift+Y
輸出:Ctrl+Shift+U
問題:Ctrl+Shift+M 警告錯誤會在此輸出
全屏:F11
zoomIn/zoomOut:Ctrl + =/Ctrl + -
側邊欄顯/隱:Ctrl+B
其他自動保存:File -> AutoSave ,或者Ctrl+Shift+P,輸入 auto
修改默認快捷鍵File -> Preferences -> Keyboard Shortcuts
修改keybindings.json,我的顯示在這里C:UsersAdministratorAppDataRoamingCodeUserkeybindings.json
// Place your key bindings in this file to overwrite the defaults [ //ctrl+space被切換輸入法快捷鍵占用 { "key": "ctrl+alt+space", "command": "editor.action.triggerSuggest", "when": "editorTextFocus" }, // ctrl+d刪除一行 { "key": "ctrl+d", "command": "editor.action.deleteLines", "when": "editorTextFocus" }, { "key": "ctrl+shift+k", //與刪除一行的快捷鍵互換了:) "command": "editor.action.addSelectionToNextFindMatch", "when": "editorFocus" }, //ctrl+shift+/多行注釋 { "key":"ctrl+shift+/", "command": "editor.action.blockComment", "when": "editorTextFocus" } ]自定義設置參考 vscode 自定義配置參考:
{ "editor.fontSize": 18, "files.associations": { "*.es": "javascript", "*.es6": "javascript" }, // 控制編輯器是否應呈現空白字符 "editor.renderWhitespace": true, // 啟用后,將在保存文件時剪裁尾隨空格。 "files.trimTrailingWhitespace": true, // File extensions that can be beautified as javascript or JSON. "beautify.JSfiles": [ "", "es", "es6", "js", "json", "jsbeautifyrc", "jshintrc" ] }前端開發必備插件 功能性插件
Auto Close Tag : 匹配標簽,關閉對應的標簽。很實用【HTML/XML】
Auto Rename Tag : sublime和webstorm也有這個內置功能,改變標簽的時候同時改動開閉合標簽;【HTML/XML】
Debugger for Chrome :Chrome斷點調試工具,Ctrl + F4
beautify : 良好的拓展性,可以格式化JSON|JS|HTML|CSS|SCSS,比內置格式化好用
Code Runner : 代碼編譯運行看結果,支持眾多語言
colorize : 會給顏色代碼增加一個當前匹配代碼顏色的背景,非常好
Document This : JSDOC注解調用,值得易用
Git History : 不得不贊的插件,誰用誰知道,功能很贊
HTML CSS Support : 這個也是必備插件之一
Path Autocomplete : 路徑智能補全
Path Intellisense : 路徑智能提示
SCSS IntelliSense Preview : SCSS智能提醒,配置強大
Syncing: 這個同步插件要比官方市場那個最高下載量的要好,支持刪除同步!!!
Version Lens : 可以及時看到package.json內部版本的變動,很實用
Output Colorizer : 可以終端日志輸出著色,實用
Add jsdoc comments :添加注釋擴展,打開命令面板(Windows上的f1)并查找命令“Add jsdoc comments”,點擊回車。
Markdown Shortcuts :標記語法的快捷轉化方式
代碼片段插件JavaScript (ES6) code snippets : ES6的代碼片段,實用
JavaScript Snippet Pack : ES5及以下的代碼片段,實用
語法校驗stylelint : 比內置的要全,更智能
stylefmt 是一個基于 stylelint 的代碼修正工具,它可以基于 stylelint
的代碼規范約定配置,對可修正的地方作格式化輸出
PostCSS Sorting : 是一個 CSS 屬性順序約定格式化的插件,基于屬性順序約定,格式化調整其順序。這可以使得團隊內的 CSS 書寫更為規范且具有一致性。
引用一位好心人總結的中文文檔,可以去多多了解https://jeasonstudio.gitbooks...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/90794.html
摘要:在開發的過程中,幾乎不可能一次性就能寫出毫無破綻的程序,斷點調試代碼是一個普遍的需求。作為前端開發工程師,以往我們開發的程序都運行在瀏覽器端,利用提供的開發者工具就可以方便的進行源碼斷點調試。這幾個都是常見的斷點調試指令。 在開發的過程中,幾乎不可能一次性就能寫出毫無破綻的程序,斷點調試代碼是一個普遍的需求。 作為前端開發工程師,以往我們開發的JavaScript程序都運行在瀏覽器端,...
摘要:此擴展使用安裝在已打開的工作區文件夾內的庫。此擴展由開發,是一個與之間的調試適配器。它具有零依賴性,并可以極大程度地工作于任何規模的項目里。查看先前文件的拷貝或者將其與工作區版本或先前版本進行比較,查看編輯器里對活動行的更改。 showImg(https://segmentfault.com/img/remote/1460000018002818?w=1223&h=630); 嗨 工匠...
摘要:接下來的內容將從以下幾方面進行展開調試前端代碼調試通過啟動的服務器要使用的調試功能,首先就得配置文件。調試前端代碼通過調試前端代碼主要依賴于一個插件,該插件主要利用所開放出來的接口來實現對其渲染的頁面進行調試。 本文最初發布于我的個人博客:咀嚼之味 Visual Studio Code (以下簡稱 vscode) 如今已經代替 Sublime,成為前端工程師們最喜愛的代碼編輯器。它作為...
摘要:在這個編輯器中,和是其中排名靠前的兩個。是一個免費的輕量級編輯器和,用于和開發。對于免費的代碼編輯器來說,是一個很好的選擇。可以安裝兩個命令行實用程序,用于從啟動編輯器,用于管理的軟件包。 對于JavaScript程序員來說,目前有很多很棒的工具可供選擇。本文將會討論10個優秀的支持javascript,HTML5和CSS開發,并且可以使用Markdown進行文檔編寫的文本編輯器。為什...
摘要:簡介以下簡稱現在已經漸漸成為前端開發的主力工具,誰讓它這么輕便,功能又這么輕便呢。今天我就把同步設置和插件的方法告訴大家。因為它就是同步設置的關鍵。 showImg(https://segmentfault.com/img/remote/1460000019460993?w=710&h=450); 簡介 Visual Studio Code(以下簡稱vsCode)現在已經漸漸成為前端開...
閱讀 1106·2021-11-23 10:05
閱讀 1785·2021-11-12 10:36
閱讀 1853·2019-08-30 15:56
閱讀 1684·2019-08-29 12:32
閱讀 3043·2019-08-28 18:04
閱讀 3428·2019-08-26 12:17
閱讀 2502·2019-08-26 11:35
閱讀 1240·2019-08-23 15:11