From 241c878e186325a93ee1a458fa01bf261439ac7f Mon Sep 17 00:00:00 2001 From: Megatron482 <123230201+Megatron482@users.noreply.github.com> Date: Tue, 11 Apr 2023 15:08:09 +0530 Subject: [PATCH 01/25] Create Group-5 --- learning/dashboard/Group-5 | 1 + 1 file changed, 1 insertion(+) create mode 100644 learning/dashboard/Group-5 diff --git a/learning/dashboard/Group-5 b/learning/dashboard/Group-5 new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/learning/dashboard/Group-5 @@ -0,0 +1 @@ + From 502d6817ccc3635882425180b471c99cd7d119d5 Mon Sep 17 00:00:00 2001 From: Megatron482 <123230201+Megatron482@users.noreply.github.com> Date: Tue, 11 Apr 2023 15:14:31 +0530 Subject: [PATCH 02/25] Delete Group-5 --- learning/dashboard/Group-5 | 1 - 1 file changed, 1 deletion(-) delete mode 100644 learning/dashboard/Group-5 diff --git a/learning/dashboard/Group-5 b/learning/dashboard/Group-5 deleted file mode 100644 index 8b137891..00000000 --- a/learning/dashboard/Group-5 +++ /dev/null @@ -1 +0,0 @@ - From 1893b6f56da61f10fbaaaf3813e0e313d06dec01 Mon Sep 17 00:00:00 2001 From: Megatron482 <123230201+Megatron482@users.noreply.github.com> Date: Tue, 11 Apr 2023 15:14:50 +0530 Subject: [PATCH 03/25] Create Group-5.md --- learning/dashboard/Group-5.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 learning/dashboard/Group-5.md diff --git a/learning/dashboard/Group-5.md b/learning/dashboard/Group-5.md new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/learning/dashboard/Group-5.md @@ -0,0 +1 @@ + From 71533cab1701ac2166aed80c43d905878cb8e8ef Mon Sep 17 00:00:00 2001 From: Megatron482 <123230201+Megatron482@users.noreply.github.com> Date: Tue, 11 Apr 2023 15:15:44 +0530 Subject: [PATCH 04/25] Delete Group-5.md --- learning/dashboard/Group-5.md | 1 - 1 file changed, 1 deletion(-) delete mode 100644 learning/dashboard/Group-5.md diff --git a/learning/dashboard/Group-5.md b/learning/dashboard/Group-5.md deleted file mode 100644 index 8b137891..00000000 --- a/learning/dashboard/Group-5.md +++ /dev/null @@ -1 +0,0 @@ - From c7d382022a18455befbf9038f5bb5bcec6e69df8 Mon Sep 17 00:00:00 2001 From: Megatron482 <123230201+Megatron482@users.noreply.github.com> Date: Tue, 11 Apr 2023 15:17:01 +0530 Subject: [PATCH 05/25] File.txt --- learning/dashboard/Group-5 | 1 + 1 file changed, 1 insertion(+) create mode 100644 learning/dashboard/Group-5 diff --git a/learning/dashboard/Group-5 b/learning/dashboard/Group-5 new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/learning/dashboard/Group-5 @@ -0,0 +1 @@ + From aeedb33f226e02a02db27d6d192f00033fa5ca20 Mon Sep 17 00:00:00 2001 From: Megatron482 <123230201+Megatron482@users.noreply.github.com> Date: Tue, 11 Apr 2023 15:21:27 +0530 Subject: [PATCH 06/25] Delete Group-5 --- learning/dashboard/Group-5 | 1 - 1 file changed, 1 deletion(-) delete mode 100644 learning/dashboard/Group-5 diff --git a/learning/dashboard/Group-5 b/learning/dashboard/Group-5 deleted file mode 100644 index 8b137891..00000000 --- a/learning/dashboard/Group-5 +++ /dev/null @@ -1 +0,0 @@ - From f1d4c228f3fc2cb3731907ea941bbcb7ce1f1a91 Mon Sep 17 00:00:00 2001 From: Megatron482 <123230201+Megatron482@users.noreply.github.com> Date: Tue, 11 Apr 2023 15:22:44 +0530 Subject: [PATCH 07/25] Create Group-5.md --- learning/dashboard/Group-5.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 learning/dashboard/Group-5.md diff --git a/learning/dashboard/Group-5.md b/learning/dashboard/Group-5.md new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/learning/dashboard/Group-5.md @@ -0,0 +1 @@ + From fb84b053d54652ea8c3a695c71dd03ec0ab2e68b Mon Sep 17 00:00:00 2001 From: Megatron482 <123230201+Megatron482@users.noreply.github.com> Date: Tue, 11 Apr 2023 15:23:02 +0530 Subject: [PATCH 08/25] Delete Group-5.md --- learning/dashboard/Group-5.md | 1 - 1 file changed, 1 deletion(-) delete mode 100644 learning/dashboard/Group-5.md diff --git a/learning/dashboard/Group-5.md b/learning/dashboard/Group-5.md deleted file mode 100644 index 8b137891..00000000 --- a/learning/dashboard/Group-5.md +++ /dev/null @@ -1 +0,0 @@ - From edfccb61d8d906d1da7e6bc1f9faa27d980ddba9 Mon Sep 17 00:00:00 2001 From: Megatron482 <123230201+Megatron482@users.noreply.github.com> Date: Tue, 11 Apr 2023 15:23:56 +0530 Subject: [PATCH 09/25] Create OPSG5.md --- learning/dashboard/Group-5/OPSG5.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 learning/dashboard/Group-5/OPSG5.md diff --git a/learning/dashboard/Group-5/OPSG5.md b/learning/dashboard/Group-5/OPSG5.md new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/learning/dashboard/Group-5/OPSG5.md @@ -0,0 +1 @@ + From 118af3e619fd599a68baf889c55302175e353b1c Mon Sep 17 00:00:00 2001 From: Megatron482 <123230201+Megatron482@users.noreply.github.com> Date: Tue, 11 Apr 2023 15:25:44 +0530 Subject: [PATCH 10/25] Delete OPSG5.md --- learning/dashboard/Group-5/OPSG5.md | 1 - 1 file changed, 1 deletion(-) delete mode 100644 learning/dashboard/Group-5/OPSG5.md diff --git a/learning/dashboard/Group-5/OPSG5.md b/learning/dashboard/Group-5/OPSG5.md deleted file mode 100644 index 8b137891..00000000 --- a/learning/dashboard/Group-5/OPSG5.md +++ /dev/null @@ -1 +0,0 @@ - From 160726f04b5cc6d96c5507324b8aa6d25c3be6d4 Mon Sep 17 00:00:00 2001 From: Megatron482 <123230201+Megatron482@users.noreply.github.com> Date: Tue, 11 Apr 2023 15:26:42 +0530 Subject: [PATCH 11/25] Create .md --- learning/dashboard/Group-5/.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 learning/dashboard/Group-5/.md diff --git a/learning/dashboard/Group-5/.md b/learning/dashboard/Group-5/.md new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/learning/dashboard/Group-5/.md @@ -0,0 +1 @@ + From 3bdfc73e51f9a3fdf5a3f1156bbe9521062def13 Mon Sep 17 00:00:00 2001 From: Megatron482 <123230201+Megatron482@users.noreply.github.com> Date: Tue, 11 Apr 2023 15:28:19 +0530 Subject: [PATCH 12/25] Add files via upload --- learning/dashboard/Group-5/OPSG5.md | 61 +++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 learning/dashboard/Group-5/OPSG5.md diff --git a/learning/dashboard/Group-5/OPSG5.md b/learning/dashboard/Group-5/OPSG5.md new file mode 100644 index 00000000..13f9f5a1 --- /dev/null +++ b/learning/dashboard/Group-5/OPSG5.md @@ -0,0 +1,61 @@ +# How to download VS Code. + +## 1. Go to your prefered web browser and type download VS code and click on the first link. <br> +![image](https://user-images.githubusercontent.com/123230201/227720415-691dea50-8d1f-4559-8eae-97150b4c3247.png) + +## 2. After Clicking on the first link click windows to download. <br> +![image](https://user-images.githubusercontent.com/123230201/227720566-27441bf6-6575-4677-be4c-131458e23fd3.png) + +## 3. Wait for the download to start and finish. + +## 4. After the VS Code has finsihed downloading go through the setup process by clicking next and wait for it to download. + +# How to install Angular Snippets extensions in VS Code + +## After you finish downloading VS Code and setting it up, the next step is to download the extensions. In order to download the extensions in VS Code, we need to do the following steps. + +## 1. Open VS Code and click on the extension button on the left side of VS Code. +![image](https://user-images.githubusercontent.com/123230201/227721833-f5057b9e-7113-435c-add3-8ffdc125c82d.png) + +## 2. Type Angular Snippets and click on the first option and click install and wait for it to install. +![image](https://user-images.githubusercontent.com/123230201/227721915-a0e28d2c-f0ca-44a8-98cb-f3a7df7318ab.png) +# +# How to install JSLint extension in VS Code. + +## After you've finished installing the Angular Snippets extension on VS code, the next step is to install the JSLint extension. In order to download the extension VS Code, we need to do the following steps. + +## 1. Open VS Code and click on the extension button of the left side of VS Code. +![image](https://user-images.githubusercontent.com/123230201/227721833-f5057b9e-7113-435c-add3-8ffdc125c82d.png) + +## 2. Type JSLint and click on first option and click install and wait for it to install. +![image](https://user-images.githubusercontent.com/123230201/227722349-5c408e0e-188e-40fc-8cd1-08530beeac9a.png) <p> +# +# How to install JSON extension in VS Code + +## After you've finsihed installing the JSLint extension on VS Code, the next step is to install the JSON extension. In order to download the extension VS Code, we need to do the following steps. + +## 1. Open VS Code and click on the enxtension button of the left side of VS Code. +![image](https://user-images.githubusercontent.com/123230201/227721833-f5057b9e-7113-435c-add3-8ffdc125c82d.png) + +## 2. Type JSON and click on the first option and click install and wait for it to install. +![image](https://user-images.githubusercontent.com/123230201/227724297-64c61345-83e1-4e33-a7b9-0ee8a7f4a8b2.png) +# +# How to install Live Server extension in VS Code + +## After you've finished installing the JSON extension on VS Code, the next step is to install the Live Server extension. In order to download the extension VS Code, we need to do the following steps. + +## 1. Open VS Code and click on the extension button of the left side of VS Code. +![image](https://user-images.githubusercontent.com/123230201/227721833-f5057b9e-7113-435c-add3-8ffdc125c82d.png) + +## 2. Type Live Server and click on the first option and click install and wait for it to install. +![image](https://user-images.githubusercontent.com/123230201/227724718-2e98ef5c-9d77-4c27-b256-dd16b9b5c71a.png) +# +# How to install Prettifier extension in VS Code + +## After you've finsihed installing the Live Server extension on VS Code, the next step is to install the Prettifier extension. In order to download the extension VS Code, we need to do the following steps. + +## 1. Open VS Code and click on the extension button of the left side of VS Code. +![image](https://user-images.githubusercontent.com/123230201/227721833-f5057b9e-7113-435c-add3-8ffdc125c82d.png) + +## 2. Type Prettifier extension and click on the third option and click install and wait for it to install. +![image](https://user-images.githubusercontent.com/123230201/227725006-fa388185-d482-4c14-b6ea-6101ad401c54.png) \ No newline at end of file From 2f258bedc389151f873066b3dc24beeac22571c1 Mon Sep 17 00:00:00 2001 From: Megatron482 <123230201+Megatron482@users.noreply.github.com> Date: Tue, 11 Apr 2023 15:28:41 +0530 Subject: [PATCH 13/25] Delete .md --- learning/dashboard/Group-5/.md | 1 - 1 file changed, 1 deletion(-) delete mode 100644 learning/dashboard/Group-5/.md diff --git a/learning/dashboard/Group-5/.md b/learning/dashboard/Group-5/.md deleted file mode 100644 index 8b137891..00000000 --- a/learning/dashboard/Group-5/.md +++ /dev/null @@ -1 +0,0 @@ - From 1e95231eceb3494ffbe6f4e4ce20241433925d9e Mon Sep 17 00:00:00 2001 From: Megatron482 <123230201+Megatron482@users.noreply.github.com> Date: Tue, 11 Apr 2023 16:03:20 +0530 Subject: [PATCH 14/25] Update OPSG5.md --- learning/dashboard/Group-5/OPSG5.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/learning/dashboard/Group-5/OPSG5.md b/learning/dashboard/Group-5/OPSG5.md index 13f9f5a1..b8dc69d2 100644 --- a/learning/dashboard/Group-5/OPSG5.md +++ b/learning/dashboard/Group-5/OPSG5.md @@ -50,12 +50,12 @@ ## 2. Type Live Server and click on the first option and click install and wait for it to install. ![image](https://user-images.githubusercontent.com/123230201/227724718-2e98ef5c-9d77-4c27-b256-dd16b9b5c71a.png) # -# How to install Prettifier extension in VS Code +# -## After you've finsihed installing the Live Server extension on VS Code, the next step is to install the Prettifier extension. In order to download the extension VS Code, we need to do the following steps. +## -## 1. Open VS Code and click on the extension button of the left side of VS Code. +## 1. ![image](https://user-images.githubusercontent.com/123230201/227721833-f5057b9e-7113-435c-add3-8ffdc125c82d.png) -## 2. Type Prettifier extension and click on the third option and click install and wait for it to install. -![image](https://user-images.githubusercontent.com/123230201/227725006-fa388185-d482-4c14-b6ea-6101ad401c54.png) \ No newline at end of file +## 2. +![image](https://user-images.githubusercontent.com/123230201/227725006-fa388185-d482-4c14-b6ea-6101ad401c54.png) From e05a3a54cba4d5f306b3b161ca63699aca323aa8 Mon Sep 17 00:00:00 2001 From: Megatron482 <123230201+Megatron482@users.noreply.github.com> Date: Tue, 11 Apr 2023 16:04:14 +0530 Subject: [PATCH 15/25] Delete OPSG5.md --- learning/dashboard/Group-5/OPSG5.md | 61 ----------------------------- 1 file changed, 61 deletions(-) delete mode 100644 learning/dashboard/Group-5/OPSG5.md diff --git a/learning/dashboard/Group-5/OPSG5.md b/learning/dashboard/Group-5/OPSG5.md deleted file mode 100644 index b8dc69d2..00000000 --- a/learning/dashboard/Group-5/OPSG5.md +++ /dev/null @@ -1,61 +0,0 @@ -# How to download VS Code. - -## 1. Go to your prefered web browser and type download VS code and click on the first link. <br> -![image](https://user-images.githubusercontent.com/123230201/227720415-691dea50-8d1f-4559-8eae-97150b4c3247.png) - -## 2. After Clicking on the first link click windows to download. <br> -![image](https://user-images.githubusercontent.com/123230201/227720566-27441bf6-6575-4677-be4c-131458e23fd3.png) - -## 3. Wait for the download to start and finish. - -## 4. After the VS Code has finsihed downloading go through the setup process by clicking next and wait for it to download. - -# How to install Angular Snippets extensions in VS Code - -## After you finish downloading VS Code and setting it up, the next step is to download the extensions. In order to download the extensions in VS Code, we need to do the following steps. - -## 1. Open VS Code and click on the extension button on the left side of VS Code. -![image](https://user-images.githubusercontent.com/123230201/227721833-f5057b9e-7113-435c-add3-8ffdc125c82d.png) - -## 2. Type Angular Snippets and click on the first option and click install and wait for it to install. -![image](https://user-images.githubusercontent.com/123230201/227721915-a0e28d2c-f0ca-44a8-98cb-f3a7df7318ab.png) -# -# How to install JSLint extension in VS Code. - -## After you've finished installing the Angular Snippets extension on VS code, the next step is to install the JSLint extension. In order to download the extension VS Code, we need to do the following steps. - -## 1. Open VS Code and click on the extension button of the left side of VS Code. -![image](https://user-images.githubusercontent.com/123230201/227721833-f5057b9e-7113-435c-add3-8ffdc125c82d.png) - -## 2. Type JSLint and click on first option and click install and wait for it to install. -![image](https://user-images.githubusercontent.com/123230201/227722349-5c408e0e-188e-40fc-8cd1-08530beeac9a.png) <p> -# -# How to install JSON extension in VS Code - -## After you've finsihed installing the JSLint extension on VS Code, the next step is to install the JSON extension. In order to download the extension VS Code, we need to do the following steps. - -## 1. Open VS Code and click on the enxtension button of the left side of VS Code. -![image](https://user-images.githubusercontent.com/123230201/227721833-f5057b9e-7113-435c-add3-8ffdc125c82d.png) - -## 2. Type JSON and click on the first option and click install and wait for it to install. -![image](https://user-images.githubusercontent.com/123230201/227724297-64c61345-83e1-4e33-a7b9-0ee8a7f4a8b2.png) -# -# How to install Live Server extension in VS Code - -## After you've finished installing the JSON extension on VS Code, the next step is to install the Live Server extension. In order to download the extension VS Code, we need to do the following steps. - -## 1. Open VS Code and click on the extension button of the left side of VS Code. -![image](https://user-images.githubusercontent.com/123230201/227721833-f5057b9e-7113-435c-add3-8ffdc125c82d.png) - -## 2. Type Live Server and click on the first option and click install and wait for it to install. -![image](https://user-images.githubusercontent.com/123230201/227724718-2e98ef5c-9d77-4c27-b256-dd16b9b5c71a.png) -# -# - -## - -## 1. -![image](https://user-images.githubusercontent.com/123230201/227721833-f5057b9e-7113-435c-add3-8ffdc125c82d.png) - -## 2. -![image](https://user-images.githubusercontent.com/123230201/227725006-fa388185-d482-4c14-b6ea-6101ad401c54.png) From 408a79a613c92f8d4161afbab95908e61a9d1430 Mon Sep 17 00:00:00 2001 From: Megatron482 <123230201+Megatron482@users.noreply.github.com> Date: Tue, 11 Apr 2023 16:04:49 +0530 Subject: [PATCH 16/25] Create .md --- learning/dashboard/Group-5/.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 learning/dashboard/Group-5/.md diff --git a/learning/dashboard/Group-5/.md b/learning/dashboard/Group-5/.md new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/learning/dashboard/Group-5/.md @@ -0,0 +1 @@ + From 806570703235978841afd9ba9d979b280e767f61 Mon Sep 17 00:00:00 2001 From: Megatron482 <123230201+Megatron482@users.noreply.github.com> Date: Tue, 11 Apr 2023 16:05:08 +0530 Subject: [PATCH 17/25] Add files via upload --- learning/dashboard/Group-5/OPSG5.md | 61 +++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 learning/dashboard/Group-5/OPSG5.md diff --git a/learning/dashboard/Group-5/OPSG5.md b/learning/dashboard/Group-5/OPSG5.md new file mode 100644 index 00000000..13f9f5a1 --- /dev/null +++ b/learning/dashboard/Group-5/OPSG5.md @@ -0,0 +1,61 @@ +# How to download VS Code. + +## 1. Go to your prefered web browser and type download VS code and click on the first link. <br> +![image](https://user-images.githubusercontent.com/123230201/227720415-691dea50-8d1f-4559-8eae-97150b4c3247.png) + +## 2. After Clicking on the first link click windows to download. <br> +![image](https://user-images.githubusercontent.com/123230201/227720566-27441bf6-6575-4677-be4c-131458e23fd3.png) + +## 3. Wait for the download to start and finish. + +## 4. After the VS Code has finsihed downloading go through the setup process by clicking next and wait for it to download. + +# How to install Angular Snippets extensions in VS Code + +## After you finish downloading VS Code and setting it up, the next step is to download the extensions. In order to download the extensions in VS Code, we need to do the following steps. + +## 1. Open VS Code and click on the extension button on the left side of VS Code. +![image](https://user-images.githubusercontent.com/123230201/227721833-f5057b9e-7113-435c-add3-8ffdc125c82d.png) + +## 2. Type Angular Snippets and click on the first option and click install and wait for it to install. +![image](https://user-images.githubusercontent.com/123230201/227721915-a0e28d2c-f0ca-44a8-98cb-f3a7df7318ab.png) +# +# How to install JSLint extension in VS Code. + +## After you've finished installing the Angular Snippets extension on VS code, the next step is to install the JSLint extension. In order to download the extension VS Code, we need to do the following steps. + +## 1. Open VS Code and click on the extension button of the left side of VS Code. +![image](https://user-images.githubusercontent.com/123230201/227721833-f5057b9e-7113-435c-add3-8ffdc125c82d.png) + +## 2. Type JSLint and click on first option and click install and wait for it to install. +![image](https://user-images.githubusercontent.com/123230201/227722349-5c408e0e-188e-40fc-8cd1-08530beeac9a.png) <p> +# +# How to install JSON extension in VS Code + +## After you've finsihed installing the JSLint extension on VS Code, the next step is to install the JSON extension. In order to download the extension VS Code, we need to do the following steps. + +## 1. Open VS Code and click on the enxtension button of the left side of VS Code. +![image](https://user-images.githubusercontent.com/123230201/227721833-f5057b9e-7113-435c-add3-8ffdc125c82d.png) + +## 2. Type JSON and click on the first option and click install and wait for it to install. +![image](https://user-images.githubusercontent.com/123230201/227724297-64c61345-83e1-4e33-a7b9-0ee8a7f4a8b2.png) +# +# How to install Live Server extension in VS Code + +## After you've finished installing the JSON extension on VS Code, the next step is to install the Live Server extension. In order to download the extension VS Code, we need to do the following steps. + +## 1. Open VS Code and click on the extension button of the left side of VS Code. +![image](https://user-images.githubusercontent.com/123230201/227721833-f5057b9e-7113-435c-add3-8ffdc125c82d.png) + +## 2. Type Live Server and click on the first option and click install and wait for it to install. +![image](https://user-images.githubusercontent.com/123230201/227724718-2e98ef5c-9d77-4c27-b256-dd16b9b5c71a.png) +# +# How to install Prettifier extension in VS Code + +## After you've finsihed installing the Live Server extension on VS Code, the next step is to install the Prettifier extension. In order to download the extension VS Code, we need to do the following steps. + +## 1. Open VS Code and click on the extension button of the left side of VS Code. +![image](https://user-images.githubusercontent.com/123230201/227721833-f5057b9e-7113-435c-add3-8ffdc125c82d.png) + +## 2. Type Prettifier extension and click on the third option and click install and wait for it to install. +![image](https://user-images.githubusercontent.com/123230201/227725006-fa388185-d482-4c14-b6ea-6101ad401c54.png) \ No newline at end of file From ab8583008a7b6bfe66d4f01da60a9f51ced39eb8 Mon Sep 17 00:00:00 2001 From: Megatron482 <123230201+Megatron482@users.noreply.github.com> Date: Tue, 11 Apr 2023 16:05:34 +0530 Subject: [PATCH 18/25] Delete .md --- learning/dashboard/Group-5/.md | 1 - 1 file changed, 1 deletion(-) delete mode 100644 learning/dashboard/Group-5/.md diff --git a/learning/dashboard/Group-5/.md b/learning/dashboard/Group-5/.md deleted file mode 100644 index 8b137891..00000000 --- a/learning/dashboard/Group-5/.md +++ /dev/null @@ -1 +0,0 @@ - From 639f57b2c27204f6a73e08d2ff1d724605445ce4 Mon Sep 17 00:00:00 2001 From: Megatron482 <123230201+Megatron482@users.noreply.github.com> Date: Tue, 11 Apr 2023 16:08:20 +0530 Subject: [PATCH 19/25] Update OPSG5.md --- learning/dashboard/Group-5/OPSG5.md | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/learning/dashboard/Group-5/OPSG5.md b/learning/dashboard/Group-5/OPSG5.md index 13f9f5a1..f3900732 100644 --- a/learning/dashboard/Group-5/OPSG5.md +++ b/learning/dashboard/Group-5/OPSG5.md @@ -40,22 +40,3 @@ ## 2. Type JSON and click on the first option and click install and wait for it to install. ![image](https://user-images.githubusercontent.com/123230201/227724297-64c61345-83e1-4e33-a7b9-0ee8a7f4a8b2.png) # -# How to install Live Server extension in VS Code - -## After you've finished installing the JSON extension on VS Code, the next step is to install the Live Server extension. In order to download the extension VS Code, we need to do the following steps. - -## 1. Open VS Code and click on the extension button of the left side of VS Code. -![image](https://user-images.githubusercontent.com/123230201/227721833-f5057b9e-7113-435c-add3-8ffdc125c82d.png) - -## 2. Type Live Server and click on the first option and click install and wait for it to install. -![image](https://user-images.githubusercontent.com/123230201/227724718-2e98ef5c-9d77-4c27-b256-dd16b9b5c71a.png) -# -# How to install Prettifier extension in VS Code - -## After you've finsihed installing the Live Server extension on VS Code, the next step is to install the Prettifier extension. In order to download the extension VS Code, we need to do the following steps. - -## 1. Open VS Code and click on the extension button of the left side of VS Code. -![image](https://user-images.githubusercontent.com/123230201/227721833-f5057b9e-7113-435c-add3-8ffdc125c82d.png) - -## 2. Type Prettifier extension and click on the third option and click install and wait for it to install. -![image](https://user-images.githubusercontent.com/123230201/227725006-fa388185-d482-4c14-b6ea-6101ad401c54.png) \ No newline at end of file From f74f08cdfdae854465ecc3a1895ea22695093007 Mon Sep 17 00:00:00 2001 From: Deepikavk00 <123549856+Deepikavk00@users.noreply.github.com> Date: Thu, 13 Apr 2023 11:02:15 +0530 Subject: [PATCH 20/25] Update OPSG5.md --- learning/dashboard/Group-5/OPSG5.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/learning/dashboard/Group-5/OPSG5.md b/learning/dashboard/Group-5/OPSG5.md index f3900732..1f14396b 100644 --- a/learning/dashboard/Group-5/OPSG5.md +++ b/learning/dashboard/Group-5/OPSG5.md @@ -40,3 +40,22 @@ ## 2. Type JSON and click on the first option and click install and wait for it to install. ![image](https://user-images.githubusercontent.com/123230201/227724297-64c61345-83e1-4e33-a7b9-0ee8a7f4a8b2.png) # +# How to install Live Server extension in VS Code + +## After you've finished installing the JSON extension on VS Code, the next step is to install the Live Server extension. In order to download the extension VS Code, we need to do the following steps. + +## 1. Open VS Code and click on the extension button of the left side of VS Code. +![image](https://user-images.githubusercontent.com/123230201/227721833-f5057b9e-7113-435c-add3-8ffdc125c82d.png) + +## 2. Type Live Server and click on the first option and click install and wait for it to install. +![image](https://user-images.githubusercontent.com/123230201/227724718-2e98ef5c-9d77-4c27-b256-dd16b9b5c71a.png) +# +# How to install Prettifier extension in VS Code + +## After you've finsihed installing the Live Server extension on VS Code, the next step is to install the Prettifier extension. In order to download the extension VS Code, we need to do the following steps. + +## 1. Open VS Code and click on the extension button of the left side of VS Code. +![image](https://user-images.githubusercontent.com/123230201/227721833-f5057b9e-7113-435c-add3-8ffdc125c82d.png) + +## 2. Type Prettifier extension and click on the third option and click install and wait for it to install. +![image](https://user-images.githubusercontent.com/123230201/227725006-fa388185-d482-4c14-b6ea-6101ad401c54.png) From bc9eea3bbb13ef6d9a644a77a5f0624914ff3404 Mon Sep 17 00:00:00 2001 From: Megatron482 <123230201+Megatron482@users.noreply.github.com> Date: Fri, 14 Apr 2023 09:57:49 +0530 Subject: [PATCH 21/25] Update OPSG5.md --- learning/dashboard/Group-5/OPSG5.md | 38 ++++++++++++++--------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/learning/dashboard/Group-5/OPSG5.md b/learning/dashboard/Group-5/OPSG5.md index 1f14396b..0ea3fee5 100644 --- a/learning/dashboard/Group-5/OPSG5.md +++ b/learning/dashboard/Group-5/OPSG5.md @@ -1,61 +1,61 @@ # How to download VS Code. -## 1. Go to your prefered web browser and type download VS code and click on the first link. <br> +1. Go to your prefered web browser and type download VS code and click on the first link. <br> ![image](https://user-images.githubusercontent.com/123230201/227720415-691dea50-8d1f-4559-8eae-97150b4c3247.png) -## 2. After Clicking on the first link click windows to download. <br> + 2. After Clicking on the first link click windows to download. <br> ![image](https://user-images.githubusercontent.com/123230201/227720566-27441bf6-6575-4677-be4c-131458e23fd3.png) -## 3. Wait for the download to start and finish. +3. Wait for the download to start and finish. -## 4. After the VS Code has finsihed downloading go through the setup process by clicking next and wait for it to download. +4. After the VS Code has finsihed downloading go through the setup process by clicking next and wait for it to download. # How to install Angular Snippets extensions in VS Code -## After you finish downloading VS Code and setting it up, the next step is to download the extensions. In order to download the extensions in VS Code, we need to do the following steps. +After you finish downloading VS Code and setting it up, the next step is to download the extensions. In order to download the extensions in VS Code, we need to do the following steps. -## 1. Open VS Code and click on the extension button on the left side of VS Code. +1. Open VS Code and click on the extension button on the left side of VS Code. ![image](https://user-images.githubusercontent.com/123230201/227721833-f5057b9e-7113-435c-add3-8ffdc125c82d.png) -## 2. Type Angular Snippets and click on the first option and click install and wait for it to install. + 2. Type Angular Snippets and click on the first option and click install and wait for it to install. ![image](https://user-images.githubusercontent.com/123230201/227721915-a0e28d2c-f0ca-44a8-98cb-f3a7df7318ab.png) # # How to install JSLint extension in VS Code. -## After you've finished installing the Angular Snippets extension on VS code, the next step is to install the JSLint extension. In order to download the extension VS Code, we need to do the following steps. +After you've finished installing the Angular Snippets extension on VS code, the next step is to install the JSLint extension. In order to download the extension VS Code, we need to do the following steps. -## 1. Open VS Code and click on the extension button of the left side of VS Code. + 1. Open VS Code and click on the extension button of the left side of VS Code. ![image](https://user-images.githubusercontent.com/123230201/227721833-f5057b9e-7113-435c-add3-8ffdc125c82d.png) -## 2. Type JSLint and click on first option and click install and wait for it to install. + 2. Type JSLint and click on first option and click install and wait for it to install. ![image](https://user-images.githubusercontent.com/123230201/227722349-5c408e0e-188e-40fc-8cd1-08530beeac9a.png) <p> # # How to install JSON extension in VS Code -## After you've finsihed installing the JSLint extension on VS Code, the next step is to install the JSON extension. In order to download the extension VS Code, we need to do the following steps. + After you've finsihed installing the JSLint extension on VS Code, the next step is to install the JSON extension. In order to download the extension VS Code, we need to do the following steps. -## 1. Open VS Code and click on the enxtension button of the left side of VS Code. +1. Open VS Code and click on the enxtension button of the left side of VS Code. ![image](https://user-images.githubusercontent.com/123230201/227721833-f5057b9e-7113-435c-add3-8ffdc125c82d.png) -## 2. Type JSON and click on the first option and click install and wait for it to install. +2. Type JSON and click on the first option and click install and wait for it to install. ![image](https://user-images.githubusercontent.com/123230201/227724297-64c61345-83e1-4e33-a7b9-0ee8a7f4a8b2.png) # # How to install Live Server extension in VS Code -## After you've finished installing the JSON extension on VS Code, the next step is to install the Live Server extension. In order to download the extension VS Code, we need to do the following steps. +After you've finished installing the JSON extension on VS Code, the next step is to install the Live Server extension. In order to download the extension VS Code, we need to do the following steps. -## 1. Open VS Code and click on the extension button of the left side of VS Code. +1. Open VS Code and click on the extension button of the left side of VS Code. ![image](https://user-images.githubusercontent.com/123230201/227721833-f5057b9e-7113-435c-add3-8ffdc125c82d.png) -## 2. Type Live Server and click on the first option and click install and wait for it to install. + 2. Type Live Server and click on the first option and click install and wait for it to install. ![image](https://user-images.githubusercontent.com/123230201/227724718-2e98ef5c-9d77-4c27-b256-dd16b9b5c71a.png) # # How to install Prettifier extension in VS Code -## After you've finsihed installing the Live Server extension on VS Code, the next step is to install the Prettifier extension. In order to download the extension VS Code, we need to do the following steps. + After you've finsihed installing the Live Server extension on VS Code, the next step is to install the Prettifier extension. In order to download the extension VS Code, we need to do the following steps. -## 1. Open VS Code and click on the extension button of the left side of VS Code. +1. Open VS Code and click on the extension button of the left side of VS Code. ![image](https://user-images.githubusercontent.com/123230201/227721833-f5057b9e-7113-435c-add3-8ffdc125c82d.png) -## 2. Type Prettifier extension and click on the third option and click install and wait for it to install. +2. Type Prettifier extension and click on the third option and click install and wait for it to install. ![image](https://user-images.githubusercontent.com/123230201/227725006-fa388185-d482-4c14-b6ea-6101ad401c54.png) From 4c977f200904174265a15ae831c87fb7eec9b5c7 Mon Sep 17 00:00:00 2001 From: Megatron482 <123230201+Megatron482@users.noreply.github.com> Date: Fri, 14 Apr 2023 10:02:23 +0530 Subject: [PATCH 22/25] Update OPSG5.md --- learning/dashboard/Group-5/OPSG5.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/learning/dashboard/Group-5/OPSG5.md b/learning/dashboard/Group-5/OPSG5.md index 0ea3fee5..656d8308 100644 --- a/learning/dashboard/Group-5/OPSG5.md +++ b/learning/dashboard/Group-5/OPSG5.md @@ -8,7 +8,7 @@ 3. Wait for the download to start and finish. -4. After the VS Code has finsihed downloading go through the setup process by clicking next and wait for it to download. +4. After the VS Code has finisihed downloading go through the setup process by clicking next and wait for it to download. # How to install Angular Snippets extensions in VS Code From 34290c40baaf1e8a68c837558e44454a9d68eb14 Mon Sep 17 00:00:00 2001 From: Megatron482 <123230201+Megatron482@users.noreply.github.com> Date: Fri, 14 Apr 2023 10:22:10 +0530 Subject: [PATCH 23/25] Update OPSG5.md --- learning/dashboard/Group-5/OPSG5.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/learning/dashboard/Group-5/OPSG5.md b/learning/dashboard/Group-5/OPSG5.md index 656d8308..eea14bf6 100644 --- a/learning/dashboard/Group-5/OPSG5.md +++ b/learning/dashboard/Group-5/OPSG5.md @@ -57,5 +57,5 @@ After you've finished installing the JSON extension on VS Code, the next step is 1. Open VS Code and click on the extension button of the left side of VS Code. ![image](https://user-images.githubusercontent.com/123230201/227721833-f5057b9e-7113-435c-add3-8ffdc125c82d.png) -2. Type Prettifier extension and click on the third option and click install and wait for it to install. -![image](https://user-images.githubusercontent.com/123230201/227725006-fa388185-d482-4c14-b6ea-6101ad401c54.png) +2. Type Prettifier extension and click on the first option and click install and wait for it to install. +![image](https://user-images.githubusercontent.com/123230201/231944685-85936ec5-4187-48db-9c22-b93fa28bf462.png) From 7c09979f84a803dde9fca793f35f25f127e76e81 Mon Sep 17 00:00:00 2001 From: Deepikavk00 <123549856+Deepikavk00@users.noreply.github.com> Date: Sat, 15 Apr 2023 12:42:31 +0530 Subject: [PATCH 24/25] Update OPSG5.md --- learning/dashboard/Group-5/OPSG5.md | 53 +++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) diff --git a/learning/dashboard/Group-5/OPSG5.md b/learning/dashboard/Group-5/OPSG5.md index eea14bf6..e23db45a 100644 --- a/learning/dashboard/Group-5/OPSG5.md +++ b/learning/dashboard/Group-5/OPSG5.md @@ -1,3 +1,14 @@ +# About VS Code +![image](https://user-images.githubusercontent.com/123549856/232193642-91ec21bb-49f9-4354-bfbf-811f9afd92dc.png) +VS Code is a **source-code editor** made by Microsoft for Windows, Linux and macOS³. It is **free** and **built on open source**¹. It has many features that make it suitable for building and debugging modern web and cloud applications, such as: +- Integrated Git, which allows you to work with version control and collaborate with other developers¹. +- Debugging tools, which let you set breakpoints, inspect variables, and step through your code¹. +- Syntax highlighting, which colors different parts of your code to help you read and understand it better⁵. +- Intelligent code completion, which suggests possible completions based on your code context and definitions⁵. +- Snippets, which are templates of code that you can insert quickly and customize¹. +- Code refactoring, which helps you improve the quality and structure of your code by applying various transformations¹. +- Extensions, which are add-ons that enhance the functionality of VS Code by adding new languages, themes, debuggers, and more¹. + # How to download VS Code. 1. Go to your prefered web browser and type download VS code and click on the first link. <br> @@ -10,6 +21,12 @@ 4. After the VS Code has finisihed downloading go through the setup process by clicking next and wait for it to download. +# Angular Snippets + +![image](https://user-images.githubusercontent.com/123549856/232193680-8e17f22d-405d-4099-834d-4af51eacfb2d.png) + +Angular Snippets are code snippets that help you write Angular code faster and easier. They are short pieces of code that you can insert into your files by typing a keyword and pressing enter or activating them from within the editor. They are designed to follow the best practices and conventions of Angular and to reduce the amount of boilerplate code you have to write. For example, you can use a snippet to create a component with a selector, a template, and a class definition in TypeScript. You can also use snippets to create directives, services, pipes, modules, routes, actions, reducers, effects, selectors and more. Snippets can also help you with common tasks such as importing modules, creating forms, subscribing to observables, using material components, etc. Snippets are available for various editors and platforms, such as Visual Studio Code, Angular Snippets website, and Angular Snippets library. You can also create your own snippets or customize the existing ones to suit your needs and preferences. Snippets are a great way to speed up your development process and to learn from the best practices of Angular. + # How to install Angular Snippets extensions in VS Code After you finish downloading VS Code and setting it up, the next step is to download the extensions. In order to download the extensions in VS Code, we need to do the following steps. @@ -19,6 +36,26 @@ After you finish downloading VS Code and setting it up, the next step is to down 2. Type Angular Snippets and click on the first option and click install and wait for it to install. ![image](https://user-images.githubusercontent.com/123230201/227721915-a0e28d2c-f0ca-44a8-98cb-f3a7df7318ab.png) + +# Usage Instructions +Angular Snippets is a popular extension for VS Code that adds snippets for Angular for TypeScript and HTML¹. Here are the steps to use it in VS Code: +1. Install Angular Snippets extension in VS Code: From the VS Code ‘Extensions’, search for ‘Angular Snippets’ and Install¹. +2. Open an Angular project folder in VS Code. You can also create a new Angular project using the Angular CLI². +3. In a TypeScript or HTML file, type part of a snippet and press enter to insert it. Alternatively, press Ctrl+Space to see the suggestions and select one¹. +4. Some snippets have placeholders that you can fill with your own values. Use Tab and Shift+Tab to navigate between the placeholders¹. +5. You can also use the command palette (Ctrl+Shift+P) and type Angular: Show Snippets to see a list of all available snippets¹. + +# How does it help users +Angular Snippets are tools that help users write Angular code faster and easier. Here are some details on how they help users: + +- Angular Snippets are short pieces of code that can be inserted into an HTML file of an Angular application. They can include Angular components, services, directives, pipes, and other features¹². +- Angular Snippets can be accessed from various sources, such as websites, libraries, or extensions. For example, Angular Snippets.dev is a website that allows users to add and share their own snippets with the community¹. Ng-snippets.com is a library that provides a collection of essential Angular snippets that can be installed into a project². Syncfusion Angular Code Snippets is an extension for Visual Studio Code that offers snippets for Syncfusion Angular components³. +- Angular Snippets can save users time and hassle by reducing the amount of code they have to write and remember. They can also help users learn new features and best practices of Angular by providing examples and documentation¹²³. +- Angular Snippets can be structured to allow tree-shaking, which means only the snippets that are used will be included in the final bundle. This can improve the performance and efficiency of the application². + +# JSLint +![image](https://user-images.githubusercontent.com/123549856/232193799-993db30d-aefc-4d5b-878b-a3225b26a20c.png) +JSLint is a tool that checks the quality and coverage of JavaScript code. It was created by Douglas Crockford, a prominent figure in the development of JavaScript and JSON. JSLint helps JavaScript programmers by making sure certain coding conventions are followed, such as indentation, spacing, naming, syntax, and more. JSLint can also detect potential errors and bugs in the code. JSLint can be used online at https://www.jslint.com/ or installed locally as a Node.js module. JSLint can also be integrated with various editors and environments, such as Code Mirror, Vim, and VS Code. JSLint has many options and directives that can be configured to customize the linting process. JSLint is a useful tool for improving the quality and coverage of JavaScript code. It can help programmers write more consistent, readable, and error-free code. # # How to install JSLint extension in VS Code. @@ -29,6 +66,22 @@ After you've finished installing the Angular Snippets extension on VS code, the 2. Type JSLint and click on first option and click install and wait for it to install. ![image](https://user-images.githubusercontent.com/123230201/227722349-5c408e0e-188e-40fc-8cd1-08530beeac9a.png) <p> + + # Usuage Instructions + JSLint is a JavaScript program that looks for problems in JavaScript programs. It is a code quality tool12. Here are the steps to use it in VS Code: +1. Install JSLint extension in VS Code: From the VS Code ‘Extensions’, search for ‘JSLint’ and Install12. +2. Next, we need to install ‘jslint’ Globally by running ‘npm install -g jslint’ command from Terminal. All the required files gets installed and Terminal looks as below1. +3. Open the JavaScript file, which you want to validate in VS Code. You can run JSLint on a JavaScript file by using the command palette (Ctrl+Shift+P) and typing 'JSLint: Lint this file’12. +4. You will see the problems reported by JSLint in the Problems panel at the bottom of VS Code. You can also see them as squiggly lines and hover messages in the editor2. +5. You can fix the problems manually or use the quick fix feature by clicking on the light bulb icon next to the problem or pressing Ctrl+. on your keyboard2. +6. You can also configure JSLint to use different versions, options, and globals by creating a .jslintrc file in your project folder or using the “jslint.options” and “jslint.globals” settings in VS Code2. + + # How does it help users + JSLint is a tool that helps users write better JavaScript code by finding and reporting problems in their code. Here are some details on how it helps users: +- JSLint is a static code analysis tool, which means it analyzes the code without executing it. It checks the code for syntax errors, potential bugs, bad practices, and style issues¹³. +- JSLint reports the problems it finds as warnings, along with the location and description of the problem. It also provides suggestions on how to fix them or avoid them in the future¹². +- JSLint enforces a professional subset of JavaScript, a stricter language than the standard one. It follows good coding conventions and best practices that make the code more readable, maintainable, and secure¹³. +- JSLint can be used as a standalone program in the web browser, or as a file that can be imported or run in various environments, such as shell, ES Module, CommonJS, CodeMirror, Vim, or VSCode. This makes it easy to integrate JSLint into the development workflow and get instant feedback on the code quality²⁴. # # How to install JSON extension in VS Code From dc68795709d7a54338eb68f0b5a9bbaed2e03804 Mon Sep 17 00:00:00 2001 From: Megatron482 <123230201+Megatron482@users.noreply.github.com> Date: Sat, 15 Apr 2023 16:12:27 +0530 Subject: [PATCH 25/25] Update OPSG5.md --- learning/dashboard/Group-5/OPSG5.md | 144 +++++++++++++++++++++------- 1 file changed, 109 insertions(+), 35 deletions(-) diff --git a/learning/dashboard/Group-5/OPSG5.md b/learning/dashboard/Group-5/OPSG5.md index e23db45a..9d8a6171 100644 --- a/learning/dashboard/Group-5/OPSG5.md +++ b/learning/dashboard/Group-5/OPSG5.md @@ -1,13 +1,14 @@ # About VS Code ![image](https://user-images.githubusercontent.com/123549856/232193642-91ec21bb-49f9-4354-bfbf-811f9afd92dc.png) -VS Code is a **source-code editor** made by Microsoft for Windows, Linux and macOS³. It is **free** and **built on open source**¹. It has many features that make it suitable for building and debugging modern web and cloud applications, such as: -- Integrated Git, which allows you to work with version control and collaborate with other developers¹. -- Debugging tools, which let you set breakpoints, inspect variables, and step through your code¹. -- Syntax highlighting, which colors different parts of your code to help you read and understand it better⁵. -- Intelligent code completion, which suggests possible completions based on your code context and definitions⁵. -- Snippets, which are templates of code that you can insert quickly and customize¹. -- Code refactoring, which helps you improve the quality and structure of your code by applying various transformations¹. -- Extensions, which are add-ons that enhance the functionality of VS Code by adding new languages, themes, debuggers, and more¹. + +VS Code is a source-code editor made by Microsoft for Windows, Linux and MacOS. It is free and built on open source. It has many features that make it suitable for building and debugging modern web and cloud applications, such as: +- Integrated Git, which allows you to work with version control and collaborate with other developers. +- Debugging tools, which let you set breakpoints, inspect variables, and step through your code. +- Syntax highlighting, which colors different parts of your code to help you read and understand it better. +- Intelligent code completion, which suggests possible completions based on your code context and definitions. +- Snippets, which are templates of code that you can insert quickly and customize. +- Code refactoring, which helps you improve the quality and structure of your code by applying various transformations. +- Extensions, which are add-ons that enhance the functionality of VS Code by adding new languages, themes, debuggers, and more. # How to download VS Code. @@ -20,9 +21,10 @@ VS Code is a **source-code editor** made by Microsoft for Windows, Linux and mac 3. Wait for the download to start and finish. 4. After the VS Code has finisihed downloading go through the setup process by clicking next and wait for it to download. +# +# Extensions # Angular Snippets - ![image](https://user-images.githubusercontent.com/123549856/232193680-8e17f22d-405d-4099-834d-4af51eacfb2d.png) Angular Snippets are code snippets that help you write Angular code faster and easier. They are short pieces of code that you can insert into your files by typing a keyword and pressing enter or activating them from within the editor. They are designed to follow the best practices and conventions of Angular and to reduce the amount of boilerplate code you have to write. For example, you can use a snippet to create a component with a selector, a template, and a class definition in TypeScript. You can also use snippets to create directives, services, pipes, modules, routes, actions, reducers, effects, selectors and more. Snippets can also help you with common tasks such as importing modules, creating forms, subscribing to observables, using material components, etc. Snippets are available for various editors and platforms, such as Visual Studio Code, Angular Snippets website, and Angular Snippets library. You can also create your own snippets or customize the existing ones to suit your needs and preferences. Snippets are a great way to speed up your development process and to learn from the best practices of Angular. @@ -38,25 +40,26 @@ After you finish downloading VS Code and setting it up, the next step is to down ![image](https://user-images.githubusercontent.com/123230201/227721915-a0e28d2c-f0ca-44a8-98cb-f3a7df7318ab.png) # Usage Instructions -Angular Snippets is a popular extension for VS Code that adds snippets for Angular for TypeScript and HTML¹. Here are the steps to use it in VS Code: -1. Install Angular Snippets extension in VS Code: From the VS Code ‘Extensions’, search for ‘Angular Snippets’ and Install¹. -2. Open an Angular project folder in VS Code. You can also create a new Angular project using the Angular CLI². -3. In a TypeScript or HTML file, type part of a snippet and press enter to insert it. Alternatively, press Ctrl+Space to see the suggestions and select one¹. -4. Some snippets have placeholders that you can fill with your own values. Use Tab and Shift+Tab to navigate between the placeholders¹. -5. You can also use the command palette (Ctrl+Shift+P) and type Angular: Show Snippets to see a list of all available snippets¹. +Angular Snippets is a popular extension for VS Code that adds snippets for Angular for TypeScript and HTML. Here are the steps to use it in VS Code: +1. Install Angular Snippets extension in VS Code: From the VS Code ‘Extensions’, search for ‘Angular Snippets’ and Install. +2. Open an Angular project folder in VS Code. You can also create a new Angular project using the Angular CLI. +3. In a TypeScript or HTML file, type part of a snippet and press enter to insert it. Alternatively, press Ctrl+Space to see the suggestions and select one. +4. Some snippets have placeholders that you can fill with your own values. Use Tab and Shift+Tab to navigate between the placeholders. +5. You can also use the command palette (Ctrl+Shift+P) and type Angular: Show Snippets to see a list of all available snippets. # How does it help users Angular Snippets are tools that help users write Angular code faster and easier. Here are some details on how they help users: -- Angular Snippets are short pieces of code that can be inserted into an HTML file of an Angular application. They can include Angular components, services, directives, pipes, and other features¹². -- Angular Snippets can be accessed from various sources, such as websites, libraries, or extensions. For example, Angular Snippets.dev is a website that allows users to add and share their own snippets with the community¹. Ng-snippets.com is a library that provides a collection of essential Angular snippets that can be installed into a project². Syncfusion Angular Code Snippets is an extension for Visual Studio Code that offers snippets for Syncfusion Angular components³. -- Angular Snippets can save users time and hassle by reducing the amount of code they have to write and remember. They can also help users learn new features and best practices of Angular by providing examples and documentation¹²³. -- Angular Snippets can be structured to allow tree-shaking, which means only the snippets that are used will be included in the final bundle. This can improve the performance and efficiency of the application². - +- Angular Snippets are short pieces of code that can be inserted into an HTML file of an Angular application. They can include Angular components, services, directives, pipes, and other features. +- Angular Snippets can be accessed from various sources, such as websites, libraries, or extensions. For example, Angular Snippets.dev is a website that allows users to add and share their own snippets with the community. Ng-snippets.com is a library that provides a collection of essential Angular snippets that can be installed into a project. Syncfusion Angular Code Snippets is an extension for Visual Studio Code that offers snippets for Syncfusion Angular components. +- Angular Snippets can save users time and hassle by reducing the amount of code they have to write and remember. They can also help users learn new features and best practices of Angular by providing examples and documentation. +- Angular Snippets can be structured to allow tree-shaking, which means only the snippets that are used will be included in the final bundle. This can improve the performance and efficiency of the application. +# # JSLint ![image](https://user-images.githubusercontent.com/123549856/232193799-993db30d-aefc-4d5b-878b-a3225b26a20c.png) + JSLint is a tool that checks the quality and coverage of JavaScript code. It was created by Douglas Crockford, a prominent figure in the development of JavaScript and JSON. JSLint helps JavaScript programmers by making sure certain coding conventions are followed, such as indentation, spacing, naming, syntax, and more. JSLint can also detect potential errors and bugs in the code. JSLint can be used online at https://www.jslint.com/ or installed locally as a Node.js module. JSLint can also be integrated with various editors and environments, such as Code Mirror, Vim, and VS Code. JSLint has many options and directives that can be configured to customize the linting process. JSLint is a useful tool for improving the quality and coverage of JavaScript code. It can help programmers write more consistent, readable, and error-free code. -# + # How to install JSLint extension in VS Code. After you've finished installing the Angular Snippets extension on VS code, the next step is to install the JSLint extension. In order to download the extension VS Code, we need to do the following steps. @@ -68,21 +71,35 @@ After you've finished installing the Angular Snippets extension on VS code, the ![image](https://user-images.githubusercontent.com/123230201/227722349-5c408e0e-188e-40fc-8cd1-08530beeac9a.png) <p> # Usuage Instructions - JSLint is a JavaScript program that looks for problems in JavaScript programs. It is a code quality tool12. Here are the steps to use it in VS Code: -1. Install JSLint extension in VS Code: From the VS Code ‘Extensions’, search for ‘JSLint’ and Install12. -2. Next, we need to install ‘jslint’ Globally by running ‘npm install -g jslint’ command from Terminal. All the required files gets installed and Terminal looks as below1. -3. Open the JavaScript file, which you want to validate in VS Code. You can run JSLint on a JavaScript file by using the command palette (Ctrl+Shift+P) and typing 'JSLint: Lint this file’12. -4. You will see the problems reported by JSLint in the Problems panel at the bottom of VS Code. You can also see them as squiggly lines and hover messages in the editor2. -5. You can fix the problems manually or use the quick fix feature by clicking on the light bulb icon next to the problem or pressing Ctrl+. on your keyboard2. -6. You can also configure JSLint to use different versions, options, and globals by creating a .jslintrc file in your project folder or using the “jslint.options” and “jslint.globals” settings in VS Code2. + JSLint is a JavaScript program that looks for problems in JavaScript programs. It is a code quality tool. Here are the steps to use it in VS Code: +1. Install JSLint extension in VS Code: From the VS Code ‘Extensions’, search for ‘JSLint’ and Install. +2. Next, we need to install ‘jslint’ Globally by running ‘npm install -g jslint’ command from Terminal. All the required files gets installed and Terminal looks as below. +3. Open the JavaScript file, which you want to validate in VS Code. You can run JSLint on a JavaScript file by using the command palette (Ctrl+Shift+P) and typing 'JSLint: Lint this file’. +4. You will see the problems reported by JSLint in the Problems panel at the bottom of VS Code. You can also see them as squiggly lines and hover messages in the editor. +5. You can fix the problems manually or use the quick fix feature by clicking on the light bulb icon next to the problem or pressing Ctrl+. on your keyboard. +6. You can also configure JSLint to use different versions, options, and globals by creating a .jslintrc file in your project folder or using the “jslint.options” and “jslint.globals” settings in VS Code. # How does it help users JSLint is a tool that helps users write better JavaScript code by finding and reporting problems in their code. Here are some details on how it helps users: -- JSLint is a static code analysis tool, which means it analyzes the code without executing it. It checks the code for syntax errors, potential bugs, bad practices, and style issues¹³. -- JSLint reports the problems it finds as warnings, along with the location and description of the problem. It also provides suggestions on how to fix them or avoid them in the future¹². -- JSLint enforces a professional subset of JavaScript, a stricter language than the standard one. It follows good coding conventions and best practices that make the code more readable, maintainable, and secure¹³. -- JSLint can be used as a standalone program in the web browser, or as a file that can be imported or run in various environments, such as shell, ES Module, CommonJS, CodeMirror, Vim, or VSCode. This makes it easy to integrate JSLint into the development workflow and get instant feedback on the code quality²⁴. -# +- JSLint is a static code analysis tool, which means it analyzes the code without executing it. It checks the code for syntax errors, potential bugs, bad practices, and style issues. +- JSLint reports the problems it finds as warnings, along with the location and description of the problem. It also provides suggestions on how to fix them or avoid them in the future. +- JSLint enforces a professional subset of JavaScript, a stricter language than the standard one. It follows good coding conventions and best practices that make the code more readable, maintainable, and secure. +- JSLint can be used as a standalone program in the web browser, or as a file that can be imported or run in various environments, such as shell, ES Module, CommonJS, CodeMirror, Vim, or VSCode. This makes it easy to integrate JSLint into the development workflow and get instant feedback on the code quality. + + # JSON + ![image](https://user-images.githubusercontent.com/123230201/232207907-bcf5f0a4-9969-4a6b-a50f-1342501c74ea.png) + + JSON is a format for storing and transporting data that is based on JavaScript object notation. JSON stands for JavaScript Object Notation. JSON is a text format that is easy for humans to read and write, and easy for machines to parse and generate. JSON is often used when data is sent from a server to a web page. + +JSON data is written as name/value pairs, just like JavaScript object properties. A name/value pair consists of a field name (in double quotes), followed by a colon, followed by a value¹. For example: `"name": "John"`. + +JSON objects are written inside curly braces. JSON objects can contain multiple name/value pairs. For example: `{"name": "John", "age": 30}`. +JSON arrays are written inside square brackets. JSON arrays can contain values or objects. For example: `["red", "green", "blue"]` or `[{"name": "John", "age": 30}, {"name": "Anna", "age": 25}]`. + +JSON is language independent, meaning that it can be used by any programming language that can read and write text. JSON has a built-in function in JavaScript for converting JSON strings into JavaScript objects: `JSON.parse()`. JSON also has a built-in function in JavaScript for converting JavaScript objects into JSON strings: `JSON.stringify(). + +JSON is a useful format for exchanging data between computers and applications. It can help programmers work with data as JavaScript objects, with no complicated parsing and translations. + # How to install JSON extension in VS Code After you've finsihed installing the JSLint extension on VS Code, the next step is to install the JSON extension. In order to download the extension VS Code, we need to do the following steps. @@ -92,7 +109,28 @@ After you've finished installing the Angular Snippets extension on VS code, the 2. Type JSON and click on the first option and click install and wait for it to install. ![image](https://user-images.githubusercontent.com/123230201/227724297-64c61345-83e1-4e33-a7b9-0ee8a7f4a8b2.png) -# + + # Usage Instructions + JSON is a data format that is common in configuration files like package.json or project.json. We also use it extensively in VS Code for our configuration files. Here are the steps to use it in VS Code: +1. Open a file that ends with .json in VS Code. VS Code provides features to make it simpler to write or modify the file's content, such as IntelliSense, validation, quick navigation, hovers, formatting, and folding. +2. You can also create a new file and save it with a .json extension. VS Code will automatically detect the file type and provide the same features as above. +3. If you want to use comments or trailing commas in your JSON file, you can switch to the JSON with Comments (jsonc) mode. This mode is used for the VS Code configuration files such as settings.json, tasks.json, or launch.json¹. You can change the mode by clicking on the mode indicator in the status bar and selecting "JSON with Comments" from the list. +4. To understand the structure of JSON files, we use JSON schemas. JSON schemas describe the shape of the JSON file, as well as value sets, default values, and descriptions. VS Code can associate a JSON file to a schema either by using the $schema attribute in the file itself, or by using the json.schemas setting in the User or Workspace settings. +5. You can also use extensions to enhance your JSON editing experience in VS Code. For example, you can use JsonPrettifier extension to automatically prettify JSON files when you open them, or you can use other extensions that provide additional snippets, validation, or formatting for JSON files. + + # How does it help users + JSON is a format for storing and transporting data between applications. Here are some details on how it helps users: +- JSON stands for JavaScript Object Notation. It is a text format that follows the syntax of JavaScript objects, but it can be used by any programming language. +- JSON is lightweight and self-describing. It uses name/value pairs to represent data, and curly braces to hold objects and square brackets to hold arrays. +- JSON is easy to read and write for humans, and easy to parse and generate for machines. It can be converted into native JavaScript objects using JSON.parse() and vice versa using JSON.stringify(). +- JSON is widely used for data interchange on the web. It can be sent from a server to a web page, or from a web page to a server, using pure text. It can also be stored as a file or in a database. +- JSON can handle different types of data, such as strings, numbers, booleans, nulls, objects, and arrays. It can also nest objects and arrays within each other to create complex data structures. + + # Live Server + ![image](https://user-images.githubusercontent.com/123230201/232208328-2a30af2b-ca86-4847-a707-73c6a73b307f.png) + + Live Server is a tool that allows you to launch a local development server with live reload feature for static and dynamic pages. It can be used as a Visual Studio Code extension or as a command-line tool. Live Server can help you to quickly test and debug your web projects without having to manually refresh the browser every time you make a change. Live Server is not meant for deploying the final site, but for hacking your HTML/JavaScript/CSS files. + # How to install Live Server extension in VS Code After you've finished installing the JSON extension on VS Code, the next step is to install the Live Server extension. In order to download the extension VS Code, we need to do the following steps. @@ -102,7 +140,28 @@ After you've finished installing the JSON extension on VS Code, the next step is 2. Type Live Server and click on the first option and click install and wait for it to install. ![image](https://user-images.githubusercontent.com/123230201/227724718-2e98ef5c-9d77-4c27-b256-dd16b9b5c71a.png) -# + + # Usage Instructions + A Live Server is an extension for VS Code that allows you to launch a local development server with live reload feature for static and dynamic pages. Here are the steps to use it in VS Code: +1. Install Live Server extension in VS Code: From the VS Code ‘Extensions’, search for ‘Live Server’ and Install. +2. Open a project folder that contains HTML files in VS Code. You can also create a new folder and add some HTML files to it. +3. Click on the Go Live button from the status bar to start the server. Alternatively, you can right-click on an HTML file from the Explorer and select Open with Live Server, or use the command palette (Ctrl+Shift+P) and type Live Server: Open With Live Server. +4. A browser window will open with the HTML file in it. You will see a message saying "Live reload enabled" at the bottom right corner of the browser. +5. You can edit your HTML files or other files in your project and save them. The browser will automatically reload and show the changes. +6. To stop the server, click on the Go Live button again from the status bar, or use the command palette and type Live Server: Stop Live Server. + + # How does it help users + Live Server is a useful extension for Visual Studio Code that allows you to run a local web server and see the changes in your code reflected in the browser automatically. Here are some details on how it helps users: +- Live Server enables you to open an HTML document, and it runs a server for you and opens a browser window with the file in it. +- Live Server saves you time and hassle by refreshing the browser automatically whenever you save your code, so you don't have to manually reload the page to see the changes. +- Live Server is easy to install and use. You just need to click on the extensions option in Visual Studio Code, search for Live Server, and install it. Then you can click on Go Live at the bottom of the editor to start the server. +- Live Server can also be used from the command line by typing `live-server` or giving it a path to a folder with your files. +# + # Prettifier + ![image](https://user-images.githubusercontent.com/123230201/232208575-c80b523a-48cb-4c66-ad07-7c2446bb868a.png) + + Prettifiers are useful for developers and programmers who work with different languages and file formats, such as JSON, CSS, HTML, XML, SQL, PHP, Perl, JavaScript, etc. Prettifiers can help to improve the code quality, readability, and maintainability by applying standard indentation, spacing, line breaks, and syntax coloring. Prettifiers can also help to debug and review code by making it easier to spot errors and differences. + # How to install Prettifier extension in VS Code After you've finsihed installing the Live Server extension on VS Code, the next step is to install the Prettifier extension. In order to download the extension VS Code, we need to do the following steps. @@ -112,3 +171,18 @@ After you've finished installing the JSON extension on VS Code, the next step is 2. Type Prettifier extension and click on the first option and click install and wait for it to install. ![image](https://user-images.githubusercontent.com/123230201/231944685-85936ec5-4187-48db-9c22-b93fa28bf462.png) + + # Usuage Instructions + Prettifier is an opinionated code formatter that enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary. Here are the steps to use it in VS Code: +1. Install Prettifier extension in VS Code: From the VS Code ‘Extensions’, search for ‘Prettifier - Code formatter’ and Install. +2. Set Prettifier as the default formatter in VS Code: Go to File > Preferences > Settings and search for "default formatter". Select "Prettifier - Code formatter" from the drop-down list. +3. Format your code with Prettifier: You can use the Format Document command (Shift+Alt+F) or the Format Selection command (Ctrl+K Ctrl+F) to format your code with Prettifier. You can also enable format on save by checking the "Editor: Format On Save" option in the settings. +4. Configure Prettifier options: You can customize the formatting rules of Prettifier by creating a .Prettifierrc file in your project folder or by using the "Prettifier." settings in VS Code. For example, you can change the single quote preference, the tab width, the trailing comma behavior, etc. +5. Use Prettifier with plugins: You can also use Prettifier with plugins that support additional languages or features. For example, you can use Prettifier-plugin-svelte to format Svelte files or Prettifier-plugin-organize-imports to sort and remove unused imports. To use plugins, you need to install them as dependencies in your project and register them in your .Prettifierrc file or in the "Prettifier.plugins" setting in VS Code. + + # How it helps users + Prettifier is a term that refers to tools that help users format their code in a consistent and readable way. Here are some details on how they help users: +- Prettifiers can apply indentation, spacing, line wrapping, and other style rules to the code, making it easier to read and understand. +- Prettifiers can also highlight the syntax of different programming languages and file formats, such as JSON, CSS, HTML, XML, SQL, PHP, Perl, Apache Config, and JavaScript. This can help users identify keywords, variables, strings, comments, and other elements of the code. +- Prettifiers can be used as standalone programs, web applications, extensions for editors and IDEs, or libraries for various languages. This gives users flexibility and convenience to choose the best tool for their needs. +- Prettifiers can save users time and hassle by reducing the amount of manual formatting they have to do. They can also help users learn new features and best practices of different languages by providing examples and documentation.