{"id":2726,"date":"2022-06-23T19:19:43","date_gmt":"2022-06-23T17:19:43","guid":{"rendered":"https:\/\/ekiwi.de\/?p=2726"},"modified":"2022-06-23T19:19:43","modified_gmt":"2022-06-23T17:19:43","slug":"visual-studio-code-autovervollstaendigung-fuer-javascript-verbessern","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/2726\/visual-studio-code-autovervollstaendigung-fuer-javascript-verbessern\/","title":{"rendered":"Visual Studio Code: Autovervollst\u00e4ndigung f\u00fcr JavaScript verbessern"},"content":{"rendered":"<p>Auto-Complete verbessern durch Typangabe in Java-Script.<\/p>\n<p><!--more--><\/p>\n<p>Ein Problem von Java-Script ist f\u00fcr Entwicklungsumgebungen immer, dass diese oft raten muss, was f\u00fcr ein Typ dahintersteckt, um eine Autovervollst\u00e4ndigung anzubieten.<\/p>\n<p>Nehmen wir z.B. das folgende Beispiel:<\/p>\n<p>Mit &#8222;getContext&#8220; holen wir uns eine Referenz auf den Kontext eines Canvas-Element um darauf eine Linie zu zeichnen. F\u00fcr VisualStudio Code ist der Typ der Variable &#8222;ctx&#8220;: &#8222;any&#8220;.<\/p>\n<p>Folglich sieht auch die Autovervollst\u00e4ndigung etwas mau aus.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2022\/06\/vs_code_1.png\" alt=\"\" width=\"547\" height=\"246\" class=\"alignnone size-full wp-image-2727\" srcset=\"\/wp-content\/uploads\/2022\/06\/vs_code_1.png 547w, \/wp-content\/uploads\/2022\/06\/vs_code_1-300x135.png 300w\" sizes=\"auto, (max-width: 547px) 100vw, 547px\" \/><\/p>\n<p>Allerdings k\u00f6nnen mittels Kommentar und Annotation den Typ vorgeben.<\/p>\n<pre>\r\n\/** @type {CanvasRenderingContext2D} *\/\r\n<\/pre>\n<p>Anschlie\u00dfend wei\u00df VScode den Typ der Variable.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2022\/06\/vs_code_2.png\" alt=\"\" width=\"352\" height=\"75\" class=\"alignnone size-full wp-image-2728\" srcset=\"\/wp-content\/uploads\/2022\/06\/vs_code_2.png 352w, \/wp-content\/uploads\/2022\/06\/vs_code_2-300x64.png 300w\" sizes=\"auto, (max-width: 352px) 100vw, 352px\" \/><\/p>\n<p>\u2026 und bietet eine deutlich umfangreichere Liste f\u00fcr die Autovervollst\u00e4ndigung an. Eine Liste an Typen gibt es z.B. <a href=\"https:\/\/developer.mozilla.org\/de\/docs\/Web\/API\" target=\"_blank\" rel=\"noopener\">hier<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2022\/06\/vs_code_3.png\" alt=\"\" width=\"877\" height=\"326\" class=\"alignnone size-full wp-image-2729\" srcset=\"\/wp-content\/uploads\/2022\/06\/vs_code_3.png 877w, \/wp-content\/uploads\/2022\/06\/vs_code_3-300x112.png 300w, \/wp-content\/uploads\/2022\/06\/vs_code_3-768x285.png 768w\" sizes=\"auto, (max-width: 877px) 100vw, 877px\" \/><\/p>","protected":false},"excerpt":{"rendered":"<p>Auto-Complete verbessern durch Typangabe in Java-Script.<\/p>\n","protected":false},"author":1,"featured_media":2260,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[15],"tags":[44,711],"class_list":["post-2726","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-javascript","tag-vscode"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/2726","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=2726"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/2726\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/2260"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=2726"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=2726"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=2726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}