Visual Studio Code is an integrated development environment (IDE) built and maintained by Microsoft. It is offered free of charge.

vscode

Learn Vscode

We look at the various features of the VSCode Extension for Playwright and how it can help you with your testing workflow.

Playwright VSCode Extension

In this lesson, we will use the [foambubble template](https://github.com/foambubble/foam-template) to get started building a second brain in VSCode. The template includes a number of extensions. The primary extention is foam itself which generates links between notes that you write similar to the popular personal knowledge management service Roam Research.

**Note:** foam is in alpha so the api is likely to change quite a bit. They project that they have implemented 10% of the features currently roadmapped.



Create a Second Brain in VSCode with Foam

When working in a codebase that has frontend, backend, middleware, service, and other concerns all in the same GIT repository, it can be helpful to color-code your editor windows to quickly recognize in what area of your stack you are working. 

We can easily do this with a few VS Code settings in the `.vscode/settings.json` file in a directory. We can then open those directories in new VS code windows and visually see the difference between our frontend code and our backend code, eliminating cognitive overhead and context switching between, for example, ReactJS and NodeJS.

An example configuration for this color coding:

```json
{
  "workbench.colorCustomizations": {
    "titleBar.activeBackground": "#663399"
  }
}
```

Visually Organize Applications in VS Code with Window Color-Coding

In this lesson, we will learn how to use custom ENV variables to customize the PS1 Bash/Zsh command prompt in the VS Code terminal, without affecting our custom terminal themes in other applications. We will see how this can be useful for keeping the terminal clean for screen recordings.

I'm using Zsh in this video, but this works in Bash with `~/.bashrc` as well.

Customize the PS1 Bash/Zsh Command Prompt in VS Code with Environment Variables

Fast, easy and reliable testing for anything that runs in a browser.

cypress

Even though cypress has a well-designed API, we're not going to remember every single command.

In this quick lesson we're going to learn how to enable intelligent code completion for cypress tests in VSCode so our editor will help us write e2e tests much quicker

Enable intelligent code completion for cypress tests in VSCode


JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

In this lesson you will learn how to create a minimalistic JavaScript playground with quokka.js and zen mode. You will also get an overview of some cool features quokka provides.

[Download quokka.js here](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode)

Create JavaScript Scratchpad with quokka.js in VSCode

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Two things that all React developers will agree on are:

1. It's imperative that you define all prop types for a given component when writing production-grade code.
2. Although the process only takes a minute, it can be a pain point of React development, especially when a component takes a large number of props..

In this lesson, we learn how to use the React PropTypes Generate extension to automatically define our prop-types for us without having to write a single line of code!.

### Resources
* [VS Code Marketplace - React PropTypes Extension](https://marketplace.visualstudio.com/items?itemName=suming.react-proptypes-generate)
* [NPM Registry - PropTypes](https://www.npmjs.com/package/prop-types(



Automate Adding PropTypes to Components with VS Code's React PropTypes Generator Extension

You're going to run into a lot of frustration writing Node CLI's unless you get good at debugging. (Even if you use TypeScript!) To understand code execution (particularly code you didn't write), you should be comfortable using the VS Code Debugger for its excellent step-through and watch features. But in case you don't know where the problem is (particularly for heavily nested codebases like React) or if you're looking for performance issues rather than code errors, you'll also want a robust logging solution. The `debug` module is best in class and is built into Oclif.

Debug Node.js CLIs with the VS Code Debugger and the `Debug` module

You might find yourself with two almost identical files and want to quickly see the difference. VSCode has a built-in mechanism for file diffing.

Diffing Two Files in VSCode

VSCode Themes are a quick way to update the color scheme and syntax highlighting of your code, but you might find your favorite theme isn't quite perfect. VSCode supports customizations that allow you to fix that problem.

In this lesson, I add settings to update the syntax highlighting for the Synthwave '84 theme in Markdown and MDX files. We do this by inspecting TM scopes and making custom rules in our `settings.json`.

The settings I used are:

```javascript
"editor.tokenColorCustomizations": {
  "[SynthWave '84]": {
    "textMateRules": [
      {
        "scope": "markup.inline.raw",
        "settings": {
          "foreground": "#72f1b8",
        }
      },
      {
        "scope": "markup.italic.markdown",
        "settings": {
          "foreground": "#36f9f6",
          "fontStyle": "italic"
        }
      },
    ]
  }
}
```

     

Adding Custom Syntax Highlighting to a Theme in VSCode

Developers can optimize their VSCode settings per language. In this lesson, I show an example where I add settings specifically for MDX files. This pattern can be used to adjust settings for any language supported by VSCode.

The settings used in this lesson are:

```javascript
"[mdx]": {
  "editor.wordWrap": "bounded",
  "editor.wordWrapColumn": 80
}
```

Adding Language Specific Settings in VSCode

VSCode is a free and powerful text editor for writing code. I use it daily and continue to find useful and interesting tips and tricks regularly. I want to share those tips and tricks with you.

Kyle's VSCode Tips and Tricks

VSCode snippets are a great way to add some automation around repetitive coding tasks. They are even more powerful when you take advantage of tab stops and multi-cursor support. In this lesson, we'll create a snippet that supports both, allowing you to insert some boilerplate code with the snippet, then by typing an identifier once, have it show up in 3 places in the code. Finally, with tab stop support, we can make the cursor go to where it's going to be needed next.

Create a VSCode snippet with support for multiple cursors

VS Code Extensions

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Whenever I need to make a change to a file that includes a part I don't grasp I try to gather as much informations as possible. One tool that turned out to be very helpful to build up context was seeing who wrote the code & when.

In this lesson I demonstrate you how this can easily be achieved using the VS Code GitLens extension and how to set it up in a way that it's not constantly bothering you.

Get Git Blame insights directly in VS Code using GitLens

Use the Peacock extension to assign colors to the border of each VS code window or project.

Apply Colors to your VS Code border to Differentiate Between Windows

In this lesson, you'll learn how to set up a "live scratchpad" for JavaScript using an extension called [Quokka](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode). Similar to JS Bin, CodePen, or CodeSandbox, Quokka lets you run some JavaScript code right from VSCode without leaving your text editor.

This is a handy tool for debugging or isolating code when you want to quickly test something out.

To learn more about Quokka, check out their website at [quokkajs.com](https://quokkajs.com/).

Set Up a Live Scratchpad for JavaScript in VSCode using Quokka

Learn how to add a shortcut for templates of commonly reused sections of code like new files, functions, or loops.

Create a Shortcut for a New React File with Custom VSCode Snippets

Gain efficiency in navigating and manipulating text in VSCode. If all you’re using right now is your mouse, you’re leaving a lot on the table in terms of efficiency. 

VSCode gives you the ability to detect patterns in text and manipulate those patterns as you see fit. e.g. when you’re renaming a variable, you don’t want to rename just the declaration but all the uses of that variable in one file. Do so in just a few key presses.

Text Manipulation in VSCode

The VS Code debugger provide a rich debugging experience allowing you to step through your code line by line and view variable values. In this video you will learn how to enable source maps for TypeScript and use them with the VS Code debugger so you can write and debug code using the TypeScript source while Node executes the compiled output.

Debug TypeScript applications using the VSCode debugger

Determine whether a keybinding in VS Code is duplicated and change the binding to a unique set of keys so you can use the shortcut.

Find and Fix Keybinding Clashes in VS Code

Mock Service Worker is an API mocking library that allows you to write client-agnostic mocks and reuse them across any frameworks, tools, and environments.



Mocking WebSocket APIs with Mock Service Worker


While using anonymous functions might seem convenient, they can create difficulties when trying to identify performance bottlenecks during profiling. This lesson will demonstrate how named functions make it easier to pinpoint and address performance issues, ultimately leading to more efficient and debuggable code. Learning this practice will greatly improve your ability to locate and fix performance issues in complex projects.

Always Name Functions in JavaScript


When attempting to load the same module twice in JavaScript you'll hit a cache and code won't re-run. In scenarios where you actually do want to have state in your modules, you'll have to use a cache-busting technique by passing a query parameter to a dynamic import. This lesson walks through how to add a query parameter, how to add the appropriate types for loading dynamic modules in TypeScript, and when these techniques are valuable.

Import the Same JavaScript Module Multiple Times with Cache Busting



The include keyword in GitHub Actions empowers you to add custom variables to your matrix strategy, providing flexibility beyond standard configurations. In this video, we'll explore how include allows you to define specific combinations of variables, enhancing control over your workflow runs. You'll see how this feature enables you to tailor jobs for unique environments or scenarios not covered by the default matrix options. By leveraging include, you can efficiently manage complex build processes with greater precision. This technique helps you streamline your CI/CD pipeline, making it more adaptable to your project's evolving needs.

Use GitHub Actions Matrix Include for Complex Job Configurations

While running `zod` schema validation agains domain-rich objects, the error message saying that _a string is not a number_ might not be really useful.

Especially, when you need to provide a meaningful feeback to the user, e.g. after they have submitted a form with lots of data.

`zod` allows to customize messages on a very granular level. We can also extract repeatable customization to `zod` error maps.

Finally, in order to process an error message further (e.g. display it to the user), we need to handle the `zod` validation errors effectively. Especially, when a big object validation has failed and we could receive a handful of errors.

That's what we learn in this lesson. 🔥

Customize zod Error Messages and Handle zod Errors Effectively

customize zod validation messages, customize zod schema property messages, reuse error maps across different schemas, navigate through zod error objects

You might want to run `zod` schema checks in different styles.

Sometimes you prefer to conditionally throw the error - that's what `parse` does. But another time you'd prefer to receive a `boolean` property that determines whether the validation was successful or not - and perform further actions accordingly.

Additionally, the error-throwing API of `parse` works extremely well with [TypeScript assertion functions](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#assertion-functions). Their combination is just... perfect! 👌

That's what we learn in this lesson.

Use parse and safeParse Runtime Type-checks with zod

use zod parse function to conditionally throw ZodError, use zod safeParse to get a boolean value and run typescript type guard over success property

In this lesson we learn that TypeScript cannot guarantee correct shapes of responses. That's due to TS performing checks in compile-time, while the response will be availbale in runtime - when TS doesn't exist anymore.

In some situations, such as HTTP requests, runtime type checks such as `zod` are essential for providing quick feedback around data-related errors.

Understand where are the possible mistakes to make while using TypeScript with HTTP calls. Use `fetch` and `axios` along with `zod` schema checks.

Also, note that similar mistakes or mistakes could happen while using web storage (e.g. `localStorage`)

Validate HTTP API Response with zod, fetch and axios

use zod as an HTTP response validation tool along with fetch and axios in order to make sure that the response has expected data structure

In this lesson we learn that the `zod` schemas become the single source of truth.

We shall not update TypeScript types manually, since they are generated automatically from the schema.

Same with validation functions.

Whenever the schema changes, all the rest will update accordingly. It's an important mind shift.

Treat zod Schemas as Single Source of Truth

Zod Schemas are the single source of truth for both typescript types, and interfaces - and runtime validation functions. Schemas should be updated first.

`zod` is powerful, but writing the schemas manually for existing JSON objects, especially big ones, can be time-consuming.

But that's what `quicktype` is for! You can get 80% work done instantly! 🥳

Depending on your need - whether you want to automate the process, or do it just one time, you can:
- use an online app
- use an IDE extension
- run a CLI script
- generate a script to be executed within CI/CD environment/tooling

And this is what we learn in this lesson! 🔥🔥🔥

Get started with zod quickly!

Generate zod Schemas Automatically using Quicktype App, Extensions and Scripts

Use quicktype app, extension or scripts to automatically generate zod schemas from existing json files. Save time and get started with zod quickly!

`zod` is a powerful library allowing to run runtime type-checks.

It's complementary to TypeScript, which does type checks in compile time.

In this lesson we create few schemas that represent primitive type values, along with `zod` utilities which make these more precise. We also create object schemas and nest one inside another.

All schemas are being validated against example values. We analyze how to interpret error messages in case of failures.

Perform Runtime Type-checks on Primitives and Objects with zod

Create zod schemas to validate primitive type and object type values in runtime. Analyze the errors to see how a value doesn't correspond to schema expectations

VS Code

Search Results