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

?

編輯器與窗口管理

打開一個新窗口：?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

擴展/縮小選取范圍：?Shift+Alt+Left?和?Shift+Alt+Right

多行編輯(列編輯)：Alt+Shift+鼠標左鍵，Ctrl+Alt+Down/Up

同時選中所有匹配：?Ctrl+Shift+L

Ctrl+D?下一個匹配的也被選中 (在 sublime 中是刪除當前行，后面自定義快鍵鍵中，設置與?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

顯示相關

全屏：F11

zoomIn/zoomOut：Ctrl +/-

側邊欄顯/隱：Ctrl+B

顯示資源管理器?Ctrl+Shift+E

顯示搜索?Ctrl+Shift+F

顯示 Git?Ctrl+Shift+G

顯示 Debug?Ctrl+Shift+D

顯示 Output?Ctrl+Shift+U

其他

• 自動保存：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统计代码行数，前端开发配置、快捷键使用的全部內容，希望文章能夠幫你解決所遇到的問題。

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