VsCode 技巧和常用插件收集

[TOC]

快捷鍵配置

https://code.visualstudio.com/docs/getstarted/keybindings

常用快捷鍵

功能 macOS linux/windows 用途
命令模式 cmd+shift+p ctrl+shift+p 各種指令功能都靠這個(gè)
快鍵命令 cmd+p ctrl+p 快速打開(kāi)文件，或者執(zhí)行指令
呼出配置界面 cmd+, ctrl+, 打開(kāi)設(shè)置菜單
查詢快捷鍵 cmd+k cmd+s ctrl+k ctrl+s 查詢快捷鍵，注意是按2組
切換語(yǔ)言模式 cmd+k m ctrl+k m 設(shè)置當(dāng)前文本的語(yǔ)法渲染
多行編輯 cmd+shift+l shift+alt+I 多行編輯文本，板磚利器
聚焦側(cè)邊欄 cmd+0 ctrl+0 無(wú)鼠標(biāo)編程必備
切換文件瀏覽 cmd+shift+e ctrl+shift+e 工程文件樹(shù)切換
拆分編輯 cmd+k left ctrl+k left 大屏幕開(kāi)發(fā)必備

macOS命令行中使用vscode打開(kāi)當(dāng)前目錄

  • macOS

~/.bash_profile

# visual studio code
alias code="'/Applications/Visual Studio Code.app/Contents/Resources/app/bin/code'"
alias vsc="code"
export EDITOR="code"

如果使用 zsh 放到 ~/.zshrc 中

使用方法


cd workDir
vsc .
# 或者
code .

Linux 命令行中使用vscode打開(kāi)當(dāng)前目錄

code .

如果無(wú)法使用 code 命令，添加軟鏈接 ln -s [vscode安裝目錄](méi)/bin/code /usr/local/bin/code

windows命令行中使用vscode打開(kāi)當(dāng)前目錄

配置 vscode 安裝目錄的 \bin 目錄到用戶環(huán)境變量的 PATH 中即可,安裝包安裝已經(jīng)自動(dòng)寫(xiě)入這個(gè)環(huán)境變量

用戶配置

這個(gè) json 已經(jīng)隱藏，可以通過(guò) cmd+shift+p or ctrl+shift+p 輸入 open settings json 打開(kāi)配置的json文件

{
    "telemetry.enableTelemetry": false,
    "files.eol": "\n",
    "extensions.autoUpdate": true,
    "files.trimTrailingWhitespace": true,
    "editor.tabSize": 2,
    "editor.formatOnPaste": false,
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.DS_Store": true,
        "**/.idea": true,
        "**/*.iml": true
    },
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/dist": true,
        "**/coverage": true,
        "**/doc": true,
        "**/.idea": true
    },
    "workbench.activityBar.visible": ture,
    "window.zoomLevel": 0
}
  • 設(shè)置默認(rèn)打開(kāi)命令行工具
{

    // terminal.external.osxExec設(shè)置為用iTerm.app打開(kāi)
    "terminal.external.osxExec": "iTerm.app"
}
  • 關(guān)閉側(cè)邊欄自動(dòng)跟蹤
{
    "explorer.autoReveal": false,
}

關(guān)閉后，如果需要使用側(cè)邊欄跟蹤
使用插件 Reveal https://github.com/smulyono/reveal-file-ext, 安裝后在右上角可以跟蹤到代碼
然后設(shè)置快捷鍵 Reveal Active File in Side Bar

插件安裝方法

cmd+p 輸入 ext 開(kāi)始安裝

插件

必裝插件

# Settings Sync 不同設(shè)備上的設(shè)置同步
ext install Settings Sync
# Reveal 側(cè)邊欄跟蹤
ext install Reveal
# reval in folder 文件管理器打開(kāi)當(dāng)前位置
ext install Reveal File In Folder
# Open-In-Browser 瀏覽器打開(kāi) https://github.com/SudoKillMe/vscode-extensions-open-in-browser
ext install Open-In-Browser
# 右鍵命令行打開(kāi)
ext install Terminal https://github.com/formulahendry/vscode-terminal.git
# 快速跳轉(zhuǎn) https://github.com/wmaurer/vscode-jumpy.git
ext install jumpy
# 高亮去除空格 https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces
ext install trailing-spaces
# 路徑提示 https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
ext install path-intellisense
# TODO Highlight 標(biāo)記出所有的 TODO FIXME 注釋 https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight
ext install TODO Highlight
# Git History查看 Git 歷史記錄 https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory
ext install Git History

