visual studio code (vsc) 对开发node.js,javascript,python,html,golang等比较友好,同时支持git浏览及分屏对比,运行速度快,所以是值得一用的编辑器。
Visual Studio Code 最好的功能、插件和设置
Git Easy
这个插件可以导入下面的 Git 命令,以便您可以在命令面板中使用。和 Atom 中实用非常相似。
- Git Easy: Init
- Git Easy: Add Origin
- Git Easy: Add Remote
- Git Easy: Add File/Directory
- Git Easy: Add All Modified
- Git Easy: Commit
- Git Easy: Pull Current Branch from Origin
- Git Easy: Push Current Branch to Origin
- Git Easy: Push Current Branch (to any remote)
- Git Easy: Status
- Git Easy: Create New Branch
- Git Easy: Change/Checkout Existing Branch
- Git Easy: Log All
- Git Easy: Log Current File
AutoFileName (文件路径自动补全插件)
当你需要 require 本地文件时,这个插件将为你提供基于你输入的文件路径的自动补全的选项。
ESLint
添加对 ESLint 的支持,并在安装和重启 VS Code 后自动开始工作。
JavaScript (ES6) Code Snippets (代码片段插件)
imd
- import { } from 'somewhere';
Project Manager (项目管理器插件)
简单的项目管理器,可以在你的编辑器中快速切换项目。
Sort Lines (代码行排序插件)
这个插件可以对选中的代码行进行排序。也提供不区分大小写、反向和唯一等排序功能。
Wallaby.js (测试插件)
一个高级的连续测试运行器,当您对您正在工作的文件进行测试时,它会在你的编辑器中创建通过测试或测试失败的视觉反馈。
Sync Settings (设置同步插件)
你很有可能在多台电脑上进行编码工作。在电脑上移植你的插件和设置是轻而易举的事,这要归功于 Shan Ali Khan 的设置同步扩展。
Git History (Git 历史记录插件)
可视化的 Git 历史记录插件。
EditorConfig (代码格式化插件)
添加对 EditorConfig 的支持,因此当您格式化文件时,它会引用此约定。
Document This (JSDoc注释插件)
在 TypeScript 和 JavaScript 文件中自动生成详细的 JSDoc 注释。
npm Intellisense (npm 模块导入插件)
VS Code 扩展,在 import 导入语句中自动完成npm 模块。
Align (代码对齐插件)
=:
对齐前:
- var test = 'string';
- var another = 10;
- var small = 10 * 10;
对齐后:
- var test = 'string';
- var another = 10;
- var small = 10 * 10;
amVim (vim 插件)
目前 VS Code 中的最好用的 vim 插件。不是下载最多的 vim 插件,但它使用的是多指针,不像那些下载最多的插件。
change-case (命名格式插件)
快速修改突出显示的选中文本的命名格式。 camelCase(骆驼拼命名),PascalCase(首字母大写),kebab-case(中划线命名),underscore_delimited(下划线命名),CONSTANT(大写命名)等。
vscode-icons (侧边栏图标插件)
可以更换侧边栏中漂亮的图标。
change-case (命名格式插件)
快速修改突出显示的选中文本的命名格式。 camelCase(骆驼拼命名),PascalCase(首字母大写),kebab-case(中划线命名),underscore_delimited(下划线命名),CONSTANT(大写命名)等。
对于Visual Studio Code开发工具,有一款优秀的GoLang插件,它的主页为:https://github.com/microsoft/vscode-go
这款插件的特性包括:
go-symbols
本插件的安装教程,请查看《Windows环境下vscode-go安装日记》
Debugging Go code using VS CodeInstall delve
Go: Install/Update Toolsdlv
PATHGOPATH/bindlvGOPATH/binGOPATH/bindlv
Set up configurations in launch.json
F5
launch.json
remotePathhostport
program
${workspaceFolder}${file}
mode
debugtest-test.run-test.vexec"program":"${workspaceRoot}/mybin"remoteremotePathhostport
programgo.gopathenvlaunch.json
Go: Current GOPATH
Snippets for Debug Configurations
As of 0.6.54 version of the Go extension, you can now make use of snippets while editing the launch.json file. Type "Go" and you will get debug configuration snippets for debugging current file/package, a test function etc.
Debugging the Debugger?
showLogtrue
traceverbose
If you want to dig deeper and debug the debugger using source code of this extension, read building-and-debugging-the-extension
Remote Debugging
To remote debug using VS Code, you must first run a headless Delve server on the target machine. For example:
Any arguments that you want to pass to the program you are debugging must be passed to this Delve server that runs on the target machine. For example:
–api-version=2
launch.json
Remotedlvdlv
dlv
Troubleshooting
Cannot find Delve debugger at ... Ensure it is in your "GOPATH/bin" or "PATH".
dlv
which dlvwhere dlv
Cannot find package ".." in any of ...
The debugger is not using the right GOPATH. This shouldnt happen, if it does, log a bug.
envlaunch.json
Failed to continue: "Error: spawn EACCES"
dlvdlvdlv
which dlvGOPATH/bindlvGOPATH/bin
could not launch process: stat ***/debug.test: no such file or directory
testprogram
program
could not launch process: could not fork/exec
This usually happens in OSX due to signing issues. See the discussions in please see #717, #269 and derekparker/delve/357
Solution: You may have to uninstall dlv and install it manually as per instructions
could not launch process: exec: "lldb-server": executable file not found in $PATH
xcode-select --install
Unverified breakpoints when remote debugging
–api-version=2dlv
vscode: Visual Studio Code 常用快捷键
主命令框
F1Ctrl+Shift+P
BackspaceCtrl+PCtrl+P>Ctrl+Shift+P
Ctrl+P
?!ErrorsWarningsCtrl+Shift+M:Ctrl+G@symbolCtrl+Shift+O@symbolCtrl+Shift+O#symbolCtrl+T
常用快捷键
编辑器与窗口管理
Ctrl+Shift+NCtrl+Shift+WCtrl+NCtrl+Tab3Ctrl+\CtrlExplorer3Ctrl+1Ctrl+2Ctrl+33Ctrl+Ctrl+kLeftRight
代码编辑
格式调整
Ctrl+[Ctrl+]Ctrl+CCtrl+VShift+Alt+FCtrl+Shift+Pformat codeAlt+UpAlt+DownShift+Alt+UpShift+Alt+DownCtrl+EnterCtrl+Shift+Enter
光标相关
visual studio code 快捷键:
0、回到上次光标的位置:
HomeEndCtrl+EndCtrl+HomeF12Alt+F12Ctrl+Shift+]Shift+EndShift+HomeCtrl+DeleteShift+Alt+LeftShift+Alt+RightAlt+Shift+鼠标左键Ctrl+Alt+Down/UpCtrl+Shift+LCtrl+DCtrl+Shift+KCtrl+U
重构代码
Shift+F12Ctrl+F12F2ErrorWarningF8diffexplorerSet file to compareCompare with file_name_you_chose
查找替换
Ctrl+FCtrl+HCtrl+Shift+F
显示相关
F11Ctrl +/-Ctrl+BCtrl+Shift+ECtrl+Shift+FCtrl+Shift+GCtrl+Shift+DCtrl+Shift+U
其他
File -> AutoSaveCtrl+Shift+Pauto
修改默认快捷键
File -> Preferences -> Keyboard ShortcutsAlt+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"
}
]
前端开发必备插件
- PostCSS Sorting
- stylelint
- stylefmt
- ESLint
- javascript standard format
- beautify
- Babel ES6/ES7
- Debugger for Chrome
- Add jsdoc comments
- javascript(ES6) code snippets
- vue
- weex
- Reactjs code snippets
- React Native Tools
- Npm Intellisense
- Instant Markdown
- Markdown Shortcuts
- TextTransform
自定义设置参考
vscode 自定义配置参考:
{
"editor.fontSize": 18,
"files.associations": {
"*.es": "javascript",
"*.es6": "javascript"
},
// 控制编辑器是否应呈现空白字符
"editor.renderWhitespace": true,
// 启用后,将在保存文件时剪裁尾随空格。
"files.trimTrailingWhitespace": true,
// File extensions that can be beautified as javascript or JSON.
"beautify.JSfiles": [
"",
"es",
"es6",
"js",
"json",
"jsbeautifyrc",
"jshintrc"
]
}
相关参考
官方快捷键大全:https://code.visualstudio.com/docs/customization/keybindings