You can use the [**Live Preview**][1] extension from Microsoft:

[![Live Preview Extension][2]][2]

[<del>[Deprecated] Browser Preview</del>][3]


 [1]: https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server
 [2]: https://i.stack.imgur.com/FleEk.gif
 [3]: https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview

I am writing a visual studio code extension and I'd like to be able to open a browser window with a specific url in response to a command. I know that Electron has a BrowserWindow class but it appears that the Electron API is not accessible from a vscode extension.

I'd prefer the browser window to open within the tool but I'd be ok with opening the web page in my default browser if it is not possible. 

How does one open a web page from an extension?

How do I open a browser window in a visual studio code extension?

This isn't trivial, but does answer the question.

You can retrieve all commands from within a VS Code Extension.  So if you [create your own][1] like this:

```bash
npm install -g yo generator-code
yo code
```

Then you can use the [`commands`][2] object like this:

```ts
let commands = await vscode.commands.getCommands()
```

Which does the following according to the docs:

> Retrieve the list of all available commands. Commands starting with an underscore are treated as internal commands.

**See Also**: [List of all available commands in VSCode][3]

[1]: https://code.visualstudio.com/api/get-started/your-first-extension
[2]: https://code.visualstudio.com/api/references/vscode-api#commands
[3]: https://stackoverflow.com/q/58367207/1366033

When creating or editing the keybindings.json file v1.2.1 of Visual Studio Code requires not only the key to bind but also the 'CommandID' and 'When' condition.  

I am looking for a complete list of 'CommandIDs' available to use and have been unable to find one. Where is that complete list of commands ?

Thanks

VSCode Keyboard command ids

There are many different ways you may need to access a file that are provided by  [**Predefined variables**][1]:


