BBGwiki | add VSCode useful extensions and tips page

[rblancomi]

Tools > VSCode > VSCode usage and extension

• Add VSCode roadmap for very general use and set-up
• Add useful functionalities and extensions

@CarlosLopezElorduy you could probably be very helpful here, I can take care of this entry with your help :)

[CarlosLopezElorduy]

Extensions

General

• Error Lens: Improve highlighting of errors, warnings and other language diagnostics
• GitHub Copilot: AI coding assistant
• CodeSnap: Take beautiful screenshots of your code
• Color Highlight: Highlight colors in your editor (hex, rgb)
• Comment Anchors: Place anchor tags within comments for easy file and workspace navigation.
• SonarQube for IDE: Advanced linter to detect & fix coding issues locally, including cognitive complexity.
• Random everything: Generate random ints, floats, strings, words, mails, etc.

Git

• GitLens: Improved Git experience within VSCode
• Git Graph: View a Git Graph of your repository, and perform Git actions from the graph.
• Git History: View git log, file history, compare branches or commits

Python & Notebooks

• autoDoctstring: Generates python docstrings automatically
• Data Wrangler: Data viewing, cleaning and preparation for tabular datasets
• Ruff: A Visual Studio Code extension with support for the Ruff linter and formatter.

SSH Cluster

• Remote SSH: Open any folder on a remote machine using SSH and take advantage of VS Code's full feature set.

Markdown

• Markdown All in One: All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more)
• Markdown Checkboxes: Adds checkbox support to the built-in markdown preview
• Markdown PDF: Convert Markdown to PDF
• Marp for VS Code: Create slides written in Marp Markdown on VS Code

PDF

• vscode-pdf: Display pdf files in VSCode

TSV

• Edit CSV: Extension to edit csv files with a table ui
• Rainbow CSV: Highlight CSV and TSV files, run sql-like queries

JSON

• JSON Crack: Seamlessly visualize your JSON data instantly into graphs.
• Json Editor: Generate a tree view editor of the active JSON document

LOGs

• Output Colorizer: Syntax highlighting for log files

SQLite

• SQLite Viewer: SQLite Viewer for VS Code

Images

• Image preview: Shows image preview in the gutter and on hover.
• SVG Previewer: Show SVG preview to the side panel
• Drawio: Integrates a drawio editor within VSCode to easily create figures, flowcharts, etc.

Web development (HTML, CSS, JS)

• Live Preview: Hosts a local server in your workspace for you to preview your webpages on.

Multiple cursors

• Multiple cursor case preserve: Preserves case when editing with multiple cursors.
• Increment selection: Increment selection with multiple cursors.

API

• Thunder Client: Lightweight Rest API Client for VS Code

Aesthetics

• Material Icon Theme: Material Design Icons for Visual Studio Code
• Peacock: Subtly change the workspace color of your workspace. Ideal when you have multiple VS Code instances opened.

Configuration

Very good to have

• "Files: Trim Trailing Whitespace": When enabled, will trim trailing whitespace when saving a file. This helps having cleaner code with unnecessary extra spaces. Also worth it to disable "Diff Editor: Ignore Trim Whitespace", so that these checks are detected by the diff editor.
• "Files: Auto Save": Controls auto save of editors that have unsaved changes. It can be adapted to auto save after a delay, after you change the focus or after a windows change.
• "Custom Labels: Patterns": If you have several files that are named the same (e.g.: main.py, index.html, conftest.py, etc), this option improves the rendering of the name of these files. For example, with the following configuration, the main.py files will include in their rendering the name of the folder where they are located, so that it becomes much easier to know which main.py file you really are into.

• "Git: Autofetch": When set to true, commits will automatically be fetched from the default remote of the current Git repository.

Jupyter Notebooks

• "Notebook: Inline Values": Controls whether to show inline values within notebook code cells after cell execution. This is very useful to know the value of certain variables just at first glance. I would set this option to "auto". It is true that it makes the cell more populated, so it might also be a personal preference.

• "Diff: Ignore Metadata": When opening the diff editor of a notebook, usually it also displays the changes in the metadata, which is anoying. This can be disabled here by enabling this option.
• "Diff: Ignore Output": Same as before. The output would be ignored in the diff visualization of the notebook.

Note

The changes in metadata and output would still be commited. The only difference is that it makes it so that when you check the changes done you would only see the code.

GitHub Copilot

• "Agent: Enabled": Enables agent mode for Copilot Chat. When this is enabled, agent mode can be activated via the dropdown in the view.
• "Agent: Max Requests": The maximum number of requests to allow Copilot to use per-turn in agent mode. When the limit is reached, Copilot will ask the user to confirm that it should continue. I would personally increase the default number.
• "Agent: Thinking Tool": Enables the thinking tool that allows Copilot to think deeply about your request before generating a response in agent mode.
• "Tools: Auto Approve": When using MCPs, it can become anoying to approve the permission for each tool used. This setting controls whether tool use should be automatically approved.
• "Copilot: Enable": Enable or disable auto triggering of Copilot completions for specified languages.

Type hinting

• "Analysis: Type Checking Mode": This option would enable VSCode to check for type mismatches, and alert the user if it finds any. Set this to either basic or standard (strict might be a bit too much).
• "Type Evaluation: Strict Dictionary Inference": Improves the detection of the type hint for dictionaries.
• "Type Evaluation: Strict List Inference": Improves the detection of the type hint for lists.
• "Type Evaluation: Strict Set Inference": Improves the detection of the type hint for sets.
• "Inlay Hints: Funtion Return Types": Display the type of the return of a function.
• "Inlay Hints: Variable types": Display the type of the variables.
• "Inlay Hints: Pytest Parameters": Display the types of parameters in pytest functions.

Style

• "Editor: Font Family" and "Editor: Font Ligatures": I recommend selecting a font that includes ligatures. These can be found in the web NerdFonts. In order to use the font, it should be installed locally first so that VSCode can access it at the level of the computer. The Font Ligatures setting should be set to True as well.
• "Workbench: Color Theme": Specifies the color theme used in the workbench. There are many you can choose from, so you can fit your preferences as you want.
• "Workbench: Icon Theme": Specifies the file icon theme used in the workbench or "null" to not show any file icons. I recommend Material Icon Theme, but there are many you can choose from, similar to the Workbench Color Theme.

[CarlosLopezElorduy]

@rblancomi I have added quite some extensions and configurations that I think can be useful in one way or another 😄 We can create the page either during a wiki hackathon or whenever you feel like! Also, these are configurations that I myself use, but it would be interesting to know another point of view in terms of what you feel it would be useful to you, so that we can reorganize it by usefulness or something like this