# 最后一次修改位置
ext install goto-last-edit-location
# 歷史紀(jì)錄
ext install annotator
# bash 代碼美化
ext install Bash Beautify
# xml 代碼美化 https://marketplace.visualstudio.com/items?itemName=DotJoshJohnson.xml
ext install XML Tools

工具插件

# vscode-icons 修改側(cè)邊欄中文件夾的圖標(biāo) https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons
ext install vscode-icons
# Faker 快速的插入用例數(shù)據(jù) https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-faker
ext install vscode-faker
# Change Case 文本轉(zhuǎn)換 駝峰命名、下劃線分隔命名等 https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case
ext install Change Case
# Regex Previewer 實(shí)時(shí)測(cè)試正則表達(dá)式的實(shí)用工具 https://marketplace.visualstudio.com/items?itemName=chrmarti.regex
ext install Regex Previewer
# Excel Viewer Excel 預(yù)覽
ext install Excel Viewer
# Sort Lines 對(duì)選中的代碼行進(jìn)行排序 https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines
ext install Sort Lines
# amVim vim 插件 https://marketplace.visualstudio.com/items?itemName=auiworks.amvim
ext install amVim
# 其它語(yǔ)言支持 https://marketplace.visualstudio.com/search?target=VSCode&category=Languages&sortBy=Downloads

主題美化

# material 主題
ext install theme-material / ext install theme-material-neutral
# 帶顏色的日志
ext Output Colorizer

前端插件

  • 工具插件
# Prettier 格式化代碼風(fēng)格 https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
ext install Prettier
# js 代碼簡(jiǎn)化查看
ext install indenticator
# 自動(dòng)生產(chǎn) js 的代碼文檔
ext install docthis
# SVG Viewer 實(shí)用的 SVG 程序 https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer
ext install SVG Viewer
# Icon Fonts 在項(xiàng)目中添加圖標(biāo)字體的插件。該插件支持超過(guò) 20 個(gè)熱門的圖標(biāo)集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons
ext install Icon Fonts
# Minify 壓縮合并 JavaScript 和 CSS 文件的應(yīng)用程序 https://marketplace.visualstudio.com/items?itemName=HookyQR.minify
ext install Minify
# Easy LESS less 工具
ext install Easy LESS
# Sass sass 工具
ext install Sass
# px rem 轉(zhuǎn)換工具
ext install cssrem
  • 編輯插件
# 格式化 css 等
ext install Beautify css/sass/scss/less
# 格式代碼 js html
ext install beautify
# npm Intellisense 導(dǎo)入 npm 模塊時(shí)的自動(dòng)補(bǔ)全 https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense
ext install npm Intellisense
# html 標(biāo)簽?zāi)０?ext install html-snippets
# H5 全文檔模版插件 https://marketplace.visualstudio.com/items?itemName=sidthesloth.html5-boilerplate
ext install html5-boilerplate
# Quokka 根據(jù)你正在編寫(xiě)的代碼提供實(shí)時(shí)反饋 https://quokkajs.com/
ext install Quokka
# css 支持 瀏覽器
ext install vscode-caniuse
#  CSS Peek 追蹤至樣式表中 CSS 類和 ids 定義的地方 https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
ext install CSS Peek
# Color Info 懸停光標(biāo)，就可以預(yù)覽色塊中色彩模型 https://marketplace.visualstudio.com/items?itemName=bierner.color-info
ext install Color Info
  • 前端框架插件
## vue 工具合輯
ext install Vue.js Extension Pack
# vue 代碼工具 包含在  Vue.js Extension Pack
ext install vetur
# vue 代碼模板
ext install Vue 2 Snippets
# vue 代碼美化 https://zhuanlan.zhihu.com/p/34287543

## react 工具合輯
# react 代碼美化
ext install react-beautify
# react 代碼提示
ext install Reactjs code snippets
# react es6 代碼提示
ext install React-Native/React/Redux snippets for es6/es7
# CSS Modules jsx tsx 中 CSS 定義跳轉(zhuǎn)
ext install CSS Modules
# tsx 代碼提示
ext install Typescript React code snippets

