vscode 簡介


方便的git管理

支持基本所有的常用操作,圖形化操作git代碼沖突合並 修改對比 圖形化的git log歷史,多分支顯示 便捷的最新修改記錄,git lens 多種多樣的git插件

markdown

多樣化的markdown展示 能夠上傳網絡圖片

代碼編寫

多點編輯

啟動快捷,輕量級編輯器

安裝

打開https://code.visualstudio.com選擇版本下載

配置命令行啟動(mac/linux環境)方法一alias code='/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code'

傳送門

方法二

VS Code 提供了一個 code 命令,用來在 shell 環境下調用編輯器。使用快捷鍵 ⇧⌘P(或 F1) 喚起命令面板,輸入以下命令即可完成安裝。

enter image description here 基本配置

通過Code->首選項->設置打開配置,一般來說安裝插件會自動添加配置。如有需要也可以自行設置配置。以下是一些簡單的配置,具體詳情可查看配置文件。

該設置在 `editor.detectIndentation` 啟用時根據文件內容進行重寫。 "editor.tabSize": 2, "editor.detectIndentation": true, // 針對JavaScript語言的配置 "[javascript]": { "editor.insertSpaces": true, "editor.tabSize": 2 }, // 指定工作台中使用的顏色主題。 "workbench.colorTheme": "Monokai Dimmed", // gitlens配置 "gitlens.advanced.messages": { "suppressCommitHasNoPreviousCommitWarning": false, "suppressCommitNotFoundWarning": false, "suppressFileNotUnderSourceControlWarning": false, "suppressGitVersionWarning": false, "suppressLineUncommittedWarning": false, "suppressNoRepositoryWarning": false, "suppressUpdateNotice": false, "suppressWelcomeNotice": true }, // 控制是否顯示minimap "editor.minimap.enabled": true }基本操作 打開項目windows: 直接拖動文件/文件夾至vscode即可打開 mac/linux: 除上面方法外,可配置code命令,通過在命令行運行code XXX打開項目。打開控制台

執行ctrl+shift+p即可打開vscode控制台。

控制台是vscode插件執行部分的一個重要地方!打開命令行

點擊vscode下方的任務欄

打開分屏

右上角分屏按鍵

跳轉到定義的地方

ctrl + 鼠標

多重光標操作

alt+鼠標點擊

塊選擇

shift+alt+鼠標

folding折疊Fold (Ctrl+Shift+[) 折疊所在的這個部分 Unfold (Ctrl+Shift+]) 取消所在部分的折疊 Fold All (Ctrl+K Ctrl+0) 折疊當前編輯文件的所有可折疊部分 Unfold All (Ctrl+K Ctrl+J) 取消當當前文件所有折疊 Fold Level X (Ctrl+K Ctrl+2 for level 2) 折疊所有level x(還可以用 ctrl+3、ctrl+4等)的縮進去(除了當前編輯位置所在的)注釋

ctrl+/加/解注釋

git log

打開vscode控制台,輸入git log可查看(需安裝Git History插件)

git提交描述

安裝git lens插件后,會在每行代碼后顯示最近的修改信息

git基本操作

打開vscode控制台,可以輸入git命令。

插件markdown Markdown Preview Enhanced Html Auto Close Tag HTML CSS Support在 html 標簽上寫class 智能提示當前項目所支持的樣式(必備)htmltagwrap HTML Boilerplate Color Info 樣式Sass 調試Code Runner Debugger for Chrome Quokkaconsole.log顯示CSS Peek 代碼風格htmlhint ESLint EditorConfig for VS Code用於支持 .editorconfig 配置規范git流程管理Git History Git Lens 代碼碎片JavaScript (ES6) code snippets JavaScript Snippet Pack jQuery Code Snippets React-Native/React/Redux snippets for es6/es7react代碼片段,下載人數超多:wink:vue vetur語法高亮、智能感知VueHelpervue代碼碎片Vue 2 Snippetsvue2代碼碎片 正則Regex Previewer測試正則的插件 小玩意filesize ndenticator突出目前的縮進深度Live Sass Compiler open in browser Path Intellisense vscode-faker生成假數據,地址,電話,圖片等等vscode-icons TODO Parser TODO Highlight 好用的小功能 內部使用的命令行環境

cmder基本配置和使用

代碼片段

通過Code > 首選項 > 用戶代碼片段,選擇進入目的語言的代碼段設置文件;

一個簡單的例子:

"For Loop": { "prefix": "for", "body": [ "for (var ${index} = 0; ${index}

詳細的說明請看這里[VS Code]跟我一起在Visual Studio Code 添加自定義snippet(代碼段),附詳細配置。

一般來說,網上已經有很多人寫好了很多好用的snippet,在插件中搜索snippet查找相關的代碼片段使用。

傳送門

vscode 基本配置和使用VS Code配置及插件推薦vscode配置指南VS Code初體驗[VS Code]跟我一起在Visual Studio Code 添加自定義snippet(代碼段),附詳細配置


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM