Setting Visual Studio Code Highlighter - Penanda Open dan Closing Tag HTML

Hi sobat, pada kesempatan kali ini saya ingin membagikan informasi terkait aplikasi text code editor yang mulai banyak dikenal dan populer di lingkungan para pengembang aplikasi / software (programmer). Berikut ini aplikasi yang saya gunakan yaitu Visual Studio Code (Code Editor). Aplikasi ini sangat menarik, karena dengan kapasitasnya yang kecil dan ringan digunakan, visual studio code juga menawarkan banyak fitur library ekstension untuk kemudahan dan kenyamanan bekerja para coder :


Langkah - langlah untuk melakukan pengaturan diantaranya berikut ini:

1. Buka aplikasi visual studio code sobat coder
2. Pilih menu file => preferences => extension => Pada kotak pencarian di left side bar, ketik Highlight Matching Tag => install, setelah instalasi selesai kemudian lakukan pengaturan di file "settings.json"
3. Pilih menu file => preferences => extension => pilih highlight matching tag => pilih bagian "Beginning style", kemudian klik "Edit in settings.json"


Berikut isi script json pada file settings.json :
{
    "files.autoSaveDelay": 998,
    "update.mode": "manual",
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection":     "automaticallyOverrodeDefaultValue",
    "java.errors.incompleteClasspath.severity": "ignore",
    "php.validate.executablePath": "C:\\xampp\\php\\php.exe",
    "files.exclude": {
        "**/.classpath": true,
        "**/.project": true,
        "**/.settings": true,
        "**/.factorypath": true
    },
    "editor.wordWrap": "on",
    "window.zoomLevel": 0,
    "workbench.colorTheme": "Dracula Soft",
}

lalu ubahlah dengan menambahkan script json seperti berikut ini:

"highlight-matching-tag.styles": {
        "opening": {
         "name": {   
        "backgroundColor": "rgba(63, 191, 63, 0.20)",
        "underline": "yellow",
        "highlight": "rgba(255,255,0,0.2)"
        }    
      }
    },
        "editor.occurrencesHighlight": false



Hasilnya jadi seperti ini jika digabung:

{

"files.autoSaveDelay": 998,

"update.mode": "manual",

"editor.suggestSelection": "first",

"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",

"java.errors.incompleteClasspath.severity": "ignore",

"php.validate.executablePath": "C:\\xampp\\php\\php.exe",

"files.exclude": {

"**/.classpath": true,

"**/.project": true,

"**/.settings": true,

"**/.factorypath": true

},

"editor.wordWrap": "on",

"window.zoomLevel": 0,

"workbench.colorTheme": "Dracula Soft",

"highlight-matching-tag.styles": {

"opening": {

"name": {

"backgroundColor": "rgba(63, 191, 63, 0.20)",

"underline": "yellow",

"highlight": "rgba(255,255,0,0.2)"

}

}

},

"editor.occurrencesHighlight": false

}

Result in code editor , Taraaa....
Please give  your feedback below, thank you !

Read More