golang

ext install go
  • if go get error, let outOfNet by CLI then run
go get -u -v github.com/nsf/gocode \
&& go get -u -v github.com/rogpeppe/godef \
&& go get -u -v github.com/golang/lint/golint \
&& go get -u -v github.com/lukehoban/go-outline \
&& go get -u -v sourcegraph.com/sqs/goreturns \
&& go get -u -v golang.org/x/tools/cmd/gorename \
&& go get -u -v github.com/tpng/gopkgs \
&& go get -u -v github.com/newhook/go-symbols \
&& go get -u -v golang.org/x/tools/cmd/guru
  • for fix vscode-plugin go
go get -u -v github.com/ramya-rao-a/go-outline \
&& go get -u -v github.com/ianthehat/godef \
&& go get -u -v -d github.com/mdempsky/gocode \
&& go get -u -v github.com/uudashr/gopkgs/cmd/gopkgs

markdown

ext install markdown-toc # 生成markdown 目錄的工具
# https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced
ext install Markdown Preview Enhanced # 預(yù)覽 markdown 增強(qiáng)

markdown-toc 換行錯(cuò)誤，修復(fù)方法見(jiàn) https://github.com/AlanWalk/markdown-toc/issues/65#issuecomment-438500104

快捷鍵修改

  • 本快鍵使用 atom 快捷鍵，兼容 jetbrain 使用習(xí)慣，如果是其他風(fēng)格的，可以參照快捷鍵的項(xiàng)目定義自行調(diào)整

  • 打開(kāi)這個(gè)json 文件，需要使用 cmd+shift+p or ctrl+shift+p 輸入 Open Keyboard Shortcuts File 根據(jù)自己的需求增加修改即可

  • win

[
  {
    "key": "alt+w",
    "command": "workbench.action.switchWindow"
  },
  {
    "key": "ctrl+alt+right",
    "command": "workbench.action.nextEditor"
  },
  {
    "key": "ctrl+alt+left",
    "command": "workbench.action.previousEditor"
  },
  {
    "key": "ctrl+alt+s",
    "command": "trailing-spaces.deleteTrailingSpaces",
    "when": "editorTextFocus"
  },
  {
    "key": "alt+enter",
    "command": "editor.action.triggerSuggest",
    "when": "editorHasCompletionItemProvider && textInputFocus && !editorReadonly"
  },
  {
    "key": "ctrl+space",
    "command": "-editor.action.triggerSuggest",
    "when": "editorHasCompletionItemProvider && textInputFocus && !editorReadonly"
  }
]
  • osx
[
    {
        "key": "ctrl+w",
        "command": "workbench.action.switchWindow"
    },
    {
        "key": "ctrl+alt+right",
        "command": "workbench.action.nextEditor"
    },
    {
        "key": "ctrl+alt+left",
        "command": "workbench.action.previousEditor"
    },
    {
        "key": "ctrl+s",
        "command": "trailing-spaces.deleteTrailingSpaces",
        "when": "editorTextFocus"
    },
    {
        "key": "cmd+alt+l",
        "command": "HookyQR.beautify",
        "when": "editorFocus"
    },
    {
        "key": "alt+enter",
        "command": "editor.action.triggerSuggest",
        "when": "editorHasCompletionItemProvider && textInputFocus && !editorReadonly"
    },
    {
        "key": "ctrl+enter",
        "command": "-editor.action.triggerSuggest",
        "when": "editorHasCompletionItemProvider && textInputFocus && !editorReadonly"
    },
    {
        "key": "shift+alt+up",
        "command": "editor.action.moveLinesUpAction",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "alt+up",
        "command": "-editor.action.moveLinesUpAction",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "shift+alt+cmd+d",
        "command": "editor.action.copyLinesUpAction",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "shift+alt+up",
        "command": "-editor.action.copyLinesUpAction",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "shift+alt+down",
        "command": "editor.action.moveLinesDownAction",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "alt+down",
        "command": "-editor.action.moveLinesDownAction",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "shift+cmd+d",
        "command": "editor.action.copyLinesDownAction",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "shift+alt+down",
        "command": "-editor.action.copyLinesDownAction",
        "when": "editorTextFocus && !editorReadonly"
    }
]
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容