VsCode 技巧和常用插件收集

[TOC]

快捷键配置

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

常用快捷键

功能	macOS	linux/windows	用途
命令模式	cmd+shift+p	ctrl+shift+p	各种指令功能都靠这个
快键命令	cmd+p	ctrl+p	快速打开文件，或者执行指令
呼出配置界面	cmd+,	ctrl+,	打开设置菜单
查询快捷键	cmd+k cmd+s	ctrl+k ctrl+s	查询快捷键，注意是按2组
切换语言模式	cmd+k m	ctrl+k m	设置当前文本的语法渲染
多行编辑	cmd+shift+l	shift+alt+I	多行编辑文本，板砖利器
聚焦侧边栏	cmd+0	ctrl+0	无鼠标编程必备
切换文件浏览	cmd+shift+e	ctrl+shift+e	工程文件树切换
拆分编辑	cmd+k left	ctrl+k left	大屏幕开发必备

macOS命令行中使用vscode打开当前目录

• 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打开当前目录

code .

如果无法使用 code 命令，添加软链接 ln -s [vscode安装目录]/bin/code /usr/local/bin/code

windows命令行中使用vscode打开当前目录

配置 vscode 安装目录的 \bin 目录到用户环境变量的 PATH 中即可,安装包安装已经自动写入这个环境变量

用户配置

这个 json 已经隐藏，可以通过 cmd+shift+p or ctrl+shift+p 输入 open settings json 打开配置的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
}

• 设置默认打开命令行工具

{

    // terminal.external.osxExec设置为用iTerm.app打开
    "terminal.external.osxExec": "iTerm.app"
}

• 关闭侧边栏自动跟踪

{
    "explorer.autoReveal": false,
}

关闭后，如果需要使用侧边栏跟踪
使用插件 Reveal https://github.com/smulyono/reveal-file-ext, 安装后在右上角可以跟踪到代码
然后设置快捷键 Reveal Active File in Side Bar

插件安装方法

cmd+p 输入 ext 开始安装

插件

必装插件

# Settings Sync 不同设备上的设置同步
ext install Settings Sync
# Reveal 侧边栏跟踪
ext install Reveal
# reval in folder 文件管理器打开当前位置
ext install Reveal File In Folder
# Open-In-Browser 浏览器打开 https://github.com/SudoKillMe/vscode-extensions-open-in-browser
ext install Open-In-Browser
# 右键命令行打开
ext install Terminal https://github.com/formulahendry/vscode-terminal.git
# 快速跳转 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 标记出所有的 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
# 历史纪录
ext install annotator
# bash 代码美化
ext install Bash Beautify
# xml 代码美化 https://marketplace.visualstudio.com/items?itemName=DotJoshJohnson.xml
ext install XML Tools

工具插件

# vscode-icons 修改侧边栏中文件夹的图标 https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons
ext install vscode-icons
# Faker 快速的插入用例数据 https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-faker
ext install vscode-faker
# Change Case 文本转换 驼峰命名、下划线分隔命名等 https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case
ext install Change Case
# Regex Previewer 实时测试正则表达式的实用工具 https://marketplace.visualstudio.com/items?itemName=chrmarti.regex
ext install Regex Previewer
# Excel Viewer Excel 预览
ext install Excel Viewer
# Sort Lines 对选中的代码行进行排序 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
# 其它语言支持 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 格式化代码风格 https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
ext install Prettier
# js 代码简化查看
ext install indenticator
# 自动生产 js 的代码文档
ext install docthis
# SVG Viewer 实用的 SVG 程序 https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer
ext install SVG Viewer
# Icon Fonts 在项目中添加图标字体的插件。该插件支持超过 20 个热门的图标集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons
ext install Icon Fonts
# Minify 压缩合并 JavaScript 和 CSS 文件的应用程序 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 转换工具
ext install cssrem

• 编辑插件

# 格式化 css 等
ext install Beautify css/sass/scss/less
# 格式代码 js html
ext install beautify
# npm Intellisense 导入 npm 模块时的自动补全 https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense
ext install npm Intellisense
# html 标签模板
ext install html-snippets
# H5 全文档模版插件 https://marketplace.visualstudio.com/items?itemName=sidthesloth.html5-boilerplate
ext install html5-boilerplate
# Quokka 根据你正在编写的代码提供实时反馈 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 悬停光标，就可以预览色块中色彩模型 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 定义跳转
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 # 预览 markdown 增强

markdown-toc 换行错误，修复方法见 https://github.com/AlanWalk/markdown-toc/issues/65#issuecomment-438500104

快捷键修改

• 本快键使用 atom 快捷键，兼容 jetbrain 使用习惯，如果是其他风格的，可以参照快捷键的项目定义自行调整

• 打开这个json 文件，需要使用 cmd+shift+p or ctrl+shift+p 输入 Open Keyboard Shortcuts File 根据自己的需求增加修改即可

• 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"
    }
]