Visual Studio Code 专题

Abstract

设置
插件
References

Citation Yao Qing-sheng.Visual Studio Code 专题.FUTURE & CIVILIZATION Natural/Social Philosophy & Infomation Sciences,20220401. https://yaoqs.github.io/20220401/visual-studio-code-zhuan-ti/

VsCode 官方插件地址：

https://marketplace.visualstudio.com/vscode

http://code.visualstudio.com/docs

官网下载地址：http://code.visualstudio.com/

¶ 设置

editor.tabCompletion 用来在出现推荐值时，按下 Tab 键是否自动填入最佳推荐值，推荐设置为 on
editor.codeActionsOnSave 中的 source.organizeImports 属性，这个属性能够在保存时，自动调整 import 语句相关顺序，能够让你的 import 语句按照字母顺序进行排列，推荐设置为 true, 即 "editor.codeActionsOnSave": {“source.organizeImports”: true }；
禁用自动更新：文件 > 首选项 > 设置（macOS：代码 > 首选项 > 设置，搜索 update mode 并将设置更改为 none。
开启代码提示设置：setting > 到搜索框里搜索 “prevent”—> 并取消此项的勾选
设置同步

¶ 插件

¶General

Chinese (Simplified) (简体中文) Language Pack for Visual Studio:
PowerShell:Develop PowerShell modules, commands and scripts in Visual Studio Code!
Visual Studio IntelliCode:AI-assisted development
Remote - WSL:Open any folder in the Windows Subsystem for Linux (WSL) and take advantage of Visual Studio Code’s full feature set.
Indenticator: 视觉上突出显示当前的缩进深度。
~~Rainbow Brackets + Indent-Rainbow: 彩虹括号、彩虹空白符插件~~ (已内置)
~~Trailing Spaces:Highlight trailing spaces and delete them in a flash! 高亮那些冗余的空格，可以快速删掉。~~(已内置)
TODO Highlight 维护时间稍长的代码仓库免不了会有各种 TODO、FIXME、HACK 之类的标记，TODO Highlight 能够帮我们把这些关键词高亮出来，在你翻阅代码时非常醒目，就像是在大声提醒你尽快把他解决掉。支持自定义配置需要高亮的关键词，实际使用比较坑的地方是，TODO、FIXME 之类的后面必须加上冒号，否则无法高亮。
File Utils: 提供了一个更加简洁的方法来创建、复制、移动、重命名、删除文件 / 文件夹。
Hex Editor:Allows viewing and editing files in a hex editor
WakaTime:Metrics, insights, and time tracking automatically generated from your programming activity. 从你的使用习惯中生成数据报表
Code Runner:Run C, C++, Java, JS, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, CMD, BASH, F#, C#, VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml, R, AppleScript, Elixir, VB.NET, Clojure, Haxe, Obj-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Pascal, Haskell, Nim,D. 支持多种语言的代码的立即执行。
vscode-icons:Icons for Visual Studio Code.
Material Icon Theme:Material Design Icons for Visual Studio Code
Bracket Pair Colorizor:A customizable extension for colorizing matching brackets
Polacode: Polaroid for your code. 将一段代码复制到剪贴板，打开扩展名，粘贴代码，然后单击保存图像！
Better Align（代码优雅排版）代码优雅排版，选中代码配合组合键 [Ctrl+Shift+p]，输入 Align 即可
Better Comments:Improve your code commenting by annotating with alert, informational, TODOs, and more!
Bookmarks: 标记某一行，用于跳转，相当于书签功能
Docs View: VS Code extension that displays hover documentation in the sidebar or panel.
Sourcegraph: 代码搜索，Sourcegraph’s code search allows you to find & fix things fast across all your code.
filesize: 查看文件大小
Partial Diff（文件比较）
Path Intellisense（快速引入文件）自动提示文件路径，支持各种快速引入文件
GistPad: 可以让你在 VSCode 中直接编辑 GitHub Gists 和存储库
CodeSnap: 生成漂亮的代码截图.📸 Take beautiful screenshots of your code in VS Code!
Visual Studio IntelliCode: 自动补全
CMake Tools: provides the native developer a full-featured, convenient, and powerful workflow for CMake-based projects in Visual Studio Code.
Makefile Tools: This extension provides IntelliSense configurations to the VS Code C/C++ Extension for Makefile projects. It also provides convenient commands to build, debug, and run your targets.
Image preview（预览图片）鼠标悬浮在链接上可及时预览图片
change-case（变量命名规范）
Code Spell Checker（拼写检查程序）是拼写检查程序，检查不常见的单词，如果单词拼写错误，会给出警告提示
koroFileHeader（生成文件头部注释和函数注释）在 vscode 中用于生成文件头部注释和函数注释的插件，经过多版迭代后，插件：支持所有主流语言，功能强大，灵活方便，文档齐全，食用简单
Polacode-2020（转化成一张逼格满满的图片）可以将我们的代码转化成一张逼格满满的图片
~~Live Share（与他人实时进行协作式编辑和调试）这款神器可以使您能够与他人实时进行协作式编辑和调试~~已弃用
Doxygen Documentation Generator : Let me generate Doxygen documentation from your source code for you.
faker 生成假数据，地址，电话，图片等等
Regex Previewer 测试正则的插件 Regex matches previewer for JavaScript, TypeScript, PHP and Haxe in Visual Studio Code
beautiful UI 32 个主题集合，具体使用看个人喜好。