> Supposing that you have the following requirements:
>
> * A file located at `/home/your-username/your-project/folder/file.ext` opened in your editor;
> * The directory `/home/your-username/your-project` opened as your root workspace.
>
> So you will have the following values for each variable:
>
> * **`${userHome}`** - `/home/your-username`
> * **`${workspaceFolder}`** - `/home/your-username/your-project`
> * **`${workspaceFolderBasename}`** - `your-project`
> * **`${file}`** - `/home/your-username/your-project/folder/file.ext`
> * **`${fileWorkspaceFolder}`** - `/home/your-username/your-project`
> * **`${relativeFile}`** - `folder/file.ext`
> * **`${relativeFileDirname}`** - `folder`
> * **`${fileBasename}`** - `file.ext`
> * **`${fileBasenameNoExtension}`** - `file`
> * **`${fileDirname}`** - `/home/your-username/your-project/folder`
> * **`${fileExtname}`** - `.ext`
> * **`${lineNumber}`** - line number of the cursor
> * **`${selectedText}`** - text selected in your code editor
> * **`${execPath}`** - location of Code.exe
> * **`${pathSeparator}`** - `/` on macOS or linux, `\` on Windows



[1]: https://code.visualstudio.com/docs/editor/variables-reference

I am writing javascript and am currently doing simple exercises/programs.  At times, I wish to run my file for testing purposes.  I am aware I could create an `HTML` file and do this within the console.  In Sublime, there exists a way to "build" the current file and immediately see the results (say, whatever is sent to console.log). 

With VS Code, it seems that for every file I want to "build"/debug in this manner, I must manually change the `launch.json` file to reflect the name of the current program.  

I have been researching a way around this, and I learned that there are variables like `${file}` , but when I use that in the `launch.json` "program" attribute, for example: 

    "program": "${workspaceRoot}/${file}"

with or without the `workspaceRoot` part, I get the following error: 

    Attribute "program" does not exist" (file name here). 

Am I missing a simple way to accomplish this, or must I keep editing `launch.json` every time I want to run the file? 

Thanks in advance! 

Debugging current file in VS Code

Yes you can - Just add `isBackground:true` to your task definition:

```
{
  // ...
  "isBackground": true
}
```

**Note**: If you don't care about parsing terminal output, you can ignore the warning about not having a `problemMatcher`.


According to this [section in the docs](https://code.visualstudio.com/docs/editor/tasks#_can-a-background-task-be-used-as-a-prelaunchtask-in-launchjson):

> ### Can a background task be used as a prelaunchTask in launch.json?
> 
> Yes. Since a background task will run until killed, a background task on its own has no signal that it has "completed". To use a background task as a `prelaunchTask`, you must add an appropriate background `problemMatcher` to the background task so that there is a way for the task system and debug system to know that the task "finished".
> 
> Your task could be:
> 
> ```json
> {
>   "type": "npm",
>   "script": "watch",
>   "problemMatcher": "$tsc-watch",
>   "isBackground": true
> }
> ```
> 
> **Note**: The `$tsc-watch` is a background problem matcher, as is required for a background task.
> 
> You can then use the task as a prelaunchTask in your launch.json file:
> 
> ```json
> {
>   "name": "Launch Extension",
>   "type": "extensionHost",
>   "request": "launch",
>   "runtimeExecutable": "${execPath}",
>   "args": ["--extensionDevelopmentPath=${workspaceRoot}"],
>   "stopOnEntry": false,
>   "sourceMaps": true,
>   "outFiles": ["${workspaceRoot}/out/src/**/*.js"],
>   "preLaunchTask": "npm: watch"
> }
> ```
> 
> For more on background tasks, go to [Background / watching tasks.](https://code.visualstudio.com/docs/editor/tasks#_background-watching-tasks)


**See Also**: [How to make vscode not wait for finishing a preLaunchTask?](https://stackoverflow.com/q/44242048/1366033)

I'm using the [VS Code Debugger for Chrome][1] to debug my web app. In the `launch.json` where all the configurations are the task is defined like this

```json
{
    "name": "Debug App in Chrome",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:8080/",
    "webRoot": "${workspaceRoot}",
    "sourceMaps": true
}
```

That works fine. Opens the browser on the specific address and the debug tools work fine.

But I want before opening the browser to have a `preLaunchTask` that would build my project and create a server so when the browser is open there is an actual server on that address/port. So I added this line `"preLaunchTask": "server:dev"`. That task builds the project, starts a watch mode and creates the server. But when I added that task, the prelaunch task is executed successfully but the browser does not open at all.

I'm guessing that is because the `--watch` flag, actually keeps the task "alive" (and same maybe for the creation of the server) and the VS Code waits for the `preLaunchTask` to terminate completely before starting the main task?

My question is: Is there a way to tell VS Code that the prelaunch task actually does not terminate, so it should not wait for it to end completely before starting the main task? Or I'll not be able to do all this (building, watching, starting server and opening the browser) with only 1 button?

  [1]: http://%22server:dev%22:%20%22webpack-dev-server%20--config%20config/webpack.dev.js%20--progress%20--profile%20--watch%20--content-base%20src/%22,

Running preLaunchTask with watch mode in VS Code

This is a [**very highly upvoted issue request in Github for Floating Windows**][1].

Until they support it, you can try the following *workarounds*:

### 1. Duplicate Workspace in New Window [\[1\]][2]



The [Duplicate Workspace in new Window Command][6] was added in v1.24 (May 2018) to sort of address this.

1. Open up Keyboard Shortcuts <kbd>Ctrl</kbd> + <kbd>K</kbd>, <kbd>Ctrl</kbd> + <kbd>S</kbd>
2. Map `workbench.action.duplicateWorkspaceInNewWindow` to <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>N</kbd> or whatever you'd like

![Duplicate Workspace in New Window][8]



### 2. Open Active File in New Window [\[2\]][3]

Rather than manually open a new window and dragging the file, you can do it all with a single command.

1. Open Active File in New Window <kbd>Ctrl</kbd> + <kbd>K</kbd>, <kbd>O</kbd>

![Open Active File in New Window][9]



### 3. New Window with Same File [\[3\]][4]

As AllenBooTung also pointed out, you can open/drag any file in a separate blank instance.

1. Open New Window <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>N</kbd>
2. Drag tab into new window



### 4. Open Workspace and Folder Simultaneously [\[4\]][5]

VS Code will not allow you to open the same folder in two different instances, but you can use [Workspaces][7] to open the same directory of files in a side by side instance. 

1. Open Folder <kbd>Ctrl</kbd> + <kbd>K</kbd>,<kbd>Ctrl</kbd> + <kbd>O</kbd>
2. Save Current Project As a Workspace
1. Open Folder <kbd>Ctrl</kbd> + <kbd>K</kbd>,<kbd>Ctrl</kbd> + <kbd>O</kbd>

----

For **any workaround**, also consider setting setting up auto save so the documents are kept in sync by updating the `files.autoSave` setting to `afterDelay`, `onFocusChange`, or `onWindowChange`

![AutoSave][10]


 [1]: https://github.com/Microsoft/vscode/issues/10121
 [2]: https://github.com/Microsoft/vscode/issues/10121#issuecomment-430137243 "Duplicate"
 [3]: https://github.com/Microsoft/vscode/issues/10121#issuecomment-436791520 "Active File"
 [4]: https://github.com/Microsoft/vscode/issues/10121#issuecomment-315778189 "New Window"
 [5]: https://github.com/Microsoft/vscode/issues/10121#issuecomment-426858134 "Workspace"

 [6]: https://code.visualstudio.com/updates/v1_24#_duplicate-workspace-in-new-window
 [7]: https://stackoverflow.com/q/44629890/1366033

 [8]: https://i.stack.imgur.com/03NXR.png
 [9]: https://i.stack.imgur.com/g5UCL.png
 [10]: https://i.stack.imgur.com/bdqYt.png

I am trying to open a tab in a new window in Visual Studio Code so I can move it to another screen. If I drag the tab the other screen, a file is created. Is there a shortcut to open a tab in a new Visual Studio Code window so I can move it to another screen?

Visual Studio Code open tab in new window

You can also get intellisense support from [PropTypes][1]. You'll need to install [prop-types][2]


```js
import React from "react"
import PropTypes from 'prop-types';

