visual studio code 编辑器的配置及快捷键等, vscode, csc
visual studio code (vsc) 对开发c，c++，node.js，javascript，python，html，golang，及撰写markdown等比较友好，同时支持git浏览及分屏对比，运行速度快，所以是值得一用的编辑器。
vscode阅读c和c++代码的插件clangd
compile_commands.json。compile_commands.json，需要在运行cmake时添加参数-DCMAKE_EXPORT_COMPILE_COMMANDS=True或者在CMakeLists.txt中添加set(CMAKE_EXPORT_COMPILE_COMMANDS True)。例子：cd ~/hello mkdir build cd build cmake -DCMAKE_EXPORT_COMPILE_COMMANDS=True ..
会在~/hello/build下生成compile_commands.json。
make CROSS_COMPILE=aarch64-linux-gnu- ARCH=arm64 O=build clean # 配置，产生.config配置文件 make CROSS_COMPILE=aarch64-linux-gnu- ARCH=arm64 O=build bsta1000b_defconfig # 开始编译并产生 compile_commands.json 文件 bear make CROSS_COMPILE=aarch64-linux-gnu- ARCH=arm64 O=build -j32 # 要删除“-fconserve-stack”，不然clangd索引会报错 sed -i '/"-fconserve-stack"/d' compile_commands.json
3. 使用内核现成的命令产生compile_commands.json
- 编译kernel
-
生成compile commands文件。在kernel目录下运行如下命令：
- ./scripts/clang-tools/gen_compile_commands.py -d build
- 这样在kernel目录下会有一个文件叫
compile_commands.json
3. 解决clangd的运行错误
CompileFlags:
Remove: -mabi=lp64
1，安装vscode clangd插件，如果要求安装host端clangd工具，也一并装上
2， 关闭C/C++ InteliSence插件
3， 配置clangd插件。在clangd的插件配置里（扩展设置里的 Clangd: Arguments）， 选Add Item，依次加上这些项：
--compile-commands-dir=${workspaceFolder} --background-index --completion-style=detailed --header-insertion=never -log=info
如果不想把 compile_commands.json 放到代码目录，则可以指定 --compile-commands-dir，比如指定为代码目录的上级目录： ${workspaceFolder}/../ 。
最后：
重启vscode，观察output窗口，如果没有报错且显示 clangd: idle，则说明clangd已生效。
Visual Studio Code 最好的功能、插件和设置
- 下载 VS Code Insiders，可以获取 每天构建的最新版本
Visual Studio Intellicode
Visual Studio 上下载次数最多的插件。并且，在我看来，它会是你用过的最有用的插件之一。这个插件能帮助开发人员生成智能代码补全提示，并且它内置支持很多种编程语言。Visual Studio Intellicode 使用机器学习技术，通过学习大量 GitHub 项目的代码，能找到一些编码模式，然后在你编程时给予代码提示。
Git Blame
“谁写的这段代码？”
每隔一段时间，你都可能需要了解某段代码是谁写的。正好，Git Blame 就可以帮你。Git Blame 会告诉你最后修改这行代码的人是谁。最重要的是，你可以看到这处修改发生在哪次提交里。
Prettier
对那些想严格遵守一组编码规则格式的开发者来说，Prettier 是相当有用的插件。它是一个很有吸引力的插件，允许你使用 Prettier 开发包。
并且，它是一个健壮的、固守成规的代码格式化利器，允许开发者将他们的代码进行格式化。
Debugger for Chrome
这款插件就可以做到这点，它由微软发布，允许你在 Visual Studio Code 中直接调试网页源文件。
SVG Viewer
SVG Viewer 扩展插件为在 Visual Studio Code 中使用 SVG 图像提供了大量工具。
Material Theme
这个插件可以帮助我们修改主题色，帮助你摆脱只有黑色和白色的世界。当然你也可以通过修改setting文件来自定义主题颜色。
Themes
最后一个，也很重要，这就是 Themes 插件。你每天都要面对你的编辑器，那为什么不把它装饰得好看点？有大量插件能改变颜色方案和侧边栏上的图标。
Python Preview
展示Python中内置变量的值，方便有时候调试展示值。
kite
kite算是名气很大的插件了，专门用AI来做代码补全，写起代码来会快一些，用个动态图来让大家切身感受下，确实会稍微快一点点。
VSCode Great Icons
相对于Material Theme Icons我更喜欢这个的风格，萝卜青菜可有所爱，大家各取所需。
LeetCode
可以在vscode中刷算法题的。
Local History
.history的文件夹。代码的修改记录就会放在这里面。记得添加.gitignore，不然每次提交代码的时候就要遭重了。Partial Diff
Beyond Compare了，但是它是收费的！那么Partial Diff这款神奇的插件就成为了良好的替代品，选中一代码，右键Select Text for Compare，选中另外一部分代码，右键Compare Text with Previous Selection即可。Postcode
Auto Close Tag
The Auto Close tag extension automatically closes any tag.
Auto Rename Tag
As the name implies, it aids in renaming tags. This saves time when renaming tags in a nested codebase and also helps in preventing future runtime bugs.
Better Comments
This Better Comments extension gives a colorful comment when used in a code block, attracting developers’ attention. This helps more when working in a team or collaboration.
CodeSnap
The CodeSnap extension helps in taking cool code screenshots.
Code Snippets
Code Snippets are small portions of re-usable code that can be called using certain commands, thus preventing code repetition and reducing time loss.
Github Copilot
The Github Copilot is among the trending VsCode extensions this year. It makes real-time code and function suggestions directly on your code editor using an OpenAI Codex.
Open Source Session Replay
OpenReplay is an open-source, session replay suite that lets you see what users do on your web app, helping you troubleshoot issues faster.
GitLens
GitLens is a git tracker that watches the entire code and keeps track of:
- Which part of the code was updated or pushed.
- when it was pushed.
- who pushed it, what was pushed.
- Overall changes made.
Visual Studio Code Remote – SSH
The Remote – SSH add-on for VS Code lets you use any remote PC with an SSH server as your IDE.
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
https://marketplace.visualstudio.com/items?itemName=bibhasdn.git-easy
AutoFileName (文件路径自动补全插件)
当你需要 require 本地文件时，这个插件将为你提供基于你输入的文件路径的自动补全的选项。
https://marketplace.visualstudio.com/items?itemName=JerryHong.autofilename
ESLint
添加对 ESLint 的支持，并在安装和重启 VS Code 后自动开始工作。
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
JavaScript (ES6) Code Snippets (代码片段插件)
用代码片段加快 ES6 开发速度，例如输入 imd 可以自动生成如下代码：
- import { } from 'somewhere';
https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
Project Manager (项目管理器插件)
简单的项目管理器,可以在你的编辑器中快速切换项目。适用于经常切换项目的人。
https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager
Sort Lines (代码行排序插件)
这个插件可以对选中的代码行进行排序。也提供不区分大小写、反向和唯一等排序功能。
https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines
Wallaby.js (测试插件)
一个高级的连续测试运行器，当您对您正在工作的文件进行测试时，它会在你的编辑器中创建通过测试或测试失败的视觉反馈。
https://marketplace.visualstudio.com/items?itemName=WallabyJs.wallaby-vscode
Sync Settings (设置同步插件)
你很有可能在多台电脑上进行编码工作。在电脑上移植你的插件和设置是轻而易举的事，这要归功于 Shan Ali Khan 的设置同步扩展。
https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
Git History (Git 历史记录插件)
可视化的 Git 历史记录插件。
https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory
EditorConfig (代码格式化插件)
添加对 EditorConfig 的支持，因此当您格式化文件时，它会引用此约定。
https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig
Document This (JSDoc注释插件)
在 TypeScript 和 JavaScript 文件中自动生成详细的 JSDoc 注释。
https://marketplace.visualstudio.com/items?itemName=joelday.docthis
npm Intellisense (npm 模块导入插件)
VS Code 扩展，在 import 导入语句中自动完成npm 模块。
https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense
Align (代码对齐插件)
对齐文本，使代码根据 =，:等对齐。
对齐前：
- var test = 'string';
- var another = 10;
- var small = 10 * 10;
对齐后：
- var test = 'string';
- var another = 10;
- var small = 10 * 10;
https://marketplace.visualstudio.com/items?itemName=steve8708.Align
amVim (vim 插件)
目前 VS Code 中的最好用的 vim 插件。不是下载最多的 vim 插件，但它使用的是多指针，不像那些下载最多的插件。
https://marketplace.visualstudio.com/items?itemName=auiworks.amvim
change-case (命名格式插件)
快速修改突出显示的选中文本的命名格式。 camelCase（骆驼拼命名），PascalCase（首字母大写），kebab-case（中划线命名），underscore_delimited（下划线命名），CONSTANT（大写命名）等。
https://marketplace.visualstudio.com/items?itemName=zhengxiaoyao0716.intelligence-change-case
vscode-icons (侧边栏图标插件)
可以更换侧边栏中漂亮的图标。
https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons
change-case (命名格式插件)
快速修改突出显示的选中文本的命名格式。 camelCase（骆驼拼命名），PascalCase（首字母大写），kebab-case（中划线命名），underscore_delimited（下划线命名），CONSTANT（大写命名）等。
https://marketplace.visualstudio.com/items?itemName=zhengxiaoyao0716.intelligence-change-case
在Visual Studio Code中配置GO开发环境
对于Visual Studio Code开发工具，有一款优秀的GoLang插件，它的主页为：https://github.com/microsoft/vscode-go
这款插件的特性包括：
- Colorization 代码着彩色
- Completion Lists 代码自动完成（使用gocode）
- Snippets 代码片段
- Quick Info 快速提示信息（使用godef）
- Goto Definition 跳转到定义（使用godef）
- Find References 搜索参考引用（使用go-find-references）
- File outline 文件大纲（使用go-outline）
- Workspace symbol search 工作区符号搜索（使用
go-symbols） - Rename 重命名（使用gorename）
- Build-on-save 保存构建（使用go build和go test）
- Format 代码格式化（使用goreturns或goimports或gofmt）
- Add Imports 添加引用（使用 gopkgs）
- Debugging 调试代码（使用delve）
本插件的安装教程，请查看《Windows环境下vscode-go安装日记》
Debugging Go code using VS Code
https://github.com/Microsoft/vscode-go/wiki/Debugging-Go-code-using-VS-Code
Install delve
If you are on Windows or Linux, running Go: Install/Update Tools would have installed delve for you. If you don't want to run that command or you are on OS X, you can manually install delve as per the Installation Instructions. On OS X it requires creating a self-signed cert to sign the dlv binary.
Based on how you install delve it will either end up in your PATH or GOPATH/bin. If dlv binary is in your GOPATH/bin and this GOPATH is not set as an environment variable, then make sure your PATH points to this GOPATH/bin so that the Go extension can find the dlv binary.
Set up configurations in launch.json
Once delve is installed, you can either press F5 or go to the Code debug viewlet and select the configuration gear.
You will now see a launch.json file created for your workspace, which will contain the configurations for debugging. By default, there would be a single configuration as below:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "go",
"request": "launch",
"mode": "debug",
"remotePath": "",
"port": 2345,
"host": "127.0.0.1",
"program": "${fileDirname}",
"env": {},
"args": [],
"showLog": true
}
]
}
Ignore remotePath, host and port if you are not remote debugging.
The program option is mandatory.
- This can refer to a package folder to debug, or a file within that folder.
- This should be a full path and not relative.
- Use
${workspaceFolder}to debug package at the root of the workspace that is opened in VS Code - Use
${file}to debug the current file.
The mode parameter can be set to:
debugto compile the contents of the program folder and launch under the debugger. [default]testto debug tests in the program folder. To debug a single test, pass-test.runand the Test name as args. Additionally, you can pass-test.vto get verbose output as well.execto run a pre-built binary specified in program, for example"program":"${workspaceRoot}/mybin".remoteto attach to a remote headless Delve server. You must manually run Delve on the remote machine, and provide the additionalremotePath,hostandportdebug configuration options pointing at the remote machine.
In version 0.6.66 or lesser of the Go extension, the debugger cannot read your settings. It figures out the GOPATH from either the environment variables or from the path provided in the program option. If you have set multiple GOPATHs in the go.gopath setting, pass the same in the env option of the launch.json as an environment variable.
As of 0.6.67 version, the debugger will inherit the GOPATH from settings. Run Go: Current GOPATH command to see the GOPATH being used by the Go extension and the debugger.
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?
Set showLog attribute in your debug configuration to true. You will see logs in the debug console from delve.
Set trace attribute in your debug configuration to verbose. You will see logs in the debug console from the Go extension's debug adapter. These logs will be saved to a file whose path will be printed at the beginning in the debug console.
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:
$ dlv debug --headless --listen=:2345 --log
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:
$ dlv debug --headless --listen=:2345 --log -- -myArg=123
Note: Do not pass the flag
–api-version=2to dlv. The Go extension doesn't support v2 of delve APIs yet.
Then, create a remote debug configuration in VS Code launch.json.
{
"name": "Remote",
"type": "go",
"request": "launch",
"mode": "remote",
"remotePath": "${workspaceRoot}",
"port": 2345,
"host": "127.0.0.1",
"program": "${workspaceRoot}",
"env": {}
}
When you launch the debugger with this new Remote target selected, VS Code will send debugging commands to the dlv server you started previously instead of launching it's own dlv instance against your app.
The above example runs both the headless dlv server and the VS Code debugger locally on the same machine. For an example of running these on different hosts, see the example of debugging a process running in a docker host at https://github.com/lukehoban/webapp-go/tree/debugging.
Troubleshooting
Cannot find Delve debugger at ... Ensure it is in your "GOPATH/bin" or "PATH".
Like the error message says, the extension cannot find dlv. Remember, the debug adapter cannot read the VS Code settings.
Solution: Add the location where dlv is installed to your PATH. You can find this location by running which dlv or where dlv
Cannot find package ".." in any of ...
The debugger is not using the right GOPATH. This shouldnt happen, if it does, log a bug.
Solution: Until the bug you logged is resolved, the work around is to add the GOPATH as an env var in the env property in the launch.json file.
Failed to continue: "Error: spawn EACCES"
You have dlv running just fine from command line, but VS Code gives this access related error. This can happen if the extension is trying to run the dlv binary from a wrong location. The Go extension first tries to find dlv in your $GOPATH/bin and then in your $PATH.
Solution: Run which dlv in the command line. If this doesnt match your GOPATH/bin, then delete the dlv file in your GOPATH/bin
could not launch process: stat ***/debug.test: no such file or directory
You may see this in the debug console, while trying to run in the test mode. This happens when the program attribute points to a folder with no test files.
Solution: Ensure that the program attribute points to the folder that contains the test files you want to run.
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
This error can show up for Mac users using delve of version 0.12.2 or above. Not sure why, but doing a xcode-select --install has solved the problem for users who have seen this issue.
Unverified breakpoints when remote debugging
Check the version of delve api being used in the remote delve process. v2 is not yet supported in the Go extension. So if you have –api-version=2 being passed to dlv, remove that flag and try again
vscode: Visual Studio Code 常用快捷键
常用快捷键：
ctrl+shift+p 打开命令面板，什么都可以搜，万能快捷键。
ctrl+p 打开搜索框，搜文件。go to file.
ctrl+alt + - 即ctrl alt - 三个键，为返回原来浏览的位置(go back)。
ctrl+shift + - 即ctrl shift - 三个键，为正向(go forth)导航到浏览的位置。
ctrl + f 在当前文件里搜索
ctrl+shift + f 在指定的地方搜索，如当前目录里。
ctrl + h 替换
ctrl+shift + h 在指定的地方替换，如当前目录里。
ctrl k + ctrl s 显示快捷键列表
ctrl + shift + \ 括号() [] {} 之间的跳转
ctrl + shift + [ 或 ] 折叠代码
ctrl k + ctrl 0 折叠所有代码，那个0是零。 ctrl k + ctrl j 让所有代码不折叠。
ctrl + g 到某行
ctrl+shift+o 转到某符号(函数，变量等）。
ctrl + \ split editor
Ctrl+Shift+PgUp Move editor left
Ctrl+Shift+PgDn Move editor right
主命令框
F1 或 Ctrl+Shift+P: 打开命令面板。在打开的输入框内，可以输入任何命令，例如：
- 按一下
Backspace会进入到Ctrl+P模式 - 在
Ctrl+P下输入>可以进入Ctrl+Shift+P模式
在 Ctrl+P 窗口下还可以:
- 直接输入文件名，跳转到文件
?列出当前可执行的动作!显示Errors或Warnings，也可以Ctrl+Shift+M:跳转到行数，也可以Ctrl+G直接进入@跳转到symbol（搜索变量或者函数），也可以Ctrl+Shift+O直接进入@根据分类跳转symbol，查找属性或函数，也可以Ctrl+Shift+O后输入:进入#根据名字查找symbol，也可以Ctrl+T
常用快捷键
编辑器与窗口管理
- 打开一个新窗口：
Ctrl+Shift+N - 关闭窗口：
Ctrl+Shift+W - 同时打开多个编辑器（查看多个文件）
- 新建文件
Ctrl+N - 文件之间切换
Ctrl+Tab - 切出一个新的编辑器（最多
3个）Ctrl+\，也可以按住Ctrl鼠标点击Explorer里的文件名 - 左中右
3个编辑器的快捷键Ctrl+1Ctrl+2Ctrl+3 3个编辑器之间循环切换Ctrl+- 编辑器换位置，
Ctrl+k然后按Left或Right
代码编辑
格式调整
- 代码行缩进
Ctrl+[、Ctrl+] Ctrl+C、Ctrl+V复制或剪切当前行/当前选中内容- 代码格式化：
Shift+Alt+F，或Ctrl+Shift+P后输入format code - 上下移动一行：
Alt+Up或Alt+Down - 向上向下复制一行：
Shift+Alt+Up或Shift+Alt+Down - 在当前行下边插入一行
Ctrl+Enter - 在当前行上方插入一行
Ctrl+Shift+Enter
光标相关
visual studio code 快捷键：
0、回到上次光标的位置：
On Windows:
Alt+← .. navigate back
Alt+→ .. navigate forward
On Mac:
Ctrl+- .. navigate back
Ctrl+Shift+- .. navigate forward
On Ubuntu Linux:
Ctrl+Alt+- .. navigate back
Ctrl+Shift+- .. navigate forward
- 移动到行首：
Home - 移动到行尾：
End - 移动到文件结尾：
Ctrl+End - 移动到文件开头：
Ctrl+Home - 移动到定义处：
F12 - 定义处缩略图：只看一眼而不跳转过去
Alt+F12 - 移动到后半个括号：
Ctrl+Shift+] - 选择从光标到行尾：
Shift+End - 选择从行首到光标处：
Shift+Home - 删除光标右侧的所有字：
Ctrl+Delete - 扩展/缩小选取范围：
Shift+Alt+Left和Shift+Alt+Right - 多行编辑(列编辑)：
Alt+Shift+鼠标左键，Ctrl+Alt+Down/Up - 同时选中所有匹配：
Ctrl+Shift+L Ctrl+D下一个匹配的也被选中 (在 sublime 中是删除当前行，后面自定义快键键中，设置与Ctrl+Shift+K互换了)- 回退上一个光标操作：
Ctrl+U
重构代码
- 找到所有的引用：
Shift+F12 - 同时修改本文件中所有匹配的：
Ctrl+F12 - 重命名：比如要修改一个方法名，可以选中后按
F2，输入新的名字，回车，会发现所有的文件都修改了 - 跳转到下一个
Error或Warning：当有多个错误时可以按F8逐个跳转 - 查看
diff： 在explorer里选择文件右键Set file to compare，然后需要对比的文件上右键选择Compare with file_name_you_chose
查找替换
- 查找
Ctrl+F - 查找替换
Ctrl+H - 整个文件夹中查找
Ctrl+Shift+F
显示相关
- 全屏：
F11 - zoomIn/zoomOut：
Ctrl +/- - 侧边栏显/隐：
Ctrl+B - 显示资源管理器
Ctrl+Shift+E - 显示搜索
Ctrl+Shift+F - 显示 Git
Ctrl+Shift+G - 显示 Debug
Ctrl+Shift+D - 显示 Output
Ctrl+Shift+U
其他
- 自动保存：
File -> AutoSave，或者Ctrl+Shift+P，输入auto
修改默认快捷键
打开默认键盘快捷方式设置：
File -> Preferences -> Keyboard Shortcuts，或者：Alt+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
支付宝扫一扫捐赠
微信公众号: 共鸣圈
欢迎讨论，邮件: 924948$qq.com 请把$改成@
QQ群：263132197
QQ： 924948