¶blog

CSDN 工作流：CSDN GitCode VSCode integration
zhihu on vscode：Zhihu VSCode Extension

¶AI code

Baidu Comate
TONGYI Lingma-Your
Codeium: Free AI-powered code acceleration toolkit
Fitten Code: Your Professional AI Coding Assistant

¶Remote

Remote - SSH： Open any folder on a remote machine using SSH and take advantage of VS Code’s full feature set
Remote Explorer: The Remote - SSH and Remote - Tunnels extensions let you use any remote machine as your development environment.
The Remote - Tunnels extension lets you connect to a remote machine, like a desktop PC or virtual machine (VM), via a secure tunnel. You can then securely connect to that machine from anywhere, without the requirement of SSH.

¶Matlab

MATLAB support for Visual Studio Code

¶git

~~GitHub:Integrates github and its workflows into vscode~~ 此扩展已弃用。请改用 GitHub Pull Requests and Issues 扩展
GitLens:Supercharge Git within VS Code — Visualize code authorship at a glance via Git blame annotations and CodeLens,（快速查看更改行或代码块的对象）
GitHub Codespaces: Your instant dev environment
GitHub Pull Requests and Issues:Pull Request and Issue Provider for GitHub
GitHub Theme:GitHub theme for VS Code
Git Project Manager: 可以然你直接一键搜索并打开某个的基于 Git 管理的项目
Git History: 用来查看 git log 或则一个文件的 git 历史，比较不同的分支，commits。
~~Settings Sync:Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist. 在 Github 中保存设置~~（已内置）
Git Graph（Git 图形化显示和操作）
GitLab Workflow：Official GitLab-maintained extension for Visual Studio Code.

¶nodejs

~~npm~~ 此扩展已弃用，因为已不再对其进行维护。
node-snippets:snippets for node + libraries
~~npm Intellisense: 可以在导入语句自动补全 npm 模块名称~~
Search node_modules:Quickly search the node_modules folder
Import Cost: 该插件会在行尾显示导入的包的大小。为了计算包大小，该插件要使用 Webpack 和 babili-webpack-plugin
Mongo Snippets for Node-js:Provides snippets, boilerplate code for Mongo queries and completion suggestions for mongoose models.
MongoDB for VS Code:Connect to MongoDB and Atlas directly from your VS Code environment, navigate your databases and collections, inspect your schema and use playgrounds to prototype queries and aggregations.
node-readme:A vscode extension to view javascript module documentation in editor
~~Vetur:Vue tooling for VS Code ~~
Vue Language Features (Volar): Language support for Vue 3.0, including syntax highlighting, code completion, emmet, formatting, and more.