function Header(props) {
 return <h1>{props.headerText}</h1>
}

Header.propTypes = {
 headerText: PropTypes.string.isRequired
}

export default Header
```

[![example of intellisense][3]][3]


 [1]: https://reactjs.org/docs/typechecking-with-proptypes.html
 [2]: https://www.npmjs.com/package/prop-types
 [3]: https://i.stack.imgur.com/qDL3l.png

How to make VS Code autocomplete React component's prop types while using the component in JSX markup? 

P.S.: I'm using JS, not TS. 

How to make vs code autocomplete React component's prop types?

## For Windows OS

For Windows, you'll need to re-install code.  You can [download](https://code.visualstudio.com/Download) the latest version and just install it overtop of your existing install.

During setup, make sure to check the box to `Add to PATH`

[![Setup - Add to Path][1l]][1]

**See Also**: [The VSCode docs on installing the CLI][2]

  [1]: https://i.stack.imgur.com/5hXi9.png
  [1l]: https://i.stack.imgur.com/5hXi9l.png
  [2]: https://code.visualstudio.com/docs/editor/command-line#_code-is-not-recognized-as-an-internal-or-external-command

[![this is the line i get when i did shell command in VS code][1]][1]

I get this error:

> `code .`  is not recognised as an external or internal command, operable program or batch file


  [1]: https://i.stack.imgur.com/Wy0Z8.jpg

moreover shell commands are not coming in my compiler VS code neither do  setx path "%path%;C:\Program Files\Microsoft VS Code" is working in command prompt . 

"code ." command is not working

### Update [v1.62][0]+ (October 2021)

This is now natively available in VSCode thanks to [this PR on changing the default behavior of InsertCursorAbove/Below][1]. However, it's not enabled by default.

You'll need to update your keybindings to pass in an `args` like this:

```json
{
  "key": "shift+alt+down",
  "command": "editor.action.insertCursorBelow",
  "when": "textInputFocus",
  "args": { "logicalLine": true },
},
{
  "key": "shift+alt+up",
  "command": "editor.action.insertCursorAbove",
  "when": "textInputFocus",
  "args": { "logicalLine": true },
},
```

[0]: https://code.visualstudio.com/updates/v1_62#_thank-you:~:text=InsertCursorAbove/Below
[1]: https://github.com/microsoft/vscode/pull/135805

I have turned on Word Wrap in VSCode, so that long lines are wrapped at certain window widths.

If I want to comment out some code or text, I usually just move the cursor to the beginning of the first line of the block of code, use ctrl+shift+down to add cursors, and type the `//` or `#` etc..

The problem with Word Wrap is that I not only get cursors in the beginning of each actual line, but in the beginning of every line as it is displayed at the moment in the editor.

For example, for the following document:

```none
1 This is the first line.
2 Second line.
```

It might be wrapped like this: 

```none
1 This is the first 
  line.
2 Second line.
```

So if I use the method above and add `%` I would get:

```none
1 %This is the first 
  %line.
2 %Second line.
```

But what I want is the following:

```none
1 %This is the first 
  line.
2 %Second line.
```

Otherwise, I have a `%` in the middle of the line, just because I resized the editor window.

At the moment, I actually turn off Word Wrap to achieve this, but I hope there is a better way?


How to avoid multi cursor on wrapped lines in VS Code?

It doesn't look like the [`live-server` npm package][1] or the [live server vs code extension][2] currently have this functionality baked in.

However, you can make a local url publically available via [ngrok][3]

1. Run live-server:

    ```bash
    npx live-server
    ```

2. Then, in a separate terminal, run ngrok:

    ```bash
    npx ngrok http 8080
    ```

[![screenshot of windows terminal][4]][4]



  [1]: https://www.npmjs.com/package/live-server
  [2]: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
  [3]: https://ngrok.com/
  [4]: https://i.stack.imgur.com/e0jzp.png

Live Server is quite handy while developing and debugging.  This feature is available in node packages


    $ npm install browser-sync --save-dev

Then below command will provide the Local and External URL to get the live updates in our HTML page.

    $ gulp watch


The External URL is used to access the live changes that is made to web pages through the device connected through WiFi. This feature helps in multiple device testing at the time of development. Currently the Live Server plugin in visual studio code,enable us to view changes only in the system where it is being developed (local).

Is there any plugin or setting changes in Live Server that enable External URL feature?

How to get external URL for Live Server in Visual Studio Code?

### 1. Check that the following tags match

`package.json`



<pre><code>"devDependencies": {
 "flow-bin": "0.130.0"
}</code></pre>


`.flowconfig`



<pre><code>[version]
^0.130.0</code></pre>


