From e6f4810b74f835bc6438617fdc79f0eb5fa3f212 Mon Sep 17 00:00:00 2001 From: "Michael S. Hoffman" Date: Wed, 7 Sep 2022 19:58:00 -0700 Subject: [PATCH 1/6] Writer/Editor pass --- .../microsoft-edge-devtools-extension.md | 26 ++++++++++++------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md index 2f963475e0..1ddd6f9d8a 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md @@ -5,7 +5,7 @@ author: MSEdgeTeam ms.author: msedgedevrel ms.topic: conceptual ms.prod: microsoft-edge -ms.date: 07/07/2022 +ms.date: 09/07/2022 --- # Microsoft Edge DevTools extension for Visual Studio Code @@ -73,23 +73,29 @@ Issues are evaluated live while you edit your code. As you type, you get feedba ![A possible issue being explained on an output element](microsoft-edge-devtools-extension-images/live-issue-reporting.png) -#### Automated fixes and issue filtering -When you hover over the element with the issue, you get a lightbulb icon indicating that there are quick fixes available. +#### Automated Quick Fixes and issue filtering + +Using Quick Fixes, you can customize the error reporting of the extension to the needs of the current project. + +When you hover over an element that has an issue, you get a lightbulb icon indicating that there are Quick Fixes available: ![An anchor element with a protocol specific href attribute highliighted as a problem with a lightbulb icon above it](microsoft-edge-devtools-extension-images/light-bulb.png) -Activating the lightbulb icon shows a list of options. For example, if you added a link with a protocol relative URL, you get: +Clicking the lightbulb icon shows a list of options. For example, if you added a link with a protocol relative URL, you get the following list of three Quick Fixes: + +* **Fix "no-protocol-relative-urls" issue** +* **Disable "no-protocol-relative-urls" hints in this project** +* **Edit .hintrc for this project** + +![The Quick Fix panel opened next to the anchor element with the error offering the different options explained in the following text](microsoft-edge-devtools-extension-images/quick-fix-options.png) -![The quick fix panel opened next to the anchor element with the error offering the different options explained in the following text](microsoft-edge-devtools-extension-images/quick-fix-options.png) +* **Fix "no-protocol-relative-urls" issue** - Selecting this Quick Fix adds the missing URL prefix `https://` to the link and removes the underline. -* Fix "no-protocol-relative-urls" issue -* Disable "no-protocol-relative-urls" hints in this project -* Edit .hintrc for this project +* **Disable "no-protocol-relative-urls" hints in this project** - Selecting this Quick Fix creates a `.hintrc` file in the project folder, telling the extension never to report this issue again. -Chosing the first would add the missing `https://` to the link and remove the underline, the second option creates a `.hintrc` file in the project folder telling the extension never to report this issue again and the last allows you to make edits to the `.hintrc` configuration file. +* **Edit .hintrc for this project** - Selecting this Quick Fix allows you to make edits to the `.hintrc` configuration file. -Using quick fixes you can customise the error reporting of the extension to the needs of the current project. ## Modes for using Microsoft Edge DevTools in Visual Studio Code From c37ca68e64b7fd9b0c7bc1aabfffd966b372d64c Mon Sep 17 00:00:00 2001 From: "Michael S. Hoffman" Date: Wed, 7 Sep 2022 20:21:04 -0700 Subject: [PATCH 2/6] Merged lists --- .../microsoft-edge-devtools-extension.md | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md index 1ddd6f9d8a..9232a9b9df 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md @@ -80,15 +80,11 @@ Using Quick Fixes, you can customize the error reporting of the extension to the When you hover over an element that has an issue, you get a lightbulb icon indicating that there are Quick Fixes available: -![An anchor element with a protocol specific href attribute highliighted as a problem with a lightbulb icon above it](microsoft-edge-devtools-extension-images/light-bulb.png) +![An anchor element with a protocol-specific href attribute highlighted as a problem, by a wavy underline and lightbulb icon above it](microsoft-edge-devtools-extension-images/light-bulb.png) -Clicking the lightbulb icon shows a list of options. For example, if you added a link with a protocol relative URL, you get the following list of three Quick Fixes: +Clicking the lightbulb icon shows a list of options. For example, if you added a link with a protocol relative URL, you get the following list of Quick Fixes: -* **Fix "no-protocol-relative-urls" issue** -* **Disable "no-protocol-relative-urls" hints in this project** -* **Edit .hintrc for this project** - -![The Quick Fix panel opened next to the anchor element with the error offering the different options explained in the following text](microsoft-edge-devtools-extension-images/quick-fix-options.png) +![The Quick Fix panel opened next to the anchor element with the error, offering several Quick Fix options](microsoft-edge-devtools-extension-images/quick-fix-options.png) * **Fix "no-protocol-relative-urls" issue** - Selecting this Quick Fix adds the missing URL prefix `https://` to the link and removes the underline. From bc661a8cea3f90ca29cce925e30aff29851e3bea Mon Sep 17 00:00:00 2001 From: "Michael S. Hoffman" Date: Wed, 7 Sep 2022 21:06:32 -0700 Subject: [PATCH 3/6] Intro to list --- .../visual-studio-code/microsoft-edge-devtools-extension.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md index 9232a9b9df..b50ecffc8f 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md @@ -86,9 +86,11 @@ Clicking the lightbulb icon shows a list of options. For example, if you added a ![The Quick Fix panel opened next to the anchor element with the error, offering several Quick Fix options](microsoft-edge-devtools-extension-images/quick-fix-options.png) +You can select multiple Quick Fixes, one at a time. Selecting these particular Quick Fixes does the following, to address an issue: + * **Fix "no-protocol-relative-urls" issue** - Selecting this Quick Fix adds the missing URL prefix `https://` to the link and removes the underline. -* **Disable "no-protocol-relative-urls" hints in this project** - Selecting this Quick Fix creates a `.hintrc` file in the project folder, telling the extension never to report this issue again. +* **Disable "no-protocol-relative-urls" hints in this project** - Selecting this Quick Fix creates a `.hintrc` file in the project folder, and tells the extension never to report this issue again. * **Edit .hintrc for this project** - Selecting this Quick Fix allows you to make edits to the `.hintrc` configuration file. From 649d620009971bfb312fdb326b6779eb4fbcfd07 Mon Sep 17 00:00:00 2001 From: "Michael S. Hoffman" Date: Wed, 7 Sep 2022 21:15:07 -0700 Subject: [PATCH 4/6] tech corrections --- .../visual-studio-code/microsoft-edge-devtools-extension.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md index b50ecffc8f..7707c8a65d 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md @@ -82,13 +82,13 @@ When you hover over an element that has an issue, you get a lightbulb icon indic ![An anchor element with a protocol-specific href attribute highlighted as a problem, by a wavy underline and lightbulb icon above it](microsoft-edge-devtools-extension-images/light-bulb.png) -Clicking the lightbulb icon shows a list of options. For example, if you added a link with a protocol relative URL, you get the following list of Quick Fixes: +Clicking the lightbulb icon shows a list of options. For example, if you added a link with a protocol-relative URL, you get the following list of Quick Fixes to choose from: ![The Quick Fix panel opened next to the anchor element with the error, offering several Quick Fix options](microsoft-edge-devtools-extension-images/quick-fix-options.png) -You can select multiple Quick Fixes, one at a time. Selecting these particular Quick Fixes does the following, to address an issue: +You can select whichever Quick Fix you want to use to resolve the issue or stop reporting it as an issue: -* **Fix "no-protocol-relative-urls" issue** - Selecting this Quick Fix adds the missing URL prefix `https://` to the link and removes the underline. +* **Fix "no-protocol-relative-urls" issue** - Selecting this Quick Fix adds the missing URL prefix `https://` to the link. * **Disable "no-protocol-relative-urls" hints in this project** - Selecting this Quick Fix creates a `.hintrc` file in the project folder, and tells the extension never to report this issue again. From a35aeed7a6c5faf32a13ea23143f7545bbf74129 Mon Sep 17 00:00:00 2001 From: Michael Hoffman Date: Thu, 8 Sep 2022 18:02:01 -0700 Subject: [PATCH 5/6] add -light to png --- .../visual-studio-code/microsoft-edge-devtools-extension.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md index 7707c8a65d..e743d5886e 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md @@ -84,7 +84,7 @@ When you hover over an element that has an issue, you get a lightbulb icon indic Clicking the lightbulb icon shows a list of options. For example, if you added a link with a protocol-relative URL, you get the following list of Quick Fixes to choose from: -![The Quick Fix panel opened next to the anchor element with the error, offering several Quick Fix options](microsoft-edge-devtools-extension-images/quick-fix-options.png) +![The Quick Fix panel opened next to the anchor element with the error, offering several Quick Fix options](microsoft-edge-devtools-extension-images/quick-fix-options-light.png) You can select whichever Quick Fix you want to use to resolve the issue or stop reporting it as an issue: From 5d047a44dae3d157ce52bde7db783260052bb10f Mon Sep 17 00:00:00 2001 From: "Michael S. Hoffman" Date: Thu, 8 Sep 2022 18:05:23 -0700 Subject: [PATCH 6/6] Add -light to png name locally --- .../visual-studio-code/microsoft-edge-devtools-extension.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md index 7707c8a65d..e743d5886e 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md @@ -84,7 +84,7 @@ When you hover over an element that has an issue, you get a lightbulb icon indic Clicking the lightbulb icon shows a list of options. For example, if you added a link with a protocol-relative URL, you get the following list of Quick Fixes to choose from: -![The Quick Fix panel opened next to the anchor element with the error, offering several Quick Fix options](microsoft-edge-devtools-extension-images/quick-fix-options.png) +![The Quick Fix panel opened next to the anchor element with the error, offering several Quick Fix options](microsoft-edge-devtools-extension-images/quick-fix-options-light.png) You can select whichever Quick Fix you want to use to resolve the issue or stop reporting it as an issue: