[TOC]
快捷键配置
https://code.visualstudio.com/docs/getstarted/keybindings
常用快捷键
| 功能 | osx | linux |
|---|---|---|
| 呼出配置界面 | cmd+, | ctrl+, |
| 查询快捷键 | cmd+k cmd+s | ctrl+k ctrl+s |
| 切换语言模式 | 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 中即可
用户配置
{
"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
# 高亮去除空格
ext install trailing-spaces
# 路径提示 https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
ext install path-intellisense
# 快速跳转 https://github.com/wmaurer/vscode-jumpy.git
ext install jumpy
# 最后一次修改位置
ext install goto-last-edit-location
# 历史纪录
ext install annotator
# 右键命令行
ext install Terminal https://github.com/formulahendry/vscode-terminal.git
# bash 代码美化
ext install Bash Beautify
# Open-In-Browser 浏览器打开 https://github.com/SudoKillMe/vscode-extensions-open-in-browser
ext install Open-In-Browser
# 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
工具插件
# 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 代码美化
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
markdown
ext install markdown-toc
快捷键 修改记录（使用 atom 快捷键，兼容 jetbrain 使用习惯）
- win
[
{
"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+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"
}
]
网友评论