Bagaimana untuk menyesuaikan atribut id VSCode?

Question

Saya baru-baru ini berhijrah daripada Atom ke VSCode, dan sementara saya berjaya menyesuaikan kebanyakan editor mengikut keinginan saya, saya masih kehilangan beberapa ciri Atom yang saya suka.

Salah satunya ialah atribut "id" dalam Atom pernah menjadi warna tertentu, seperti #99FFFF. Saya telah melihat melalui tema tetapi tidak menemui tema yang menjadikan warna atribut id berbeza daripada tema lain.

Ciri lain yang saya suka ialah apabila mencipta elemen HTML baharu, mis. Div dengan atribut asas yang paling biasa digunakan secara lalai. Saya sudah terbiasa menggunakan serpihan emmet, tetapi ia masih tidak berfungsi, mungkin kerana saya belum tahu cara menggunakannya dengan betul. Ia akan sangat dihargai jika terdapat helaian tipu untuk ini, atau sekurang-kurangnya beberapa contoh. Katakan saya ingin mencipta elemen input dengan jenis, nama, id dan atribut pemegang tempat, bagaimana saya akan melakukan ini menggunakan serpihan emmet?

Ini tetapan saya.json

"editor.fontFamily": "'JetBrains Mono', Consolas, monospace",
    "editor.fontLigatures": true,
    "editor.letterSpacing": 0.4,
    "editor.smoothScrolling": true,
    "workbench.iconTheme": "material-icon-theme",

    "workbench.colorCustomizations": {
        "editor.background": "#232323",
        "sideBar.background": "#272727",
        "sideBar.foreground": "#C9C9C9",
        "editor.foreground": "#C9C9C9",
        "statusBar.background": "#272727",
        "activityBar.background": "#232323",
        "titleBar.activeBackground": "#232323",

    },
    "window.zoomLevel": 1,
    "emmet.triggerExpansionOnTab": true,
    "emmet.showSuggestionsAsSnippets": true,
    "editor.snippetSuggestions": "top"

Answer 1

Anda boleh menggunakan perkataan settings.com 中的 tokenColorCustomizations 对象更改 id untuk warna atau nilai atributnya:

"editor.tokenColorCustomizations": {
    "textMateRules": [
       {
        "scope":    [
          "meta.attribute.id.html entity.other.attribute-name"  // the word id
        ],
        "settings": {
          "foreground": "#ff0000",
          // "fontStyle": "bold"
        }
       },
      {
        "scope": [
          "meta.attribute.id.html string.quoted.double.html"  // the id's vaue
        ],
        "settings": {
          "foreground": "#ff0000",
          // "fontStyle": "bold"
        }
      }
    ]
  }

Lihat Penyertaan sintaks editor.