¶denojs

deno: A language server client for Deno.

¶html

open in browser: 在浏览器里预览网页必备。运行 html 文件
Live Server:Launch a development local Server with live reload feature for static & dynamic pages
Prettier: 一键美化 JavaScript/TypeScript/CSS 代码
~~HTML Snippets: Full HTML tags including HTML5 Snippets~~(已内置)
~~HTML Boilerplate： A basic HTML5 boilerplate snippet generator.~~(已内置)
HTML CSS Support: Visual Studio Code CSS Intellisense for HTML
IntelliSense for CSS class names in HTML: 基于你的项目以及通过 link 标签引用的外部文件，该智能插件提供 HTML 中 CSS class 名字的补全
~~Beautify:Beautify javascript, JSON, CSS, Sass, and HTML in Visual Studio Code~~
Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets for Visual studio code:
JavaScript (ES6) code snippets:Code snippets for JavaScript in ES6 syntax
~~CSS Peek:Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto definition. 可以在 HTML 中通过 CSS id 或则 class 来定位到其定义~~（已内置）
Quokka.js:JavaScript and TypeScript playground in your editor. 实时执行 JavaScript 代码 (做快速的 demo 很有用)。可以即时显示 js 和 ts 的运行结果，想试验一些短代码的运行结果，但是又不想之后删除文件的时候可以用到
ESLint:Integrates ESLint JavaScript into VS Code.
~~Auto Rename Tag: Auto rename paired HTML/XML tag~~（已内置）
jQuery Code Snippets: Over 130 jQuery Code Snippets for JavaScript code.Just type the letters ‘jq’ to get a list of all available jQuery Code Snippets.
~~Beautify css/sass/scss/less: Command “beautify.format”~~
Easy LESS: Auto-compile LESS to CSS on save,“Compile-on-save” for LESS stylesheets without using a build task.
HTML Preview: Provides ability to preview HTML documents.
Microsoft Edge Tools for VS Code: Show the browser’s Elements and Network tool inside the Visual Studio Code editor and use it to fix CSS issues with your site and inspect network activity.
JavaScript Booster（代码改进）会提示对应的不合理原因和改进方案
eCSStractor----- 抽取页面的 class，生成一个 css 文档

¶Wechat

小程序开发助手：微信小程序开发助手 for VSCode，代码提示 + 语法高亮
微信小程序开发工具：提供预览、打包上传、代码补全、语法高亮、依赖分析、项目模版等功能。
HTML Preview: Provides ability to preview HTML documents.
Microsoft Edge Tools for VS Code: Show the browser’s Elements and Network tool inside the Visual Studio Code editor and use it to fix CSS issues with your site and inspect network activity.

¶Docker

Docker:Makes it easy to create, manage, and debug containerized applications.
Remote - Containers:Open any folder or repository inside a Docker container and take advantage of Visual Studio Code’s full feature set.

¶Markdown

Markdown All in One：All you need for Markdown (keyboard shortcuts, table of contents, auto preview and more).
Markdown Preview Github Styling:Changes VS Code’s built-in markdown preview to match Github’s style
markdownlint:Markdown linting and style checking for Visual Studio Code
Turndown-VSCode: Convert HTML to Markdown.This extension employs the excellent Turndown (http://domchristie.github.io/turndown/) library
Auto Markdown TOC：Generate TOC (table of contents) of headlines from parsed markdown file.

¶SQL

SQL Server (mssql):Develop Microsoft SQL Server, Azure SQL Database and SQL Data Warehouse everywhere
SQLTools: Database management done right. Connection explorer, query runner, intellisense, bookmarks, query history. Feel like a database hero!
Turndown-VSCode: Convert HTML to Markdown.This extension employs the excellent Turndown (http://domchristie.github.io/turndown/) library

¶python

Sourcery: 实时重构 Python 代码，会自动审查和重构代码。

¶C Sharp

C#:C# for Visual Studio Code (powered by OmniSharp). 微软开发 c# 调试器插件

¶References

References