{"id":314329,"date":"2020-12-04T15:02:21","date_gmt":"2020-12-04T15:02:21","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=314329"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=314329","title":{"rendered":"\u0421\u043d\u0438\u043f\u043f\u0435\u0442, \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0434\u043b\u044f VSCode \u0438 CLI. \u0427\u0430\u0441\u0442\u044c 1"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/-k\/fc\/ys\/-kfcysceba5k9gas9jelvik4utu.png\"><\/p>\n<p>  \u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  \u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 <a href=\"https:\/\/github.com\/harryheman\/Modern-HTML-Starter-Template\" rel=\"nofollow\">\u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u043e\u0433\u043e HTML-\u0448\u0430\u0431\u043b\u043e\u043d\u0430<\/a> \u044f \u0437\u0430\u0434\u0443\u043c\u0430\u043b\u0441\u044f \u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f. \u041d\u0430 \u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u043b\u0438\u0441\u044c \u043a\u043b\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u0438 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435\u043c \u0430\u0440\u0445\u0438\u0432\u0430. \u0422\u0430\u043a \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c <a href=\"https:\/\/raw.githubusercontent.com\/harryheman\/Modern-HTML-Starter-Template\/main\/tools\/vscode-html-snippet.json\" rel=\"nofollow\">HTML-\u0441\u043d\u0438\u043f\u043f\u0435\u0442<\/a> \u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0434\u043b\u044f Microsoft Visual Studio Code \u2014 <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=igor-agapov.htmltemplate\" rel=\"nofollow\">HTML Template<\/a>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u2014 <a href=\"https:\/\/www.npmjs.com\/package\/create-modern-template\" rel=\"nofollow\">create-modern-template<\/a>. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u0430\u043b\u0435\u043a\u0438 \u043e\u0442 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u0430 \u0438 \u044f \u0431\u0443\u0434\u0443 \u0438\u0445 \u0434\u043e\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u043e \u043c\u0435\u0440\u0435 \u0441\u0438\u043b \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439. \u041e\u0434\u043d\u0430\u043a\u043e, \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0438\u0445 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044f \u0443\u0437\u043d\u0430\u043b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u0432\u0435\u0449\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0438 \u0445\u043e\u0447\u0443 \u0441 \u0432\u0430\u043c\u0438 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f.<\/p>\n<p>  \u0412 \u044d\u0442\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043d\u0438\u043f\u043f\u0435\u0442 \u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435, \u0430 CLI \u2014 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439.<\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u043b\u0438\u0448\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434, <a href=\"https:\/\/github.com\/harryheman\/Modern-HTML-Starter-Template\/tree\/main\/tools\" rel=\"nofollow\">\u0432\u043e\u0442 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439<\/a>.<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h3>\u0421\u043d\u0438\u043f\u043f\u0435\u0442 (Snippet)<\/h3>\n<p>  \u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0441\u043d\u0438\u043f\u043f\u0435\u0442? \u0415\u0441\u043b\u0438 \u043a\u043e\u0440\u043e\u0442\u043a\u043e, \u0441\u043d\u0438\u043f\u043f\u0435\u0442 \u2014 \u044d\u0442\u043e \u0437\u0430\u0433\u043e\u0442\u043e\u0432\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f (\u0430\u0432\u0442\u043e\u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430).<\/p>\n<p>  \u0412 VSCode \u0432\u0441\u0442\u0440\u043e\u0435\u043d Emmet (<a href=\"https:\/\/emmet.io\/\" rel=\"nofollow\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0430\u0439\u0442<\/a>, <a href=\"https:\/\/code.visualstudio.com\/docs\/editor\/emmet\" rel=\"nofollow\">Emmet in Visual Studio Code<\/a>), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043c\u043d\u043e\u0433\u043e\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 HTML, CSS \u0438 JS-\u0441\u043d\u0438\u043f\u043f\u0435\u0442\u044b \u0434\u043b\u044f \u043f\u043e\u043c\u043e\u0449\u0438 \u0432 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u043a\u043e\u0434\u0430. \u041d\u0430\u0431\u0438\u0440\u0430\u0435\u043c \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 (\u0432 .html) !, \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c Tab \u0438\u043b\u0438 Enter, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0433\u043e\u0442\u043e\u0432\u0443\u044e html5-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443. \u041d\u0430\u0431\u0438\u0440\u0430\u0435\u043c nav&gt;ul&gt;li*3&gt;a.link&gt;img, \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c Tab, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c:<\/p>\n<pre><code class=\"xml\">&lt;nav&gt;     &lt;ul&gt;       &lt;li&gt;&lt;a href=&quot;&quot; class=&quot;link&quot;&gt;&lt;img src=&quot;&quot; alt=&quot;&quot;&gt;&lt;\/a&gt;&lt;\/li&gt;       &lt;li&gt;&lt;a href=&quot;&quot; class=&quot;link&quot;&gt;&lt;img src=&quot;&quot; alt=&quot;&quot;&gt;&lt;\/a&gt;&lt;\/li&gt;       &lt;li&gt;&lt;a href=&quot;&quot; class=&quot;link&quot;&gt;&lt;img src=&quot;&quot; alt=&quot;&quot;&gt;&lt;\/a&gt;&lt;\/li&gt;     &lt;\/ul&gt;   &lt;\/nav&gt; <\/code><\/pre>\n<p>  \u0438 \u0442.\u0434.<\/p>\n<p>  \u041a\u0440\u043e\u043c\u0435 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445, VSCode \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u043e\u0432. \u0414\u043b\u044f \u0438\u0445 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 File -&gt; Preferences -&gt; User Snippets (\u0438\u043b\u0438 \u043d\u0430\u0436\u0430\u0442\u044c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 Manage \u0432 \u043b\u0435\u0432\u043e\u043c \u043d\u0438\u0436\u043d\u0435\u043c \u0443\u0433\u043b\u0443 \u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c User Snippets). \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c JSON-\u0444\u0430\u0439\u043b\u0435 (\u0434\u043b\u044f HTML \u0432 html.json, \u0434\u043b\u044f JavaScript \u0432 javascript.json \u0438 \u0442.\u0434.).<\/p>\n<p>  \u041f\u043e\u0442\u0440\u0435\u043d\u0438\u0440\u0443\u0435\u043c\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c JS-\u0441\u043d\u0438\u043f\u043f\u0435\u0442\u044b. \u041d\u0430\u0445\u043e\u0434\u0438\u043c \u0444\u0430\u0439\u043b javascript.json \u0438 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0435\u0433\u043e.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/se\/sm\/54\/sesm54ou76afbeenoh3o-dote8g.png\"><\/p>\n<p>  \u0412\u0438\u0434\u0438\u043c \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438, \u043a\u0440\u0430\u0442\u043a\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u043e\u0432. \u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u043e\u0432 \u0432 VSCode \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 <a href=\"https:\/\/code.visualstudio.com\/docs\/editor\/userdefinedsnippets\" rel=\"nofollow\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>  \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0447\u0435\u0433\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u043d\u0438\u043f\u043f\u0435\u0442 \u0434\u043b\u044f console.log(). \u0412\u043e\u0442 \u043a\u0430\u043a \u043e\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442:<\/p>\n<pre><code class=\"json\">&quot;Print to console&quot;: {   &quot;prefix&quot;: &quot;log&quot;,   &quot;body&quot;: &quot;console.log($0)&quot;,   &quot;description&quot;: &quot;Create console.log()&quot; }, <\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li>Print to console \u2014 \u043a\u043b\u044e\u0447 \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u0430 (\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e)<\/li>\n<li>prefix \u2014 \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u0430 (\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e)<\/li>\n<li>body \u2014 \u0441\u0430\u043c \u0441\u043d\u0438\u043f\u043f\u0435\u0442 (\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e)<\/li>\n<li>$\u0447\u0438\u0441\u043b\u043e \u2014 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u0430; $1 \u2014 \u043f\u0435\u0440\u0432\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435, $2 \u2014 \u0432\u0442\u043e\u0440\u043e\u0435 \u0438 \u0442.\u0434., $0 \u2014 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 (\u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e)<\/li>\n<li>description \u2014 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u0430 (\u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e)<\/li>\n<\/ul>\n<p>  \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0444\u0430\u0439\u043b. \u041d\u0430\u0431\u0438\u0440\u0430\u0435\u043c log \u0432 \u0441\u043a\u0440\u0438\u043f\u0442\u0435, \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c Tab \u0438\u043b\u0438 Enter, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c console.log() \u0441 \u043a\u0443\u0440\u0441\u043e\u0440\u043e\u043c \u043c\u0435\u0436\u0434\u0443 \u0441\u043a\u043e\u0431\u043a\u0430\u043c\u0438.<\/p>\n<p>  \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u043d\u0438\u043f\u043f\u0435\u0442 \u0434\u043b\u044f \u0446\u0438\u043a\u043b\u0430 for-of:<\/p>\n<pre><code class=\"json\">&quot;For-of loop&quot;: {   &quot;prefix&quot;: &quot;fo&quot;,   &quot;body&quot;: [     &quot;for (const ${1:item} of ${2:arr}) {&quot;,     &quot;\\t$0&quot;,     &quot;}&quot;   ] }, <\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li>\u0421\u043d\u0438\u043f\u043f\u0435\u0442\u044b, \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0438\u0435 \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0442\u0440\u043e\u043a, \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0430\u0441\u0441\u0438\u0432\u0430<\/li>\n<li>${\u0447\u0438\u0441\u043b\u043e: \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435}; ${1:item} \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u043f\u0435\u0440\u0432\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c item \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e; \u0434\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432\u044b\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/li>\n<li>\\t \u2014 \u043e\u0434\u0438\u043d \u043e\u0442\u0441\u0442\u0443\u043f (\u0432\u0435\u043b\u0438\u0447\u0438\u043d\u0430 \u043e\u0441\u0442\u0443\u043f\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u0438\u043b\u0438, \u043a\u0430\u043a \u0432 \u043c\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=esbenp.prettier-vscode\" rel=\"nofollow\">Prettier<\/a>), \\t\\t \u2014 \u0434\u0432\u0430 \u043e\u0442\u0441\u0442\u0443\u043f\u0430 \u0438 \u0442.\u0434.<\/li>\n<\/ul>\n<p>  \u041d\u0430\u0431\u0438\u0440\u0430\u0435\u043c \u0432 \u0441\u043a\u0440\u0438\u043f\u0442\u0435 fo, \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c Tab \u0438\u043b\u0438 Enter, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c:<\/p>\n<pre><code class=\"javascript\">for (const item of arr) {  } <\/code><\/pre>\n<p>  \u0441 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c item. \u041d\u0430\u0436\u0438\u043c\u0430\u0435\u043c Tab, \u0432\u044b\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f arr. \u0415\u0449\u0435 \u0440\u0430\u0437 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c Tab, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043d\u0430 \u0432\u0442\u043e\u0440\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443.<\/p>\n<p>  \u0412\u043e\u0442 \u0435\u0449\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432:<\/p>\n<pre><code class=\"json\">&quot;For-in loop&quot;: {   &quot;prefix&quot;: &quot;fi&quot;,   &quot;body&quot;: [     &quot;for (const ${1:key} in ${2:obj}) {&quot;,     &quot;\\t$0&quot;,     &quot;}&quot;   ] }, &quot;Get one element&quot;: {   &quot;prefix&quot;: &quot;qs&quot;,   &quot;body&quot;: &quot;const $1 = ${2:document}.querySelector('$0')&quot; }, &quot;Get all elements&quot;: {   &quot;prefix&quot;: &quot;qsa&quot;,   &quot;body&quot;: &quot;const $1 = [...${2:document}.querySelectorAll('$0')]&quot; }, &quot;Add listener&quot;: {   &quot;prefix&quot;: &quot;al&quot;,   &quot;body&quot;: [     &quot;${1:document}.addEventListener('${2:click}', (${3:{ target }}) =&gt; {&quot;,     &quot;\\t$0&quot;,     &quot;})&quot;   ] }, &quot;Async function&quot;: {   &quot;prefix&quot;: &quot;af&quot;,   &quot;body&quot;: [     &quot;const $1 = async ($2) =&gt; {&quot;,     &quot;\\ttry {&quot;,     &quot;\\t\\tconst response = await fetch($3)&quot;,     &quot;\\t\\tconst data = await res.json()&quot;,     &quot;\\t\\t$0&quot;,     &quot;\\t} catch (err) {&quot;,     &quot;\\t\\tconsole.error(err)&quot;,     &quot;\\t}&quot;,     &quot;}&quot;   ] } <\/code><\/pre>\n<p>  HTML-\u0441\u043d\u0438\u043f\u043f\u0435\u0442\u044b \u0441\u0442\u0440\u043e\u044f\u0442\u0441\u044f \u043f\u043e \u0442\u0430\u043a\u043e\u043c\u0443 \u0436\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0443. \u0412\u043e\u0442 \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 HTML Template:<\/p>\n<pre><code class=\"json\">{   &quot;HTML Template&quot;: {     &quot;prefix&quot;: &quot;html&quot;,     &quot;body&quot;: [       &quot;&lt;!DOCTYPE html&gt;&quot;,       &quot;&lt;html&quot;,       &quot;\\tlang='en'&quot;,       &quot;\\tdir='ltr'&quot;,       &quot;\\titemscope&quot;,       &quot;\\titemtype='https:\/\/schema.org\/WebPage'&quot;,       &quot;\\tprefix='og: http:\/\/ogp.me\/ns#'&quot;,       &quot;&gt;&quot;,       &quot;\\t&lt;head&gt;&quot;,       &quot;\\t\\t&lt;meta charset='UTF-8' \/&gt;&quot;,       &quot;\\t\\t&lt;meta name='viewport' content='width=device-width, initial-scale=1' \/&gt;&quot;,       &quot;&quot;,       &quot;\\t\\t&lt;title&gt;$1&lt;\/title&gt;&quot;,       &quot;&quot;,       &quot;\\t\\t&lt;meta name='referrer' content='origin' \/&gt;&quot;,       &quot;\\t\\t&lt;link rel='canonical' href='$0' \/&gt;&quot;,       &quot;\\t\\t&lt;link rel='icon' type='image\/png' href='.\/icons\/64x64.png' \/&gt;&quot;,       &quot;\\t\\t&lt;link rel='manifest' href='.\/manifest.json' \/&gt;&quot;,       &quot;&quot;,       &quot;\\t\\t&lt;!-- Security --&gt;&quot;,       &quot;\\t\\t&lt;meta http-equiv='X-Content-Type-Options' content='nosniff' \/&gt;&quot;,       &quot;\\t\\t&lt;meta http-equiv='X-XSS-Protection' content='1; mode=block' \/&gt;&quot;,       &quot;&quot;,       &quot;\\t\\t&lt;meta name='author' content='$3' \/&gt;&quot;,       &quot;\\t\\t&lt;meta name='description' content='$2' \/&gt;&quot;,       &quot;\\t\\t&lt;meta name='keywords' content='$4' \/&gt;&quot;,       &quot;&quot;,       &quot;\\t\\t&lt;meta itemprop='name' content='$1' \/&gt;&quot;,       &quot;\\t\\t&lt;meta itemprop='description' content='$2' \/&gt;&quot;,       &quot;\\t\\t&lt;meta itemprop='image' content='.\/icons\/128x128.png' \/&gt;&quot;,       &quot;&quot;,       &quot;\\t\\t&lt;!-- Microsoft --&gt;&quot;,       &quot;\\t\\t&lt;meta http-equiv='x-ua-compatible' content='ie=edge' \/&gt;&quot;,       &quot;\\t\\t&lt;meta name='application-name' content='$1' \/&gt;&quot;,       &quot;\\t\\t&lt;meta name='msapplication-tooltip' content='$2' \/&gt;&quot;,       &quot;\\t\\t&lt;meta name='msapplication-starturl' content='\/' \/&gt;&quot;,       &quot;\\t\\t&lt;meta name='msapplication-config' content='browserconfig.xml' \/&gt;&quot;,       &quot;&quot;,       &quot;\\t\\t&lt;!-- Facebook --&gt;&quot;,       &quot;\\t\\t&lt;meta property='og:type' content='website' \/&gt;&quot;,       &quot;\\t\\t&lt;meta property='og:url' content='$0' \/&gt;&quot;,       &quot;\\t\\t&lt;meta property='og:title' content='$1' \/&gt;&quot;,       &quot;\\t\\t&lt;meta property='og:image' content='.\/icons\/256x256.png' \/&gt;&quot;,       &quot;\\t\\t&lt;meta property='og:site_name' content='$1' \/&gt;&quot;,       &quot;\\t\\t&lt;meta property='og:description' content='$2' \/&gt;&quot;,       &quot;\\t\\t&lt;meta property='og:locale' content='en_US' \/&gt;&quot;,       &quot;&quot;,       &quot;\\t\\t&lt;!-- Twitter --&gt;&quot;,       &quot;\\t\\t&lt;meta name='twitter:title' content='$1' \/&gt;&quot;,       &quot;\\t\\t&lt;meta name='twitter:description' content='$2' \/&gt;&quot;,       &quot;\\t\\t&lt;meta name='twitter:url' content='$0' \/&gt;&quot;,       &quot;\\t\\t&lt;meta name='twitter:image' content='.\/icons\/128x128.png' \/&gt;&quot;,       &quot;&quot;,       &quot;\\t\\t&lt;!-- IOS --&gt;&quot;,       &quot;\\t\\t&lt;meta name='apple-mobile-web-app-title' content='$1' \/&gt;&quot;,       &quot;\\t\\t&lt;meta name='apple-mobile-web-app-capable' content='yes' \/&gt;&quot;,       &quot;\\t\\t&lt;meta name='apple-mobile-web-app-status-bar-style' content='#222' \/&gt;&quot;,       &quot;\\t\\t&lt;link rel='apple-touch-icon' href='.\/icons\/256x256.png' \/&gt;&quot;,       &quot;&quot;,       &quot;\\t\\t&lt;!-- Android --&gt;&quot;,       &quot;\\t\\t&lt;meta name='theme-color' content='#eee' \/&gt;&quot;,       &quot;\\t\\t&lt;meta name='mobile-web-app-capable' content='yes' \/&gt;&quot;,       &quot;&quot;,       &quot;\\t\\t&lt;!-- Google Verification Tag --&gt;&quot;,       &quot;&quot;,       &quot;\\t\\t&lt;!-- Global site tag (gtag.js) - Google Analytics --&gt;&quot;,       &quot;&quot;,       &quot;\\t\\t&lt;!-- Global site tag (gtag.js) - Google Analytics --&gt;&quot;,       &quot;&quot;,       &quot;\\t\\t&lt;!-- Yandex Verification Tag --&gt;&quot;,       &quot;&quot;,       &quot;\\t\\t&lt;!-- Yandex.Metrika counter --&gt;&quot;,       &quot;&quot;,       &quot;\\t\\t&lt;!-- Mail Verification Tag --&gt;&quot;,       &quot;&quot;,       &quot;\\t\\t&lt;!-- JSON-LD --&gt;&quot;,       &quot;\\t\\t&lt;script type='application\/ld+json'&gt;&quot;,       &quot;\\t\\t\\t{&quot;,       &quot;\\t\\t\\t\\t'@context': 'http:\/\/schema.org\/',&quot;,       &quot;\\t\\t\\t\\t'@type': 'WebPage',&quot;,       &quot;\\t\\t\\t\\t'name': '$1',&quot;,       &quot;\\t\\t\\t\\t'image': [&quot;,       &quot;\\t\\t\\t\\t\\t'$0icons\/512x512.png'&quot;,       &quot;\\t\\t\\t\\t],&quot;,       &quot;\\t\\t\\t\\t'author': {&quot;,       &quot;\\t\\t\\t\\t\\t'@type': 'Person',&quot;,       &quot;\\t\\t\\t\\t\\t'name': '$3'&quot;,       &quot;\\t\\t\\t\\t},&quot;,       &quot;\\t\\t\\t\\t'datePublished': '2020-11-20',&quot;,       &quot;\\t\\t\\t\\t'description': '$2',&quot;,       &quot;\\t\\t\\t\\t'keywords': '$4'&quot;,       &quot;\\t\\t\\t}&quot;,       &quot;\\t\\t&lt;\/script&gt;&quot;,       &quot;&quot;,       &quot;\\t\\t&lt;!-- Google Fonts --&gt;&quot;,       &quot;&quot;,       &quot;\\t\\t&lt;style&gt;&quot;,       &quot;\\t\\t\\t\/* Critical CSS *\/&quot;,       &quot;\\t\\t&lt;\/style&gt;&quot;,       &quot;&quot;,       &quot;\\t\\t&lt;link rel='preload' href='.\/css\/style.css' as='style'&gt;&quot;,       &quot;\\t\\t&lt;link rel='stylesheet' href='.\/css\/style.css' \/&gt;&quot;,       &quot;&quot;,       &quot;&lt;link rel='preload' href='.\/script.js' as='script'&gt;&quot;,       &quot;\\t&lt;\/head&gt;&quot;,       &quot;\\t&lt;body&gt;&quot;,       &quot;\\t\\t&lt;!-- HTML5 --&gt;&quot;,       &quot;\\t\\t&lt;header&gt;&quot;,       &quot;\\t\\t\\t&lt;h1&gt;$1&lt;\/h1&gt;&quot;,       &quot;\\t\\t\\t&lt;nav&gt;&quot;,       &quot;\\t\\t\\t\\t&lt;a href='#' target='_blank' rel='noopener'&gt;Link 1&lt;\/a&gt;&quot;,       &quot;\\t\\t\\t\\t&lt;a href='#' target='_blank' rel='noopener'&gt;Link 2&lt;\/a&gt;&quot;,       &quot;\\t\\t\\t&lt;\/nav&gt;&quot;,       &quot;\\t\\t&lt;\/header&gt;&quot;,       &quot;&quot;,       &quot;\\t\\t&lt;main&gt;&lt;\/main&gt;&quot;,       &quot;&quot;,       &quot;\\t\\t&lt;footer&gt;&quot;,       &quot;\\t\\t\\t&lt;p&gt;&copy; 2020. All rights reserved&lt;\/p&gt;&quot;,       &quot;\\t\\t&lt;\/footer&gt;&quot;,       &quot;&quot;,       &quot;\\t\\t&lt;script src='.\/script.js' type='module'&gt;&lt;\/script&gt;&quot;,       &quot;\\t&lt;\/body&gt;&quot;,       &quot;&lt;\/html&gt;&quot;     ],     &quot;description&quot;: &quot;Create Modern HTML Template&quot;   } } <\/code><\/pre>\n<p>  \u041d\u0430\u0431\u0438\u0440\u0430\u0435\u043c html, \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c Tab \u0438\u043b\u0438 Enter, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443. \u041f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u044b \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435: \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (title), \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 (description), \u0430\u0432\u0442\u043e\u0440 (author), \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0441\u043b\u043e\u0432\u0430 (keywords), \u0430\u0434\u0440\u0435\u0441 (url).<\/p>\n<h3>\u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 (Extension)<\/h3>\n<p>  \u041d\u0430 \u0441\u0430\u0439\u0442\u0435 VSCode \u0438\u043c\u0435\u0435\u0442\u0441\u044f <a href=\"https:\/\/code.visualstudio.com\/api\" rel=\"nofollow\">\u043e\u0442\u043b\u0438\u0447\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0439<\/a>.<\/p>\n<p>  \u041c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u0432\u0430 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f: \u0432 \u0444\u043e\u0440\u043c\u0435 \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u043e\u0432 \u0438 \u0432 \u0444\u043e\u0440\u043c\u0435 CLI. \u0412\u0442\u043e\u0440\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u0443\u0435\u043c \u0432 <a href=\"https:\/\/marketplace.visualstudio.com\/\" rel=\"nofollow\">Visual Studio Marketplace<\/a>.<\/p>\n<p>  \u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0439 \u0432 \u0444\u043e\u0440\u043c\u0435 \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u043e\u0432:<\/p>\n<ul>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=xabikos.JavaScriptSnippets\" rel=\"nofollow\">JavaScript (ES6) code snippets<\/a><\/li>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=dsznajder.es7-react-js-snippets\" rel=\"nofollow\">ES7 React\/Redux\/GraphQL\/React-Native snippets<\/a><\/li>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=sdras.vue-vscode-snippets\" rel=\"nofollow\">Vue VSCode Snippets<\/a><\/li>\n<\/ul>\n<p>  \u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0432 \u0444\u043e\u0440\u043c\u0435 CLI \u043c\u0435\u043d\u0435\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u043f\u043e \u0442\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u0435, \u0447\u0442\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u00ab\u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0435\u00bb CLI.<\/p>\n<h6>\u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0432 \u0444\u043e\u0440\u043c\u0435 \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u043e\u0432<\/h6>\n<p>  \u0414\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0439 \u0434\u043b\u044f VSCode, \u043d\u0430\u043c, \u043a\u0440\u043e\u043c\u0435 <a href=\"https:\/\/nodejs.org\/en\/\" rel=\"nofollow\">Node.js<\/a> \u0438 <a href=\"https:\/\/git-scm.com\/\" rel=\"nofollow\">Git<\/a>, \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0435\u0449\u0435 \u043f\u0430\u0440\u043e\u0447\u043a\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0442\u043e\u0447\u043d\u0435\u0435, \u043e\u0434\u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0438 \u043f\u043b\u0430\u0433\u0438\u043d, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e: <a href=\"https:\/\/www.npmjs.com\/package\/yo\" rel=\"nofollow\">yeoman<\/a> \u0438 <a href=\"https:\/\/www.npmjs.com\/package\/generator-code\" rel=\"nofollow\">generator-code<\/a>. \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0438\u0445 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e:<\/p>\n<pre><code class=\"javascript\">npm i -g yo generator-code \/\/ \u0438\u043b\u0438 yarn global add yo generator-code <\/code><\/pre>\n<p>  \u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 yo code, \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c New Code Snippets, \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u043c \u043d\u0430 \u0432\u043e\u043f\u0440\u043e\u0441\u044b.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/h8\/tx\/1p\/h8tx1pd_z9yn8i6kz0qogftbgqo.png\"><\/p>\n<p>  \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u043d\u0430\u043c\u0438 \u0440\u0430\u043d\u0435\u0435 HTML-\u0441\u043d\u0438\u043f\u043f\u0435\u0442 \u0432 \u0444\u0430\u0439\u043b snippets\/snippets.code-snippets (\u0444\u0430\u0439\u043b\u044b \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u043e\u0432 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0433\u0443\u0442 \u0438\u043c\u0435\u0442\u044c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 json), \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c package.json \u0438 README.md, \u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0432 \u043c\u0430\u0440\u043a\u0435\u0442\u043f\u043b\u0435\u0439\u0441\u0435. \u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u0432\u0441\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e. \u0421\u043b\u0438\u0448\u043a\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u043e, \u043f\u043e\u0434\u0443\u043c\u0430\u043b \u044f, \u0438 \u0440\u0435\u0448\u0438\u043b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0432 \u0444\u043e\u0440\u043c\u0435 CLI.<\/p>\n<h6>\u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0432 \u0444\u043e\u0440\u043c\u0435 CLI<\/h6>\n<p>  \u0421\u043d\u043e\u0432\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 yo code. \u041d\u0430 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c New Extension (TypeScript) (\u043d\u0435 \u0431\u043e\u0439\u0442\u0435\u0441\u044c, <a href=\"https:\/\/www.typescriptlang.org\/\" rel=\"nofollow\">TypeScript<\/a> \u0432 \u043d\u0430\u0448\u0435\u043c \u043a\u043e\u0434\u0435 \u043f\u043e\u0447\u0442\u0438 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442, \u0430 \u0442\u0430\u043c, \u0433\u0434\u0435 \u0431\u0443\u0434\u0435\u0442, \u044f \u0434\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0440\u0430\u0437\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u044f), \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u043c \u043d\u0430 \u0432\u043e\u043f\u0440\u043e\u0441\u044b.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/pc\/n-\/t-\/pcn-t-ktj3lqjge5-ui-84rves8.png\"><\/p>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u0440\u0430\u0431\u043e\u0442\u043e\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f, \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435:<\/p>\n<pre><code class=\"javascript\">cd htmltemplate code . <\/code><\/pre>\n<p>  \u041d\u0430\u0436\u0438\u043c\u0430\u0435\u043c F5 \u0438\u043b\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 Run (Ctrl\/Cmd+Shift+D) \u0441\u043b\u0435\u0432\u0430 \u0438 \u043a\u043d\u043e\u043f\u043a\u0443 Start Debugging \u0441\u0432\u0435\u0440\u0445\u0443. \u0418\u043d\u043e\u0433\u0434\u0430 \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0443. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0442\u043c\u0435\u043d\u044f\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u043a (Cancel) \u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u043c \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u0443.<\/p>\n<p>  \u0412 \u043e\u0442\u043a\u0440\u044b\u0432\u0448\u0435\u043c\u0441\u044f \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c View -&gt; Command Palette (Ctrl\/Cmd+Shift+P), \u043d\u0430\u0431\u0438\u0440\u0430\u0435\u043c hello \u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c Hello World.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/cf\/s5\/qg\/cfs5qg4putp3rp4qwarmkmbvesc.png\"><\/p>\n<p>  \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0442 VSCode \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 (\u043f\u043e\u0437\u0434\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435) \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/2z\/0x\/7y\/2z0x7yircm1g3noxgx1snncofe8.png\"><\/p>\n<p>  \u0418\u0437 \u0432\u0441\u0435\u0445 \u0444\u0430\u0439\u043b\u043e\u0432, \u0438\u043c\u0435\u044e\u0449\u0438\u0445\u0441\u044f \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u043d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u044e\u0442 package.json \u0438 src\/extension.ts. \u0414\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e src\/test \u0438 \u0444\u0430\u0439\u043b vsc-extension-quickstart.md \u043c\u043e\u0436\u043d\u043e \u0443\u0434\u0430\u043b\u0438\u0442\u044c.<\/p>\n<p>  \u0417\u0430\u0433\u043b\u044f\u043d\u0435\u043c \u0432 extension.ts (\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u044b \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u043e\u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u0438):<\/p>\n<pre><code class=\"javascript\">\/\/ \u0438\u043c\u043f\u043e\u0440\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 VSCode import * as vscode from 'vscode'  \/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c\u0430\u044f \u043f\u0440\u0438 \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f export function activate(context: vscode.ExtensionContext) {   \/\/ \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435, \u0432\u044b\u0432\u043e\u0434\u0438\u043c\u043e\u0435 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430,   \/\/ \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u0430 \u043e\u0442\u043b\u0430\u0434\u043a\u0430 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f   console.log('Congratulations, your extension &quot;htmltemplate&quot; is now active!')    \/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f   \/\/ \u043a\u043e\u043c\u0430\u043d\u0434\u0430 - \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f   \/\/ htmltemplate - \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f   \/\/ helloWorld - \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b   let disposable = vscode.commands.registerCommand(     'htmltemplate.helloWorld',     () =&gt; {       \/\/ \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u043e\u0435 \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435       \/\/ \u043f\u0440\u0438 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u044b       vscode.window.showInformationMessage('Hello World from htmltemplate!')     }   )    \/\/ \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u044b   \/\/ \u0441\u0443\u0434\u044f \u043f\u043e \u0432\u0441\u0435\u043c\u0443, \u0437\u0434\u0435\u0441\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u043f\u0430\u0442\u0442\u0435\u0440\u043d \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f &quot;\u041f\u043e\u0434\u043f\u0438\u0441\u043a\u0430\/\u0423\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435&quot;,   \/\/ \u043e\u0434\u0438\u043d \u0438\u0437 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0430 &quot;\u041d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044c&quot;   context.subscriptions.push(disposable) }  \/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c\u0430\u044f \u043f\u0440\u0438 \u0434\u0435\u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f export function deactivate() {} <\/code><\/pre>\n<p>  \u0412\u0430\u0436\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442: &#8216;\u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435.\u043a\u043e\u043c\u0430\u043d\u0434\u0430&#8217; \u0432 extension.ts \u0434\u043e\u043b\u0436\u043d\u043e \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u043f\u043e\u043b\u0435\u0439 activationEvents \u0438 command \u0432 package.json:<\/p>\n<pre><code class=\"json\">&quot;activationEvents&quot;: [   &quot;onCommand:htmltemplate.helloWorld&quot; ], &quot;contributes&quot;: {   &quot;commands&quot;: [     {       &quot;command&quot;: &quot;htmltemplate.helloWorld&quot;,       &quot;title&quot;: &quot;Hello World&quot;     }   ] }, <\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li>commands \u2014 \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u043e\u043c\u0430\u043d\u0434<\/li>\n<li>activationEvents \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0435 \u043f\u0440\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u0430\u043d\u0434<\/li>\n<\/ul>\n<p>  \u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0435\u043c \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f.<\/p>\n<p>  \u041c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0448\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u043f\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0443 \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u043e <a href=\"https:\/\/github.com\/facebook\/create-react-app\" rel=\"nofollow\">create-react-app<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/github.com\/vuejs\/vue-cli\" rel=\"nofollow\">vue-cli<\/a>, \u0442.\u0435. \u043f\u043e \u043a\u043e\u043c\u0430\u043d\u0434\u0435 create \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u043e \u043f\u0440\u043e\u0435\u043a\u0442, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0444\u0430\u0439\u043b\u044b, \u0432 \u0446\u0435\u043b\u0435\u0432\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438.<\/p>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c package.json:<\/p>\n<pre><code class=\"json\">&quot;displayName&quot;: &quot;HTML Template&quot;, &quot;activationEvents&quot;: [   &quot;onCommand:htmltemplate.create&quot; ], &quot;contributes&quot;: {   &quot;commands&quot;: [     {       &quot;command&quot;: &quot;htmltemplate.create&quot;,       &quot;title&quot;: &quot;Create Template&quot;     }   ] }, <\/code><\/pre>\n<p>  \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e src\/components \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0446\u0435\u043b\u0435\u0432\u0443\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e.<\/p>\n<p>  \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 \u0432\u0438\u0434\u0435 ES6-\u043c\u043e\u0434\u0443\u043b\u0435\u0439 (VSCode \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 ES6-\u043c\u043e\u0434\u0443\u043b\u0438 (export\/import), \u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0438 CommonJS-\u043c\u043e\u0434\u0443\u043b\u0438 (module.exports\/require)): index.html.js, css\/style.css.js, script.js \u0438 \u0442.\u0434. \u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e:<\/p>\n<pre><code class=\"javascript\">\/\/ index.html.js export default ` &lt;!DOCTYPE html&gt; &lt;html   lang=&quot;en&quot;   dir=&quot;ltr&quot;   itemscope   itemtype=&quot;https:\/\/schema.org\/WebPage&quot;   prefix=&quot;og: http:\/\/ogp.me\/ns#&quot; &gt;   ... &lt;\/html&gt; ` <\/code><\/pre>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u0432\u0441\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f (\u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0438\u043a\u043e\u043d\u043a\u0438) \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0437\u0430\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0432 Base64: \u0432\u043e\u0442 \u043e\u0434\u0438\u043d \u0438\u0437 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0445 <a href=\"https:\/\/base64.guru\/converter\/encode\/image\/png\" rel=\"nofollow\">\u043e\u043d\u043b\u0430\u0439\u043d-\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432<\/a>. \u041d\u0430\u043b\u0438\u0447\u0438\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u00abdata:image\/png;base64,\u00bb \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0435 \u0438\u043c\u0435\u0435\u0442.<\/p>\n<p>  \u0414\u043b\u044f \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f (\u0437\u0430\u043f\u0438\u0441\u0438) \u0444\u0430\u0439\u043b\u043e\u0432 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/www.npmjs.com\/package\/fs-extra\" rel=\"nofollow\">fs-extra<\/a>. \u041c\u0435\u0442\u043e\u0434 outputFile \u0434\u0430\u043d\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u0435\u043b\u0430\u0435\u0442 \u0442\u043e\u043c\u0435 \u0441\u0430\u043c\u043e\u0435, \u0447\u0442\u043e \u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 Node.js-\u043c\u0435\u0442\u043e\u0434 writeFile, \u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u0434\u043b\u044f \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u043f\u0440\u0438 \u0435\u0435 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438: \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u043c\u044b \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c css\/style.css, \u0430 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 css \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442, outputFile \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u0435\u0435 \u0438 \u0437\u0430\u043f\u0438\u0448\u0435\u0442 \u0442\u0443\u0434\u0430 style.css (writeFile \u043f\u0440\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0432\u044b\u0431\u0440\u043e\u0441\u0438\u0442 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435).<\/p>\n<p>  \u0424\u0430\u0439\u043b extension.ts \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">import * as vscode from 'vscode' \/\/ \u0438\u043c\u043f\u043e\u0440\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 fs-extra const fs = require('fs-extra') const path = require('path')  \/\/ \u0438\u043c\u043f\u043e\u0440\u0442 \u0444\u0430\u0439\u043b\u043e\u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0442\u043e\u0447\u043d\u0435\u0435, \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u044d\u0442\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 import indexHTML from '.\/components\/index.html.js' import styleCSS from '.\/components\/css\/style.css.js' import scriptJS from '.\/components\/script.js' import icon64 from '.\/components\/icons\/icon64.js' \/\/ ...  export function activate(context: vscode.ExtensionContext) {   console.log('Congratulations, your extension &quot;htmltemplate&quot; is now active!')    let disposable = vscode.commands.registerCommand(     'htmltemplate.create',     () =&gt; {       \/\/ \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0444\u0430\u0439\u043b\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0441\u044c \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 html-template       \/\/ filename: string \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 TypeScript-\u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0443,       \/\/ \u0447\u0442\u043e \u0442\u0438\u043f\u043e\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0438,       \/\/ \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0430       const folder = (filename: string) =&gt;         path.join(vscode.workspace.rootPath, `html-template\/${filename}`)        \/\/ \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c \u0444\u0430\u0439\u043b\u043e\u0432       \/\/ files: string[] \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 files \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u0442\u0440\u043e\u043a       const files: string[] = [         indexHTML,         styleCSS,         scriptJS,         icon64,         ...       ]        \/\/ \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f\u043c\u0438 \u0444\u0430\u0439\u043b\u043e\u0432       \/\/ \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u044b \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0439 \u0444\u0430\u0439\u043b\u043e\u0432 \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c       const fileNames: string[] = [         'index.html',         'css\/style.css',         'script.js',         'server.js',         'icons\/64x64.png',         ...       ]        ;(async () =&gt; {         try {           \/\/ \u043f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c           for (let i = 0; i &lt; files.length; i++) {              \/\/ \u043c\u0435\u0442\u043e\u0434 outputFile \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0434\u0432\u0430 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0438 \u043e\u0434\u0438\u043d \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440:             \/\/ \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443 (\u0435\u0433\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435), \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u0430 \u0438 \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u043a\u0443 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e UTF-8)              \/\/ \u0435\u0441\u043b\u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u0430 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 png,             \/\/ \u0437\u043d\u0430\u0447\u0438\u0442, \u043c\u044b \u0438\u043c\u0435\u0435\u043c \u0434\u0435\u043b\u043e \u0441 Base64-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c:             \/\/ \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u043a\u0443             if (fileNames[i].includes('png')) {               await fs.outputFile(folder(fileNames[i]), files[i], 'base64')             \/\/ \u0438\u043d\u0430\u0447\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u043a\u0443 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e             } else {               await fs.outputFile(folder(fileNames[i]), files[i])             }           }            \/\/ \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0431 \u0443\u0441\u043f\u0435\u0445\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438           return vscode.window.showInformationMessage(             'All files created successfully'           )         } catch {           \/\/ \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435           return vscode.window.showErrorMessage('Failed to create files')         }       })()     }   )    context.subscriptions.push(disposable) }  export function deactivate() {} <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b TypeScript \u043d\u0435 \u043e\u0431\u0440\u0430\u0449\u0430\u043b \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u043d\u0430 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0442\u0438\u043f\u043e\u0432 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432-\u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c src\/global.d.ts \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u044f:<\/p>\n<pre><code class=\"javascript\">declare module '*' <\/code><\/pre>\n<p>  \u041f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435. \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0435\u0433\u043e \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435:<\/p>\n<pre><code class=\"javascript\">cd htmltemplate code . <\/code><\/pre>\n<p>  \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043e\u0442\u043b\u0430\u0434\u043a\u0443 (F5). \u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \u0446\u0435\u043b\u0435\u0432\u0443\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e (test-dir, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440) \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 create \u0432 Command Palette.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/a_\/aa\/wr\/a_aawrv85qgj94wu89vxyjyiyao.png\"><\/p>\n<p>  \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0431 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0444\u0430\u0439\u043b\u043e\u0432. \u0423\u0440\u0430!<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/uo\/if\/yy\/uoifyy20ffjoz4teiaxlbd_0csi.png\"><\/p>\n<h6>\u041f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u044f \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0432 Visual Studio Marketplace<\/h6>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0434\u043b\u044f VSCode, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<ul>\n<li>\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u0430\u043a\u043a\u0430\u0443\u043d\u0442 \u0432 <a href=\"https:\/\/marketplace.visualstudio.com\/\" rel=\"nofollow\">\u043c\u0430\u0440\u043a\u0435\u0442\u043f\u043b\u0435\u0439\u0441\u0435<\/a> (\u0437\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044f publisher)<\/li>\n<li>\u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 <a href=\"https:\/\/www.npmjs.com\/package\/vsce\" rel=\"nofollow\">vsce<\/a><\/li>\n<\/ul>\n<p>  \u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c package.json:<\/p>\n<pre><code class=\"json\">{   &quot;name&quot;: &quot;htmltemplate&quot;,   &quot;displayName&quot;: &quot;HTML Template&quot;,   &quot;description&quot;: &quot;Modern HTML Starter Template&quot;,   &quot;version&quot;: &quot;1.0.0&quot;,   &quot;publisher&quot;: &quot;puslisher-name&quot;,   &quot;license&quot;: &quot;MIT&quot;,   &quot;keywords&quot;: [     &quot;html&quot;,     &quot;html5&quot;,     &quot;css&quot;,     &quot;css3&quot;,     &quot;javascript&quot;,     &quot;js&quot;   ],   &quot;icon&quot;: &quot;build\/128x128.png&quot;,   &quot;author&quot;: {     &quot;name&quot;: &quot;Author Name @githubusername&quot;   },   &quot;repository&quot;: {     &quot;type&quot;: &quot;git&quot;,     &quot;url&quot;: &quot;https:\/\/github.com\/username\/dirname&quot;   },   &quot;engines&quot;: {     &quot;vscode&quot;: &quot;^1.51.0&quot;   },   &quot;categories&quot;: [     &quot;Snippets&quot;   ],   &quot;activationEvents&quot;: [     &quot;onCommand:htmltemplate.create&quot;   ],   &quot;main&quot;: &quot;.\/dist\/extension.js&quot;,   &quot;contributes&quot;: {     &quot;commands&quot;: [       {         &quot;command&quot;: &quot;htmltemplate.create&quot;,         &quot;title&quot;: &quot;Create Template&quot;       }     ]   },   ... } <\/code><\/pre>\n<p>  \u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c README.md.<\/p>\n<p>  \u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 vsce package \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0443\u0431\u043b\u0438\u043a\u0443\u0435\u043c\u043e\u0433\u043e \u043f\u0430\u043a\u0435\u0442\u0430 \u0441 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c vsix. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0444\u0430\u0439\u043b htmltemplate-1.0.0.vsix.<\/p>\n<p>  \u041d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f\u043c\u0438 \u043c\u0430\u0440\u043a\u0435\u0442\u043f\u043b\u0435\u0439\u0441\u0430 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 New extension \u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c Visual Studio Code. \u041f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u043c \u0438\u043b\u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0432 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e VSIX-\u0444\u0430\u0439\u043b. \u0416\u0434\u0435\u043c \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/b9\/zb\/x0\/b9zbx0-l88sfud3hmiir2anfmki.png\"><\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0440\u044f\u0434\u043e\u043c \u0441 \u043d\u043e\u043c\u0435\u0440\u043e\u043c \u0432\u0435\u0440\u0441\u0438\u0438 \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0437\u0435\u043b\u0435\u043d\u0430\u044f \u0433\u0430\u043b\u043e\u0447\u043a\u0430, \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0432 VSCode.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/it\/bv\/jz\/itbvjzt-awgoxuhrhanog3yt-qa.png\"><\/p>\n<p>  \u0414\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u043e\u043c\u0435\u0440 \u0432\u0435\u0440\u0441\u0438\u0438 \u0432 package.json, \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c VSIX-\u0444\u0430\u0439\u043b \u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u043c\u0430\u0440\u043a\u0435\u0442\u043f\u043b\u0435\u0439\u0441, \u043d\u0430\u0436\u0430\u0432 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 More actions \u0438 \u0432\u044b\u0431\u0440\u0430\u0432 Update.<\/p>\n<p>  \u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0438 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0439 \u0434\u043b\u044f VSCode \u043d\u0435\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u0432\u0435\u0440\u0445\u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e. \u041d\u0430 \u044d\u0442\u043e\u043c \u043f\u043e\u0437\u0432\u043e\u043b\u044c\u0442\u0435 \u043e\u0442\u043a\u043b\u0430\u043d\u044f\u0442\u044c\u0441\u044f.<\/p>\n<p>  \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u043e\u0442 Heroku \u2014 <a href=\"https:\/\/oclif.io\/\" rel=\"nofollow\">oclif<\/a>, \u0437\u0430\u0442\u0435\u043c \u0431\u0435\u0437 \u043d\u0435\u0433\u043e. \u041d\u0430\u0448 Node.js-CLI \u0431\u0443\u0434\u0435\u0442 \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f, \u0432 \u043d\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 git \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439.<\/p>\n<p>  \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0432\u044b \u043d\u0430\u0448\u043b\u0438 \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435.<\/p><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/531312\/\"> https:\/\/habr.com\/ru\/post\/531312\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/-k\/fc\/ys\/-kfcysceba5k9gas9jelvik4utu.png\"><\/p>\n<p>  \u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  \u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 <a href=\"https:\/\/github.com\/harryheman\/Modern-HTML-Starter-Template\" rel=\"nofollow\">\u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u043e\u0433\u043e HTML-\u0448\u0430\u0431\u043b\u043e\u043d\u0430<\/a> \u044f \u0437\u0430\u0434\u0443\u043c\u0430\u043b\u0441\u044f \u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f. \u041d\u0430 \u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u043b\u0438\u0441\u044c \u043a\u043b\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u0438 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435\u043c \u0430\u0440\u0445\u0438\u0432\u0430. \u0422\u0430\u043a \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c <a href=\"https:\/\/raw.githubusercontent.com\/harryheman\/Modern-HTML-Starter-Template\/main\/tools\/vscode-html-snippet.json\" rel=\"nofollow\">HTML-\u0441\u043d\u0438\u043f\u043f\u0435\u0442<\/a> \u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0434\u043b\u044f Microsoft Visual Studio Code \u2014 <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=igor-agapov.htmltemplate\" rel=\"nofollow\">HTML Template<\/a>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u2014 <a href=\"https:\/\/www.npmjs.com\/package\/create-modern-template\" rel=\"nofollow\">create-modern-template<\/a>. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u0430\u043b\u0435\u043a\u0438 \u043e\u0442 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u0430 \u0438 \u044f \u0431\u0443\u0434\u0443 \u0438\u0445 \u0434\u043e\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u043e \u043c\u0435\u0440\u0435 \u0441\u0438\u043b \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439. \u041e\u0434\u043d\u0430\u043a\u043e, \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0438\u0445 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044f \u0443\u0437\u043d\u0430\u043b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u0432\u0435\u0449\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0438 \u0445\u043e\u0447\u0443 \u0441 \u0432\u0430\u043c\u0438 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f.<\/p>\n<p>  \u0412 \u044d\u0442\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043d\u0438\u043f\u043f\u0435\u0442 \u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435, \u0430 CLI \u2014 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439.<\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u043b\u0438\u0448\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434, <a href=\"https:\/\/github.com\/harryheman\/Modern-HTML-Starter-Template\/tree\/main\/tools\" rel=\"nofollow\">\u0432\u043e\u0442 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439<\/a>.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-314329","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/314329","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=314329"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/314329\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=314329"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=314329"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=314329"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}