### 2. Clean & Reinstall

If they match, this error can occur when your `node_modules` are out of sync with the version of [`flow-bin`][1] in your `package.json`. This can occur if you've changed branches recently or have have an older version in your node modules.

Try removing and reinstalling like this:


```bash
rm -rf node_modules/ && npm i
```




[1]: https://www.npmjs.com/package/flow-bin

Hello I am a beginner in React-native and below is my flowconfig file's version and I get an error with this version


    [version]
    ^0.92.0

Is there a way to fix this error, I was trying to run debug mode in visual code for running react-native projects and to print console.log.
So far I am unsuccessful.

PS:- beginner in react-native


Visual studio code error :-Failed to start flow Error: Wrong version of Flow. The config specifies version ^0.92.0 but this is version 0.95.1

In VS Code, there are several tags which trigger autocompletion and validation for local file path references. For example, when entering an img tag:


[![Path autocomplete][1]][1]


I have a json file which stores the metadata for an image grid, and I'd like to try to add a validation that the image path is typed in correctly. For example, here's an a json file that contains items with image paths and other metadata:

**images.json**

```js
[
 {
 "color": "red",
 "path": "./images/kitten.jpeg" /* identify value type as local path */
 },
 /* ... more items ...*/
]
```

And here's a [JSON Schema Definition][2] which has been [applied to the vs workplace settings][3]:


**.vscode/settings.json**

```js
{
 "json.schemas": [
 {
 "fileMatch": [
 "/images.json"
 ],
 "schema": {
 "$schema": "http://json-schema.org/draft-07/schema#",
 "type": "array",
 "items": [
 {
 "type": "object",
 "properties": {
 "color": {"type": "string", "enum": ["blue", "red", "green"]},
 "path": {"type": "string", /* what to put here */},
 }
 },
 ]
 }
 }
 ]
}
```

Is there any way to check local file paths using [JSON Schema Validation][4] or some alternative way to tell VS Code that a particular field is representing local file references?


 [1]: https://i.stack.imgur.com/HTBsA.png
 [2]: http://json-schema.org/draft-04/json-schema-core.html
 [3]: https://code.visualstudio.com/docs/languages/json#_json-schemas-and-settings
 [4]: https://json-schema.org/latest/json-schema-validation.html

JSON Path Autocomplete in VS Code using JSONSchema

The clock is the "Progress Badge" which is visible while VS Code is getting repository info and status:

![VS Code Git Progress Badge][1]

You can disable it in settings:


```js
{ 
  // controls whether git actions should show progress
  "git.showProgress": true
}
```


  [1]: https://i.stack.imgur.com/zgkrn.png

What does it mean when a blue clock icon is displayed over the VS Code source control icon? When I run the git status command, I get the message: "nothing to commit, working tree clean." I checked the VS Studio documentation, but I couldn't find anything on this topic.

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/yRzPp.png

Meaning of clock icon in VS Code source control

It's a highly requested feature, but there's currently no native way to do this.  

But you can download the extension [**Sync Scroll**][4] which will scroll all open editor panes

