vscode统计代码行数，前端开发配置、快捷键使用
1、統計代碼行數
使用場景是項目年終統計行數。
實現：在需要統計得文件夾右鍵“在文件夾中查找“?，后輸入篩選得正則表達式 ^b*[^:b#/]+.*$
(注意右邊小圖標都點亮)
?
這里順便將自己使用vscode進行前端開發環境配置歸納一下，便于自己以后快速搭建
vscode是微軟開發的的一款代碼編輯器，就如官網上說的一樣，vscode重新定義（redefined）了代碼編輯器。當前市面上常用的輕型代碼編輯器主要是：sublime，notepad++，editplus，atom這幾種。比起notepad++、editplus，vscode集成了許多IDE才具有的功能，比起它們更像一個代碼編輯器；比起sublime，vscode顏值更高，安裝配置插件更為方便；比起atom，vscode啟動速度更快，打開各種大文件不卡。可以說，vscode既擁有高自由度、又擁有高性能和高顏值，最關鍵的是，vscode還是一款免費并且有團隊持續快速更新的代碼編輯器。可以說，vscode是代碼編輯器的首選。個人推薦編寫前端代碼時，代碼編輯器選擇vscode，IDE選擇WebStorm。
根據個人愛好和習慣選擇代碼編輯器。
個人現在基本選擇notepad++/editplus進行代碼臨時查看，用vscode編碼；
?
2、安裝vscode
百度網盤下載：https://pan.baidu.com/s/1ovLRROX0g-6Nm4pOQgRDGQ
?
3、安裝插件
?
vscode開發需要安裝常用的插件，提供編碼或調試輔助，下圖是我選擇安裝的插件（擴展）
?
Auto Close Tag? ? ?-> >?自動閉合HTML/XML標簽
Auto Rename Tag? ? ?-> >?自動完成另一側標簽的同步修改
Beautify? ? ?-> > 格式化代碼，F1快捷鍵選擇格式化CSS/ html / js
Bracket Pair Colorizer? ? ?-> >?給括號加上不同的顏色，便于區分不同的區塊，使用者可以定義不同括號類型和不同顏色
Debugger for Chrome ? ?-> >?映射vscode上的斷點到chrome上，方便調試
HTML CSS Support? ? ?-> >?智能提示CSS類名以及id
HTML Snippets? ? ?-> >?智能提示HTML標簽，以及標簽含義，類似有JavaScript(ES6) code snippets、還有jQuery、vue、react等語言或框架的代碼智能提示
open in browser? ? ?-> >?而該插件支持快捷鍵與鼠標右鍵快速在瀏覽器中打開html文件，支持自定義打開指定的瀏覽器，包括：Firefox，Chrome，Opera，IE以及Safari
Path Intellisense? ? ?-> >?自動提示文件路徑，支持各種快速引入文件
Vetur? ? ?-> >?Vue多功能集成插件，包括：語法高亮，智能提示，emmet，錯誤提示，格式化，自動補全，debugger。vscode官方欽定Vue插件，Vue開發者必備。
filesize? ? ?-> >?在底部狀態欄顯示當前文件大小，點擊后還可以看到詳細創建、修改時間
vscode-icon? ? ?-> >?讓 vscode 資源樹目錄加
quokka? ? ?-> >?一個調試工具插件，能夠根據你正在編寫的代碼提供實時反饋。它易于配置，并能夠預覽變量的函數和計算值結果。另外，在使用 JSX 或 TypeScript 項目中，它能夠開箱即用
CSS Peek? ? ?-> >?以追蹤至樣式表中 CSS 類和 ids 定義的地方。當你在 HTML 文件中右鍵單擊選擇器時，選擇“ Go to Definition 和 Peek definition ”選項，它便會給你發送樣式設置的 CSS 代碼
HTML Boilerplate? ? ?-> >?讓 vscode 資源樹目錄加
Icon Fonts? ? ?-> >?這是一個能夠在項目中添加圖標字體的插件。該插件支持超過 20 個熱門的圖標集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons
Prettier???-> >?是目前 Web 開發中最受歡迎的代碼格式化程序。安裝了這個插件，它就能夠自動應用Prettier，并將整個 JS 和 CSS 文檔快速格式化為統一的代碼樣式。
Color Info? ? ?-> >?提供你在 CSS中使用顏色的相關信息。你只需在顏色上懸停光標，就可以預覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關信息了。
Minify? ? ?-> >?這是一款用于壓縮合并 JavaScript 和 CSS 文件的應用程序。它提供了大量自定義的設置，以及自動壓縮保存并導出為.min文件的選項。它能夠分別通過 uglify-js、clean-css 和 html-minifier，與 JavaScript、CSS 和 HTML 協同工作。使用F1 運行文件縮小器Minify
Element-Helper? ? ?-> >?支持element-ui 標簽
svg-viewer? ? ?-> >?支持svg預覽
?
?
4、自定義配置
可以在“文件->首選項->設置”的“用戶設置”里添加；
也可以，通過 “Ctrl+Shift+P” 打開命令面板輸入settings，選擇進行用戶自定義設置；
配置文件
{// tab長度"editor.tabSize": 2,// 啟用后，將在保存文件時剪裁尾隨空格。"files.trimTrailingWhitespace": true,// Git 可執行文件路徑"git.path": " C:/Program Files (x86)/Git/bin/git.exe","workbench.iconTheme": "vscode-icons",// 以像素為單位控制字號。"editor.fontSize": 19,//文件切換到別的頁面時候自動保存"files.autoSave": "onFocusChange","editor.wordWrap": "on",// 在 "editor.wordWrap" 為 "wordWrapColumn" 或 "bounded" 時控制編輯器列的換行。"editor.wordWrapColumn": 0,"emmet.syntaxProfiles": {"vue-html": "html","vue": "html" }, "editor.quickSuggestions": {"strings": true } }
?
5、快捷鍵使用
?
主命令框
F1?或?Ctrl+Shift+P: 打開命令面板。在打開的輸入框內，可以輸入任何命令，例如：
- 按一下?Backspace?會進入到?Ctrl+P?模式
- 在?Ctrl+P?下輸入?>?可以進入?Ctrl+Shift+P?模式
在?Ctrl+P?窗口下還可以:
- 直接輸入文件名，跳轉到文件
- ??列出當前可執行的動作
- !?顯示?Errors或?Warnings，也可以?Ctrl+Shift+M
- :?跳轉到行數，也可以?Ctrl+G?直接進入
- @?跳轉到?symbol（搜索變量或者函數），也可以?Ctrl+Shift+O?直接進入
- @?根據分類跳轉?symbol，查找屬性或函數，也可以?Ctrl+Shift+O?后輸入:進入
- #?根據名字查找?symbol，也可以?Ctrl+T
?
編輯器與窗口管理
?
代碼編輯
光標相關
重構代碼
查找替換
顯示相關
其他
- 自動保存：File -> AutoSave?，或者?Ctrl+Shift+P，輸入?auto
?
修改默認快捷鍵
打開默認鍵盤快捷方式設置：
File -> Preferences -> Keyboard Shortcuts，或者：Alt+F -> p -> k
修改?keybindings.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"},// 定制與 sublime 相同的大小寫轉換快捷鍵，需安裝 TextTransform 插件{"key": "ctrl+k ctrl+u","command": "uppercase","when": "editorTextFocus"},{"key": "ctrl+k ctrl+l","command": "lowercase","when": "editorTextFocus"} ]?
參考學習：
https://lzw.me/a/vscode-visual-studio-code-shortcut.html
?
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的vscode统计代码行数，前端开发配置、快捷键使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【学术相关】新一轮“双一流”名单公布！这
- 下一篇： 浏览器tab标签显示网站标志图标