![demo](https://i.imgur.com/aJL7iRe.gif)


### Additional Resources

* Stack Overflow - [Synchronise vertical/horizontal scrolling in split view][1]
* Github - [Synchronized Scrolling in Split Editor][2]
* Github - [Link scrolling in editor split-view][3]

[1]: https://stackoverflow.com/q/45325984/1366033
[2]: https://github.com/microsoft/vscode/issues/33110
[3]: https://github.com/Microsoft/vscode/issues/34762
[4]: https://marketplace.visualstudio.com/items?itemName=dqisme.sync-scroll

I'm trying to compare similar, but different files in VS Code. 

Is it possible to scroll both panes at the same time? 

I'm referring to `Editor Groups` in the image below.

This sample image is taken from https://code.visualstudio.com/docs/getstarted/userinterface

[![VS Code Activity Bar, split panels, Editor Groups, Side Bar, and Status Bar][1]][1]


  [1]: https://i.stack.imgur.com/P9xK2.png

VS Code: How to scroll split panels simultaneously

The [**official guidance**][1] is to use the [**`runtimeArgs`** attribute][2] like this:

```json
{
    "name": "Launch Program",
    "request": "launch",
    "type": "node",
    "runtimeArgs": ["--experimental-modules"],
    "program": "${workspaceFolder}\\bin\\www"
}
```

Which will run the following terminal command:

```bash
node.exe --experimental-modules .\bin\www
```

**See Also**: [How to start nodejs with custom params from vscode][3]


[1]: https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_how-do-i-debug-ecmascript-modules
[2]: https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_launch-configuration-attributes
[3]: https://stackoverflow.com/q/29968919/1366033

I can run my node.js application with `es6` modules with the `--experimental-modules` flag as follows:

    node --experimental-modules ./bin/www

How can I do the same when debuggging the application from VS Code, which uses the launch.json configuration file? 

    {
        "version": "0.2.0",
        "configurations": [
            {
              "type": "node",
              "request": "launch",
              "name": "Launch Program",
              "program": "${workspaceFolder}\\bin\\www",
            }
        ]
    }

VS Code debug with --experimental-modules flag

# Update 2018

VS Code now handles this natively via a [`jsconfig.json`][1] and the [JavaScript Language Service][2].

Create the file `jsconfig.json` at your project root and make sure to set `checkJs` to `true`:

Creating a JS Config file, allows Visual Studio to treat the folder as an **Explicit Project**. Without it, JS files opened in VS Code are treated as independent units, and there is no common project context between any two files.


### Example:



<pre><code>{
 "compilerOptions": {
 "baseUrl": "./src",
 "checkJs": true,
 "jsx": "react"
 }
}
</code></pre>

### Code Action / Quick Fix

Missing modules will show up with a [Code Action][7] (AKA "Quick Fix") with an option to import. You can click on the lightbulb 💡 or use <kbd>`Ctrl`</kbd> + <kbd>`.`</kbd>

[![code action > import][3]][3]

### Auto Imports / IntelliSense

[Auto Imports][8] will show you available components as you type and import them when selected

[![intellisense > auto import][4]][4]

### Further Reading

* [Visual Studio Code Automatic Imports][5]
* [How to add jsconfig.json to existing vscode project w/o breaking it][6]


 [1]: https://code.visualstudio.com/docs/languages/jsconfig
 [2]: https://github.com/microsoft/TypeScript/wiki/JavaScript-Language-Service-in-Visual-Studio
 [3]: https://i.stack.imgur.com/qQ4FJ.png
 [4]: https://i.stack.imgur.com/oAIeg.png
 [5]: https://stackoverflow.com/a/53015835/1366033
 [6]: https://stackoverflow.com/q/56437517/1366033
 [7]: https://code.visualstudio.com/docs/editor/editingevolved#_code-action
 [8]: https://code.visualstudio.com/Docs/languages/javascript#_auto-imports

I'm using JavaScript (not TypeScript) and using the latest Visual Studio Code.  

I'm not able to get auto import of components working. I've been using the [Auto Import plugin by steoates][1], but it doesn't seem to work. I haven't seen any recent notes about this.

Are there other plugins I've not found that help with auto-import of React Components?

[1]: https://marketplace.visualstudio.com/items?itemName=steoates.autoimport

Auto Import of React Components in Visual Studio Code

I was able to get it to work with the following launch configuration:

```json
{
    "name": "Run Mocha",
    "type": "node",
    "request": "launch",
    "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
    "args": [
        "--no-timeouts",
        "--require",
        "ts-node/register",
        "${workspaceRoot}/src/**/*.spec.ts"
    ],
    "cwd": "${workspaceRoot}",
    "protocol": "inspector"
}
```

I also had to set `module` as `commonjs` in my `tsconfig.json`:

```json
{
  "compilerOptions": {
    "module": "commonjs",
  }
}
```

### Here's an [example repo][2] with all the files setup correctly

[![Debugging Example][1]][1]



**Further Reading**

* [Issue with mocha test debugging from typescript][3]
* [Running Mocha with TypeScript][4]

[1]: https://i.stack.imgur.com/9Cyrg.png
[2]: https://github.com/KyleMit/debug-mocha-typescript
[3]: https://stackoverflow.com/q/52357172/1366033
[4]: https://www.hossambarakat.net/2017/06/01/running-mocha-with-typescript/

I have started developing a Node/ExpreeJS project in TypeScript.
I should note that I am not running node directly. I am running node in a docker but I do not see any reason that this would be an issue.

I am using vscode as my editor and I am trying to configure a debug launch config for Mocha tests.

My launch configuration is

    {
        "type": "node",
        "request": "launch",
        "name": "SK - Mocha Tests",
        "cwd": "${workspaceRoot}",
        "runtimeExecutable": "make",
        "runtimeArgs": [
            "test-brk"
        ],
        "port": 9321,
        "console": "integratedTerminal",
        "internalConsoleOptions": "neverOpen",
        "protocol": "inspector",
        "sourceMaps": true,
    }

The `make test-brk` command simply maps to a `docker exec` command that executes `npm run test-brk` within the container.

My package.json contains this script definition for `test-brk`

`"test-brk": "mocha --require source-map-support/register --require node_modules/ts-node/register --inspect-brk=0.0.0.0:9222 --debug-brk --exit test/**/*.spec.ts"`

Running the `SK - Mocha Tests` debug task from vscode launches Mocha and runs the tests as expected.
The inspect server is started and the vscode debugger successfully connects as can be seen in the output below.

    $  cd /home/andrew/workspace/service-kit/sk-base-nodejs ; /usr/bin/make test-brk 
    (docker exec node npm run test-brk)
    
    > sk-base-nodejs@0.0.1 test-brk /workspace
    > mocha --require source-map-support/register --require node_modules/ts-node/register --inspect-brk=0.0.0.0:9321 --debug-brk --exit test/**/*.spec.ts
    
    Debugger listening on ws://0.0.0.0:9321/d696c7a4-c4e1-4212-af85-ab1675856a7a
    For help, see: https://nodejs.org/en/docs/inspector
    Debugger attached.
    HTTP server listening on port 8080
    
    
      Hello World
        ✓ should return 200 and Hello World
    
    
      1 passing (34ms)
    
    Waiting for the debugger to disconnect...

However breakpoints are not being hit.
I have set in both the application TS source and the test TS source.
When the tests are running the breakpoints grey out and show

> Breakpoint ignored because generated code not found (source map problem?)

I understand that this is a source map issue between the source TS and the JS being executed for the tests.
As above I am using ts-node with Mocha there seems to be a problem because ts-node does not generate source map files for vscode to read.
This is described in [ts-node/issues/46][1] however there is no solution in that issue. It ultimately links to [vscode-chrome-debug-core/issues/533][2] which reports that it is fixed in a previous release of vscode.

There is also [vscode/issues/3144][3] which suggests transpiling the TS tests into JS and then executing the JS.. but this doesn't allow debugging the source TS.

I would greatly appreciate any input to point me in the right direction.


  [1]: https://github.com/TypeStrong/ts-node/issues/46
  [2]: https://github.com/microsoft/vscode-chrome-debug-core/issues/533
  [3]: https://github.com/microsoft/vscode/issues/3144

Vscode breakpoints for TypeScript Mocha tests

No need for an extension - the [PHP CLI][1] actually comes with a [built-in webserver][2]

Just run the following command:


```bash
php -S localhost:2222
```

If you really wanted to bake this into VSCode, you could add a [task][3] to execute it for you.

[1]: https://www.php.net/manual/en/features.commandline.options.php
[2]: https://www.php.net/manual/en/features.commandline.webserver.php
[3]: https://code.visualstudio.com/docs/editor/tasks#_custom-tasks

I am trying to develop web pages with `php` calls using `vscode` and `vscode live server`.  I have installed live server and it works fine with html/css/js.    However if the code I'm developing refers to a .php file, I just get the text of the php file, it is not executed by the server.  I did find `live-server-web-extensions` which installs into the chrome browser, presumably to do a reload when the php files are modified as well.

So what I need to know is: How do I configure the server to process php files?  I do have php.exe on my system, and if I used the php browser, things work fine.  But I'd like to use vscode and live server for development, and I'm missing the secret sauce.  I'm am using the Chrome browser and Windows 10.

How do I configure vscode live server to process php files properly (I'm using Win10 and Chrome)?

From Tyson Matanich on [any way to debug functions?][1], you can do the following:

#### package.json

```json
{
 "scripts": {
 "debug": "netlify dev --inspect",
 }
}
```

#### launch.json

```json
{
 "version": "0.2.0",
 "configurations": [
 {
 "name": "Launch Node",
 "type": "pwa-node",
 "request": "launch",
 "runtimeArgs": ["run-script", "debug"],
 "runtimeExecutable": "npm",
 "skipFiles": ["<node_internals>/**"]
 }
 ]
}
```

[![Example Screenshot][2]][2]


 [1]: https://github.com/netlify/cli/issues/409#issuecomment-715512172
 [2]: https://i.stack.imgur.com/qkP57.png

I'm trying to set a breakpoint inside of a netlify function that is executed via `netlify dev` with the following setup:

## Setup

### Install [Netlify-CLI][1]

```bash
npm install netlify-cli -g
```

### `netlify.toml`

```toml
[build]
 functions = "functions/"
```

### `functions/hello.js`

```js
exports.handler = async(event, context) => {
 let output = `Hello, ${event.queryStringParameters.name}`
 return { statusCode: 200, body: output};
}
```

Here's a [sample project][10] with the setup

### Run

You should be able to run normally via `netlify dev` 

[![netlify dev screenshot][2m]][2]

Which will expose the function at the following address:

<pre><code><a href="http://localhost:8888/.netlify/functions/hello?name=Kyle">http://localhost:8888/.netlify/functions/hello?name=Kyle</a></code></pre>

## Debugging Attempts

### `Launch.config`

In VSCode, you should be able to setup debugging with a `launch.config`. I've tried the following configuration

```json
{
 "version": "0.2.0",
 "configurations": [
 {
 "type": "node",
 "request": "launch",
 "name": "Launch Program",
 "skipFiles": [
 "<node_internals>/**"
 ],
 "program": "${workspaceFolder}\\node_modules\\.bin\\netlify",
 "args": ["dev"]
 }
 ]
}
```

But I get the following error:

```bash
C:\Program Files\nodejs\node.exe .\node_modules\.bin\netlify dev
Uncaught c:\Users\kylemit\Documents\code\netlify-func\node_modules\.bin\netlify:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
 ^^^^^^^

SyntaxError: missing ) after argument list
<node_internals>/internal/modules/cjs/loader.js:991
Process exited with code 1
```

### Node `--inspect`

There are lots of examples that leverage the [`--inspect` switch`][3] for node, but I can't figure out how to get that to work with VS Code Breakpoints.

### Other Threads

* [Any way to debug functions? #409][4]
* [Netlify Dev functions - debugging and other issues][5]
* [Running netlify functions in a debugger][6]
* [Debug lambda functions locally #71][7]
* [Debugging help / using `--inspect` flag throws "error : unknown option" #148][8]
* [Debug netlify lambda functions][9]

[1]: https://www.npmjs.com/package/netlify-cli
[2]: https://i.stack.imgur.com/ep49d.png
[2m]: https://i.stack.imgur.com/ep49dm.png
[3]: https://nodejs.org/en/docs/guides/debugging-getting-started/
[4]: https://github.com/netlify/cli/issues/409
[5]: https://community.netlify.com/t/netlify-dev-functions-debugging-and-other-issues/4429
[6]: https://community.netlify.com/t/running-netlify-functions-in-a-debugger/9758/3
[7]: https://github.com/netlify/netlify-lambda/issues/71
[8]: https://github.com/netlify/netlify-lambda/issues/148
[9]: https://stackoverflow.com/q/63703439/1366033
[10]: https://github.com/KyleMit/netlify-func-debug

Debug Netlify Functions in VS Code

I'm trying to determine if the active editor is opened by git or not (i.e. files that typically end in Working Tree, Untracked, etc)

There is little difference in `vscode.window.activeTextEditor` from the original file vs the same file opened from git with the modifications view, save for one field:

```ts
(vscode.window.activeTextEditor as any).id
```

Which returns a string like this:

```js
'vs.editor.ICodeEditor:1,$model12' // value for normal editor
'vs.editor.ICodeEditor:7,$model12' // value for git editor
```


The value `7` returned for `ICodeEditor` will be consistent across all editors within a particular vscode instance, but changes depending on what editors are available.

So I'm trying to translate the magic number `7` (in this one particular case) to the EditorType

In the source code, there's an [`editorBrowser` which has the following function][1]:

```ts
export function isDiffEditor(thing: any): thing is IDiffEditor {
	if (thing && typeof (<IDiffEditor>thing).getEditorType === 'function') {
		return (<IDiffEditor>thing).getEditorType() === editorCommon.EditorType.IDiffEditor;
	} else {
		return false;
	}
}
```

And [`editorCommon` has an `EditorType`][2]:

```ts
export const EditorType = {
	ICodeEditor: 'vs.editor.ICodeEditor',
	IDiffEditor: 'vs.editor.IDiffEditor'
};
```

But I cannot figure out how to access any of that information from within the context of an extension.

Even [`window.activeTextEditor`][3] which returns type [`TextEditor`][4] doesn't explicitly offer up fields like `id` (which is why I had to cast to any above). So some of the internals here might not show up in the docs / public facing interfaces.



[1]: https://github.com/microsoft/vscode/blob/1.52.0/src/vs/editor/browser/editorBrowser.ts#L1061-L1067
[2]: https://github.com/microsoft/vscode/blob/1.52.0/src/vs/editor/common/editorCommon.ts#L683-L686
[3]: https://code.visualstudio.com/api/references/vscode-api#window
[4]: https://code.visualstudio.com/api/references/vscode-api#TextEditor

VSCode Extension - Get Editor Types

## Update Dec 16, 2020

This is now included in the default [**c# extension**][1] as of [**v1.23.8**][2]

You'll have to go to Preferences > Text Editor > Formatting and *enable* **Format on Type**

Or add the following in your `settings.json` file:
```json
{
    "editor.formatOnType": true,
}
```

Then adding three slashes `///` above a member will auto-generate the XML doc comment.


[![xml doc comment example][3]][3]


  [1]: https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp
  [2]: https://github.com/OmniSharp/omnisharp-vscode/releases/tag/v1.23.8
  [3]: https://i.stack.imgur.com/86LMi.gif

I'm on Visual Studio Code and I'm wondering what the shortcut is for creating documentation in C# for functions, variables, and classes since in VS Studio it's just pressing `/` three times.

VS Code C# XML Documentation

If you get a message like this using the [**GitHub extension by KnisterPeter**][0]:

> To enable the Visual Studio Code GitHub Support, please set a Personal Access Token
>
> [![Enable Visual Studio Code GitHub Support][1]][1]


1. Go to *Settings* &rarr; *Developer Settings* &rarr; *Personal Access Token*

 Or go directly to *https://github.com/settings/tokens*

2. Click **Generate New Token**

 [![Settings -> Generate New Token][2]][2]

3. Go back to Visual Studio Code and open the *Command Palette* (<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>)

4. Type in **GitHub: Set Personal Access Token**

 [![Set Personal Access Token][3]][3]

5. Paste in the value from your newly generated token

 [0]: https://marketplace.visualstudio.com/items?itemName=KnisterPeter.vscode-github
 [1]: https://i.stack.imgur.com/e5kof.png
 [2]: https://i.stack.imgur.com/h0SJX.png
 [3]: https://i.stack.imgur.com/pUg7f.png

I received [an email][1] saying GitHub will require token authentication after August 13 2021. I want to ensure I don't have an interruption of service (push/pull) after this date.
So I logged into GitHub and [created a token][2] for my single repository.

Now I want to use the token to push/pull my repository from GitHub, in Visual Studio Code, which uses Git and the command line, which I have installed on my Mac.

What do I do to add/replace the password from GitHub with the generated token I just created to push/pull from my repository? Can I do it from Visual Studio Code or does it get added from the terminal command line?

  [1]: https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/
  [2]: https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token




How to add a GitHub personal access token to Visual Studio Code

Looks like you're using the [**Error Lens**][1] Extension 

You can uninstall it completely, or disable messages in settings like this:

```js
"errorLens.messageEnabled": false
```

[1]: https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens

In VS Code, how can I hide the inline warning messages inside a file as highlighted below with white circles?

[![inline messages][1]][1]


  [1]: https://i.stack.imgur.com/WcLBp.png

VS Code - How to hide inline warning messages?

Here's a kinda hacky workaround. 

As far as I can tell there isn't that much magic to lambdas for a single execution (The special sauce in the runtime environment, event handling, and auto scalability). The Amplify CLI passes in the `event` object from `event.json` and calls the function defined as the handler. You can do that in vanilla node js as well.

Create a file like `debug.js` - you can put it anywhere you want, but mine is in the `.vscode` directory

```js
const { handler } = require("../amplify/backend/function/sayHello/src")
const event = require("../amplify/backend/function/sayHello/src/event.json")

(async function(){

 // invoke
 const response = await handler(event)

 console.log(response)
})()
```

Then you can use a normal node js debug launch configuration like this:

```json
{
 "name": "Debug Function",
 "program": "${workspaceFolder}/.vscode/debug.js",
 "request": "launch",
 "skipFiles": ["<node_internals>/**"],
 "type": "pwa-node"
}
```

Something a little friendlier / out-of-the-box would be nice, but this at least allows step through debugging without too much extra work.

How can I debug Amplify JavaScript functions on VS Code on Windows 10?


This issue came up on github under [How to debug amplify function using visual studio code during invocation?][1], but it's closed and quite old.  For example, `amplify invoke function` is deprecated in favor of `amplify mock function`.

I've tried this `launch.config`:

```js
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Create Reort",
      "type": "node",
      "request": "launch",
      "program": "${env:APPDATA}/npm/node_modules/@aws-amplify/cli/bin/amplify",
      "args": [
        "mock",
        "function",
        "sayhello",
        "--event",
        "src/event.json",
        "--timeout",
        "0"
      ],
      "console": "integratedTerminal"
    }
  ]
}
```

Which will log the output, but doesn't hit any breakpoints inside the function being executed:

[![Example Output][2]][2]

### Setup steps:

1. Install amplify cli

   ```bash
   npm install -g @aws-amplify/cli
   ```

2. Initialize amplify.  Choose JavaScript with any framework.

   ```bash
   amplify init
   # Choose your default editor:                   Visual Studio Code
   # Choose the type of app that you're building:  javascript  
   # What javascript framework are you using:      none
   ```

3. Add function

   ```bash
   amplify add function SayHello
   # Choose the runtime that you want to use:            NodeJS
   # Choose the function template that you want to use:  Hello World
   ```


  [1]: https://github.com/aws-amplify/amplify-cli/issues/1158
  [2]: https://i.stack.imgur.com/wbX4w.png

How to Debug Amplify JavaScript functions in VS Code

According to publishing docs section on [Visual Studio Code compatibility][1]

> When authoring an extension, you will need to describe what is the extension's compatibility to Visual Studio Code itself. This can be done via the `engines.vscode` field inside `package.json`:


```json
{
  "engines": {
    "vscode": "^1.62.0"
  }
}
```

[1]: https://code.visualstudio.com/api/working-with-extensions/publishing-extension#visual-studio-code-compatibility

When I run [`vsce`][1]

```bash
vsce publish
```

I get the following error:

```none
@types/vscode ^1.62.0 greater than engines.vscode ^1.48.0

Consider upgrade engines.vscode or use an older @types/vscode version
```

I have the following dependencies in my `package.json`:

```json
"devDependencies": {
    "@types/vscode": "^1.62.0",
    "vsce": "^2.5.0"
}
```

How do I update `engines.vscode`?

**Related**: [How do I update my vscode extension's engine requirement][2]

[1]: https://github.com/microsoft/vscode-vsce
[2]: https://stackoverflow.com/q/41913284/1366033