{"id":8179,"date":"2023-02-24T09:39:19","date_gmt":"2023-02-24T06:09:19","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/creating-and-publishing-a-vs-code-extension-a-step-by-step-guide-with-javascript-5ep1\/"},"modified":"2023-02-24T09:39:19","modified_gmt":"2023-02-24T06:09:19","slug":"creating-and-publishing-a-vs-code-extension-a-step-by-step-guide-with-javascript-5ep1","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/creating-and-publishing-a-vs-code-extension-a-step-by-step-guide-with-javascript-5ep1\/","title":{"rendered":"\u0627\u06cc\u062c\u0627\u062f \u0648 \u0627\u0646\u062a\u0634\u0627\u0631 \u06cc\u06a9 \u067e\u0633\u0648\u0646\u062f \u06a9\u062f VS: \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a"},"content":{"rendered":"<div data-article-id=\"1374603\" id=\"article-body\">\n<p>\u0645\u0646 \u0627\u062e\u06cc\u0631\u0627\u064b \u0628\u0647 \u06cc\u06a9 \u0627\u0641\u0632\u0648\u0646\u0647 \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u0648 \u0633\u0631\u06af\u0631\u0645 \u06a9\u0646\u0646\u062f\u0647 \u0628\u0631\u0627\u06cc VS Code \u0628\u0647 \u0646\u0627\u0645 vscode-pets \u0628\u0631\u062e\u0648\u0631\u062f\u0645 \u06a9\u0647 \u062a\u0648\u0633\u0637 <a href=\"https:\/\/twitter.com\/anthonypjshaw\" rel=\"nofollow noopener\" target=\"_blank\">\u0622\u0646\u062a\u0648\u0646\u06cc \u0634\u0627\u0648<\/a>.  \u0627\u06cc\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u06cc \u06cc\u06a9 \u062d\u06cc\u0648\u0627\u0646 \u062e\u0627\u0646\u06af\u06cc \u0645\u062c\u0627\u0632\u06cc \u0645\u0627\u0646\u0646\u062f \u0633\u06af\ud83d\udc36 \u0631\u0627 \u0628\u0647 \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0634\u0645\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0628\u0627\u0639\u062b \u062d\u0648\u0627\u0633 \u067e\u0631\u062a\u06cc \u0627\u0632 \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u0645\u06cc \u0634\u0648\u062f.  \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u062d\u06cc\u0648\u0627\u0646 \u062e\u0627\u0646\u06af\u06cc \u062f\u06cc\u06af\u0631 \u0628\u0631\u0627\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f.<\/p>\n<p>\u0627\u0641\u0632\u0648\u0646\u0647 \u0647\u0627\u06cc VS Code \u067e\u0644\u0627\u06af\u06cc\u0646 \u0647\u0627\u06cc\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u062a\u062c\u0631\u0628\u0647 \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u0634\u0645\u0627 \u0631\u0627 \u0628\u0627 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u06a9\u062f \u0648\u06cc\u0698\u0648\u0627\u0644 \u0627\u0633\u062a\u0648\u062f\u06cc\u0648 \u0628\u0647\u0628\u0648\u062f \u0628\u062e\u0634\u0646\u062f.  \u0622\u0646\u0647\u0627 \u0637\u06cc\u0641 \u0648\u0633\u06cc\u0639\u06cc \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u0646\u062f\u060c \u0627\u0632 \u062c\u0645\u0644\u0647 \u0628\u0631\u062c\u0633\u062a\u0647 \u06a9\u0631\u062f\u0646 \u0646\u062d\u0648\u060c \u0642\u0627\u0644\u0628 \u0628\u0646\u062f\u06cc \u06a9\u062f\u060c \u0627\u0634\u06a9\u0627\u0644 \u0632\u062f\u0627\u06cc\u06cc\u060c \u0622\u0632\u0645\u0627\u06cc\u0634\u060c \u067e\u0631\u062f\u0647\u060c \u0642\u0637\u0639\u0647\u060c \u062a\u0645 \u0647\u0627\u060c \u0646\u0645\u0627\u062f\u0647\u0627 \u0648 \u0645\u0648\u0627\u0631\u062f \u062f\u06cc\u06af\u0631.  VS Code \u0628\u0627 \u062f\u0631 \u0646\u0638\u0631 \u06af\u0631\u0641\u062a\u0646 \u062a\u0648\u0633\u0639\u0647 \u067e\u0630\u06cc\u0631\u06cc \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a \u0648 \u0634\u062e\u0635\u06cc \u0633\u0627\u0632\u06cc \u0648 \u0645\u062a\u0646\u0627\u0633\u0628 \u0628\u0627 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u0634\u0645\u0627 \u0631\u0627 \u0622\u0633\u0627\u0646 \u0645\u06cc \u06a9\u0646\u062f.  \u0628\u0627\u0632\u0627\u0631 VS Code \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0628\u06cc\u0634 \u0627\u0632 30000 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646\u06cc \u0632\u0628\u0627\u0646 \u0648 \u062a\u0645 \u062a\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646\u06cc \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0648 \u062d\u062a\u06cc \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0633\u0631\u06af\u0631\u0645 \u06a9\u0646\u0646\u062f\u0647 \u0648 \u0639\u062c\u06cc\u0628 \u0631\u0627 \u0634\u0627\u0645\u0644 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u0627\u06cc\u062c\u0627\u062f \u0627\u0641\u0632\u0648\u0646\u0647 VS Code \u062e\u0648\u062f\u060c \u0628\u0627\u06cc\u062f Node.js \u0631\u0627 \u0631\u0648\u06cc \u0633\u06cc\u0633\u062a\u0645 \u062e\u0648\u062f \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f.  \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 Node.js \u0631\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0631\u062f\u06cc\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u06cc\u06a9 \u0627\u0628\u0632\u0627\u0631 \u062e\u0637 \u0641\u0631\u0645\u0627\u0646 \u0628\u0647 \u0646\u0627\u0645 yo (\u0645\u062e\u0641\u0641 Yeoman) \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0627\u0644\u06af\u0648\u06cc \u067e\u0631\u0648\u0698\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.  \u0627\u06cc\u0646 \u0627\u0644\u06af\u0648 \u06cc\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 \u0648 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u0627\u0633\u0627\u0633\u06cc \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u06cc \u0634\u0645\u0627\u060c \u0627\u0632 \u062c\u0645\u0644\u0647 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0645\u0627\u0646\u06cc\u0641\u0633\u062a \u06a9\u0647 \u0645\u062a\u0627\u062f\u06cc\u062a\u0627 \u0648 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u06cc \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f\u060c \u062f\u0631 \u0627\u062e\u062a\u06cc\u0627\u0631 \u0634\u0645\u0627 \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u062f.  \u0633\u067e\u0633 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u06cc\u0646 \u0627\u0644\u06af\u0648 \u0631\u0627 \u0633\u0641\u0627\u0631\u0634\u06cc \u06a9\u0631\u062f\u0647 \u0648 \u0628\u0631 \u0631\u0648\u06cc \u0622\u0646 \u0628\u0633\u0627\u0632\u06cc\u062f \u062a\u0627 \u0639\u0645\u0644\u06a9\u0631\u062f \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u062e\u0648\u062f \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f. <\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/creating-and-publishing-a-vs-code-extension-a-step-by-step-guide-with-javascript-5ep1\/#%D9%85%D8%B4%DA%A9%D9%84\" >\u0645\u0634\u06a9\u0644<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/creating-and-publishing-a-vs-code-extension-a-step-by-step-guide-with-javascript-5ep1\/#%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D9%85%D8%AD%DB%8C%D8%B7_%D8%AA%D9%88%D8%B3%D8%B9%D9%87\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u062d\u06cc\u0637 \u062a\u0648\u0633\u0639\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/creating-and-publishing-a-vs-code-extension-a-step-by-step-guide-with-javascript-5ep1\/#%D8%A2%D9%86%D8%A7%D8%AA%D9%88%D9%85%DB%8C_%D9%BE%D8%B1%D9%88%DA%98%D9%87\" >\u0622\u0646\u0627\u062a\u0648\u0645\u06cc \u067e\u0631\u0648\u0698\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/creating-and-publishing-a-vs-code-extension-a-step-by-step-guide-with-javascript-5ep1\/#%D9%86%D9%82%D8%B7%D9%87_%D9%88%D8%B1%D9%88%D8%AF\" >\u0646\u0642\u0637\u0647 \u0648\u0631\u0648\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/creating-and-publishing-a-vs-code-extension-a-step-by-step-guide-with-javascript-5ep1\/#packagejson\" >package.json<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/creating-and-publishing-a-vs-code-extension-a-step-by-step-guide-with-javascript-5ep1\/#extensionjs\" >extension.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/creating-and-publishing-a-vs-code-extension-a-step-by-step-guide-with-javascript-5ep1\/#%D8%AF%D8%B1_%D8%AD%D8%A7%D9%84_%D8%A7%D9%86%D8%AA%D8%B4%D8%A7%D8%B1_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86%DB%8C_%D9%85%D8%A7\" >\u062f\u0631 \u062d\u0627\u0644 \u0627\u0646\u062a\u0634\u0627\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u06cc \u0645\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/creating-and-publishing-a-vs-code-extension-a-step-by-step-guide-with-javascript-5ep1\/#%D8%B1%D9%85%D8%B2_%D8%AF%D8%B3%D8%AA%D8%B1%D8%B3%DB%8C_%D8%B4%D8%AE%D8%B5%DB%8C\" >\u0631\u0645\u0632 \u062f\u0633\u062a\u0631\u0633\u06cc \u0634\u062e\u0635\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/creating-and-publishing-a-vs-code-extension-a-step-by-step-guide-with-javascript-5ep1\/#%D9%86%D8%A7%D8%B4%D8%B1\" >\u0646\u0627\u0634\u0631<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/creating-and-publishing-a-vs-code-extension-a-step-by-step-guide-with-javascript-5ep1\/#%D9%86%D8%B5%D8%A8_vsce\" >\u0646\u0635\u0628 vsce<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B4%DA%A9%D9%84\"><\/span>\n<p>  \u0645\u0634\u06a9\u0644<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>React \u0686\u0627\u0631\u0686\u0648\u0628 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0645\u0648\u0631\u062f \u0639\u0644\u0627\u0642\u0647 \u0645\u0646 \u0627\u0633\u062a \u0628\u0647 \u062f\u0644\u06cc\u0644 \u062a\u0637\u0628\u06cc\u0642 \u067e\u0630\u06cc\u0631\u06cc \u0648 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f\u0634.  \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u06af\u0627\u0647\u06cc \u0627\u0648\u0642\u0627\u062a \u0627\u06cc\u062c\u0627\u062f \u062d\u0627\u0644\u062a \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062f\u0631 React \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u06a9\u0645\u06cc \u062f\u0631\u062f\u0633\u0631\u0633\u0627\u0632 \u0628\u0627\u0634\u062f \u0648 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062a\u0627\u06cc\u067e \u0632\u06cc\u0627\u062f\u06cc \u062f\u0627\u0631\u062f.  \u062f\u0631 \u067e\u0633\u062a \u0627\u0645\u0631\u0648\u0632\u060c \u0645\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0648\u0636\u0648\u0639 \u0645\u06cc \u067e\u0631\u062f\u0627\u0632\u06cc\u0645 \u0648 \u0631\u0627\u0647 \u0647\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0645 \u06a9\u0631\u062f\u0646 \u0627\u06cc\u0646 \u0641\u0631\u0622\u06cc\u0646\u062f \u062e\u0633\u062a\u0647 \u06a9\u0646\u0646\u062f\u0647 \u062a\u0631 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645.  \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u062a\u0644\u0627\u0634\u06cc \u0628\u0631\u0627\u06cc \u0627\u0635\u0644\u0627\u062d \u06a9\u0644 \u0641\u0631\u06cc\u0645\u0648\u0631\u06a9 \u0646\u062f\u0627\u0631\u06cc\u0645\u060c \u0627\u0641\u0632\u0648\u0646\u0647\u200c\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0627\u06cc\u062c\u0627\u062f \u062d\u0627\u0644\u062a \u062f\u0631 \u0627\u062c\u0632\u0627\u06cc React \u0631\u0627 \u0633\u0627\u062f\u0647 \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">counter<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setCounter<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">);<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u062d\u0627\u0644\u062a \u0634\u0645\u0627\u0631\u0646\u062f\u0647 \u0633\u0627\u062f\u0647 \u062f\u0631 React \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0634\u0627\u0645\u0644 \u062a\u0627\u06cc\u067e \u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u0628\u0627\u0634\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062e\u0633\u062a\u0647 \u06a9\u0646\u0646\u062f\u0647 \u0648 \u0648\u0642\u062a \u06af\u06cc\u0631 \u0628\u0627\u0634\u062f.  \u0647\u0645\u0647 \u0645\u0627 \u0645\u06cc \u062f\u0627\u0646\u06cc\u0645 \u06a9\u0647 \u062a\u0627\u06cc\u067e \u0645\u06a9\u0631\u0631 \u0647\u0645\u0627\u0646 \u06a9\u062f \u0686\u0642\u062f\u0631 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062e\u0633\u062a\u0647 \u06a9\u0646\u0646\u062f\u0647 \u0628\u0627\u0634\u062f\u060c \u062f\u0631\u0633\u062a \u0627\u0633\u062a\u061f  \u0627\u06cc\u0646\u062c\u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u06cc \u062c\u062f\u06cc\u062f \u0645\u0627\u060c react-setstate \u0648\u0627\u0631\u062f \u0645\u06cc\u200c\u0634\u0648\u062f. \u0628\u0627 \u0627\u06cc\u0646 \u0627\u0641\u0632\u0648\u0646\u0647\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u062d\u0627\u0644\u062a \u0631\u0627 \u062a\u0646\u0647\u0627 \u0628\u0627 \u0686\u0646\u062f \u0636\u0631\u0628\u0647 \u06a9\u0644\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 \u0648 \u062f\u0631 \u0648\u0642\u062a \u0648 \u062a\u0644\u0627\u0634 \u0645\u0627 \u0635\u0631\u0641\u0647\u200c\u062c\u0648\u06cc\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D9%85%D8%AD%DB%8C%D8%B7_%D8%AA%D9%88%D8%B3%D8%B9%D9%87\"><\/span>\n<p>  \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u062d\u06cc\u0637 \u062a\u0648\u0633\u0639\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u06a9\u0627\u0631 \u0628\u0627 \u0627\u06cc\u062c\u0627\u062f \u067e\u0633\u0648\u0646\u062f Visual Studio Code\u060c \u0628\u0627\u06cc\u062f \u062f\u0648 \u0628\u0633\u062a\u0647 yo \u0648 generator-code \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u0645.  \u0627\u06cc\u0646\u0647\u0627 \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0628\u0647 \u0635\u0648\u0631\u062a \u0633\u0631\u0627\u0633\u0631\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 npm \u0628\u0627 \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0646\u0635\u0628 \u06a9\u0631\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"nx\">npm<\/span> <span class=\"nx\">install<\/span> <span class=\"o\">-<\/span><span class=\"nx\">g<\/span> <span class=\"nx\">yo<\/span> <span class=\"nx\">generator<\/span><span class=\"o\">-<\/span><span class=\"nx\">code<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><code>yo<\/code>  \u06cc\u06a9 \u0627\u0628\u0632\u0627\u0631 \u062f\u0627\u0631\u0628\u0633\u062a \u0645\u062d\u0628\u0648\u0628 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u062c\u062f\u06cc\u062f\u06cc \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0698\u0646\u0631\u0627\u062a\u0648\u0631\u0647\u0627\u06cc \u0642\u0627\u0628\u0644 \u062a\u0646\u0638\u06cc\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u0646\u062f. <code>generator-code<\/code> \u06cc\u06a9 \u0698\u0646\u0631\u0627\u062a\u0648\u0631 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0627\u0635 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u067e\u0633\u0648\u0646\u062f\u0647\u0627\u06cc Visual Studio Code \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a.  \u0628\u0627 \u0646\u0635\u0628 \u0627\u06cc\u0646 \u062f\u0648 \u0628\u0633\u062a\u0647\u060c \u0645\u0627 \u0642\u0627\u062f\u0631 \u062e\u0648\u0627\u0647\u06cc\u0645 \u0628\u0648\u062f \u0628\u0647 \u0633\u0631\u0639\u062a \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u0627\u0641\u0632\u0648\u0646\u0647 \u062c\u062f\u06cc\u062f \u062a\u0648\u0644\u06cc\u062f \u06a9\u0646\u06cc\u0645 \u0648 \u0628\u0644\u0627\u0641\u0627\u0635\u0644\u0647 \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u0631\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645!<\/p>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u0628\u0633\u062a\u0647 \u0647\u0627\u06cc \u0644\u0627\u0632\u0645 \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0634\u0631\u0648\u0639 \u0628\u0647 \u0633\u0627\u062e\u062a \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u06a9\u0646\u06cc\u0645.  \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u062e\u0648\u062f \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0631\u062f\u0647 \u0648 \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"nx\">yo<\/span> <span class=\"nx\">code<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u06cc\u06a9 \u067e\u0648\u0633\u062a\u0647 \u062a\u0639\u0627\u0645\u0644\u06cc \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0645\u0627 \u0631\u0627 \u062f\u0631 \u0631\u0648\u0646\u062f \u0627\u06cc\u062c\u0627\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u06cc \u062c\u062f\u06cc\u062f \u0631\u0627\u0647\u0646\u0645\u0627\u06cc\u06cc \u0645\u06cc \u06a9\u0646\u062f.  \u0627\u0632 \u0645\u0627 \u062e\u0648\u0627\u0633\u062a\u0647 \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u062c\u0632\u0626\u06cc\u0627\u062a \u0645\u062e\u062a\u0644\u0641\u06cc \u0631\u0627 \u062f\u0631 \u0645\u0648\u0631\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u06cc \u062e\u0648\u062f \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u0645\u060c \u0645\u0627\u0646\u0646\u062f \u0646\u0627\u0645\u060c \u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u0648 \u0646\u0648\u0639 \u0627\u0641\u0632\u0648\u0646\u0647 \u0627\u06cc \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645.  \u0628\u0627 \u067e\u06cc\u0631\u0648\u06cc \u0627\u0632 \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0648 \u067e\u0627\u0633\u062e \u062f\u0627\u062f\u0646 \u0628\u0647 \u0633\u0648\u0627\u0644\u0627\u062a\u060c \u0645\u0627 \u0642\u0627\u062f\u0631 \u062e\u0648\u0627\u0647\u06cc\u0645 \u0628\u0648\u062f \u0628\u0647 \u0633\u0631\u0639\u062a \u062f\u0627\u0631\u0628\u0633\u062a \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u06cc \u062c\u062f\u06cc\u062f \u062e\u0648\u062f \u062a\u0648\u0644\u06cc\u062f \u06a9\u0646\u06cc\u0645 \u0648 \u0634\u0631\u0648\u0639 \u0628\u0647 \u0633\u0627\u062e\u062a \u06a9\u062f \u062e\u0648\u062f \u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>     _-----_     \u256d\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\n    |       |    \u2502   Welcome to the Visual  \u2502\n    |--<span class=\"o\">(<\/span>o<span class=\"o\">)<\/span><span class=\"nt\">--<\/span>|    \u2502   Studio Code Extension  \u2502\n   <span class=\"sb\">`<\/span><span class=\"nt\">---------<\/span>\u00b4   \u2502        generator!        \u2502\n    <span class=\"o\">(<\/span> _\u00b4U<span class=\"sb\">`<\/span>_ <span class=\"o\">)<\/span>    \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\n    \/___A___<span class=\"se\">\\ <\/span>  \/\n     |  ~  |\n   __<span class=\"s1\">'.___.'<\/span>__\n \u00b4   <span class=\"sb\">`<\/span>  |\u00b0 \u00b4 Y <span class=\"sb\">`<\/span>\n\n? What <span class=\"nb\">type <\/span>of extension <span class=\"k\">do <\/span>you want to create? New Extension <span class=\"o\">(<\/span>JavaScript<span class=\"o\">)<\/span>\n? What<span class=\"s1\">'s the name of your extension? react-setstate\n? What'<\/span>s the identifier of your extension? react-setstate\n? What<span class=\"s1\">'s the description of your extension? set state in react\n? Enable JavaScript type checking in '<\/span>jsconfig.json<span class=\"s1\">'? No\n? Initialize a git repository? Yes\n? Which package manager to use? npm\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0628\u0647 \u062a\u0645\u0627\u0645 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u067e\u0648\u0633\u062a\u0647 \u062a\u0639\u0627\u0645\u0644\u06cc yo \u067e\u0627\u0633\u062e \u062f\u0627\u062f\u06cc\u0645\u060c \u0628\u0631 \u0627\u0633\u0627\u0633 \u0648\u0631\u0648\u062f\u06cc\u200c\u0647\u0627\u06cc \u0645\u0627 \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f\u06cc \u0628\u0631\u0627\u06cc \u0645\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f.  \u0628\u0627 \u0631\u0641\u062a\u0646 \u0628\u0647 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0622\u0646 \u062f\u0631 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u0648 \u0627\u062c\u0631\u0627\u06cc \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u062f\u0631 Visual Studio Code \u0628\u0627\u0632 \u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"nx\">code<\/span> <span class=\"p\">.<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A2%D9%86%D8%A7%D8%AA%D9%88%D9%85%DB%8C_%D9%BE%D8%B1%D9%88%DA%98%D9%87\"><\/span>\n<p>  \u0622\u0646\u0627\u062a\u0648\u0645\u06cc \u067e\u0631\u0648\u0698\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0631\u0648\u0698\u0647 \u0645\u0627 \u0628\u0627\u06cc\u062f \u0686\u06cc\u0632\u06cc \u0634\u0628\u06cc\u0647 \u0628\u0647 \u0627\u06cc\u0646 \u0628\u0627\u0634\u062f\u060c \u0627\u06af\u0631 TypeScript \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u062f\u0647 \u0628\u0627\u0634\u06cc\u062f\u060c \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0686\u0646\u062f \u0641\u0627\u06cc\u0644 \u0627\u0636\u0627\u0641\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f.  \u0645\u0627 \u062a\u0645\u0627\u0645 \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0645\u0631\u0648\u0631 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f \u0648 \u062f\u0644\u06cc\u0644 \u0648\u062c\u0648\u062f \u0622\u0646\u0647\u0627 \u0631\u0627 \u062a\u0648\u0636\u06cc\u062d \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"err\">\u251c\u2500\u2500<\/span> <span class=\"p\">.<\/span><span class=\"nx\">vscode<\/span> <span class=\"c1\">\/\/ launch a new window for testing <\/span>\n<span class=\"err\">\u2502<\/span>   <span class=\"err\">\u251c\u2500\u2500<\/span> <span class=\"nx\">launch<\/span><span class=\"p\">.<\/span><span class=\"nx\">json<\/span>    \n<span class=\"err\">\u2502<\/span>   <span class=\"err\">\u2514\u2500\u2500<\/span> <span class=\"nx\">tasks<\/span><span class=\"p\">.<\/span><span class=\"nx\">json<\/span> \n<span class=\"err\">\u251c\u2500\u2500<\/span> <span class=\"nx\">node_modules<\/span>  <span class=\"c1\">\/\/node_modules<\/span>\n<span class=\"err\">\u251c\u2500\u2500<\/span> <span class=\"nx\">test<\/span> <span class=\"c1\">\/\/tests<\/span>\n<span class=\"err\">\u2502<\/span>   <span class=\"err\">\u251c\u2500\u2500<\/span>  <span class=\"nx\">suite<\/span>\n<span class=\"err\">\u2502<\/span>   <span class=\"err\">\u251c\u2500\u2500<\/span> <span class=\"err\">\u251c\u2500\u2500<\/span> <span class=\"nx\">extension<\/span><span class=\"p\">.<\/span><span class=\"nx\">test<\/span><span class=\"p\">.<\/span><span class=\"nx\">js<\/span>       \n<span class=\"err\">\u2502<\/span>   <span class=\"err\">\u2514\u2500\u2500<\/span> <span class=\"nx\">runTest<\/span><span class=\"p\">.<\/span><span class=\"nx\">js<\/span>     \n<span class=\"err\">\u251c\u2500\u2500<\/span> <span class=\"p\">.<\/span><span class=\"nx\">eslintrc<\/span><span class=\"p\">.<\/span><span class=\"nx\">json<\/span> <span class=\"c1\">\/\/ ESLint config<\/span>\n<span class=\"err\">\u251c\u2500\u2500<\/span> <span class=\"p\">.<\/span><span class=\"nx\">gitignore<\/span> <span class=\"c1\">\/\/ignore node_modules and other specified files<\/span>\n<span class=\"err\">\u251c\u2500\u2500<\/span> <span class=\"p\">.<\/span><span class=\"nx\">vscodeignore<\/span>   <span class=\"c1\">\/\/ignore files we don't have published<\/span>\n<span class=\"err\">\u251c\u2500\u2500<\/span> <span class=\"nx\">CHANGELOG<\/span><span class=\"p\">.<\/span><span class=\"nx\">md<\/span> <span class=\"c1\">\/\/keep track of changes<\/span>\n<span class=\"err\">\u251c\u2500\u2500<\/span> <span class=\"nx\">extension<\/span><span class=\"p\">.<\/span><span class=\"nx\">js<\/span> <span class=\"c1\">\/\/source code<\/span>\n<span class=\"err\">\u251c\u2500\u2500<\/span> <span class=\"nx\">jsconfig<\/span><span class=\"p\">.<\/span><span class=\"nx\">json<\/span>   <span class=\"c1\">\/\/JS config  <\/span>\n<span class=\"err\">\u251c\u2500\u2500<\/span> <span class=\"kr\">package<\/span><span class=\"o\">-<\/span><span class=\"nx\">lock<\/span><span class=\"p\">.<\/span><span class=\"nx\">json<\/span> <span class=\"c1\">\/\/generated by npm   <\/span>\n<span class=\"err\">\u251c\u2500\u2500<\/span> <span class=\"kr\">package<\/span><span class=\"p\">.<\/span><span class=\"nx\">json<\/span> <span class=\"c1\">\/\/manifest    <\/span>\n<span class=\"err\">\u251c\u2500\u2500<\/span> <span class=\"nx\">README<\/span><span class=\"p\">.<\/span><span class=\"nx\">md<\/span>  <span class=\"c1\">\/\/info about extension<\/span>\n<span class=\"err\">\u251c\u2500\u2500<\/span> <span class=\"nx\">vsc<\/span><span class=\"o\">-<\/span><span class=\"nx\">extension<\/span><span class=\"o\">-<\/span><span class=\"nx\">quickstart<\/span><span class=\"p\">.<\/span><span class=\"nx\">md<\/span> <span class=\"c1\">\/\/quick start guide <\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u0631\u0627 <code>launch.json<\/code> \u0648 <code>tasks.json<\/code> \u0628\u0631\u0627\u06cc \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06cc\u06a9 \u067e\u0646\u062c\u0631\u0647 \u062c\u062f\u06cc\u062f \u0627\u0632 \u06a9\u062f VS \u0628\u0631\u0627\u06cc \u0622\u0632\u0645\u0627\u06cc\u0634 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<li>\n<code>node_modules<\/code>  &#8211; node_modules \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u0645\u0627.<\/li>\n<li>\u0631\u0627 <code>test<\/code> \u067e\u0648\u0634\u0647 \u0634\u0627\u0645\u0644 \u062a\u0645\u0627\u0645 \u062a\u0633\u062a \u0647\u0627\u06cc \u067e\u0633\u0648\u0646\u062f \u0645\u0627 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f. <\/li>\n<li>\n<code>.eslintrc.json<\/code>  \u0634\u0627\u0645\u0644 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc ESLint \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.<\/li>\n<li>\n<code>.gitignore<\/code>  \u062d\u0627\u0648\u06cc \u0644\u06cc\u0633\u062a\u06cc \u0627\u0632 \u0646\u0627\u0645 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627 \u0648\/\u06cc\u0627 \u067e\u0648\u0634\u0647\u200c\u0647\u0627\u06cc\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0648\u0642\u062a\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u06cc \u0645\u0627 \u0631\u0627 \u0628\u0647 \u067e\u0644\u062a\u0641\u0631\u0645 \u06a9\u0646\u062a\u0631\u0644 \u0646\u0633\u062e\u0647 \u0645\u0627\u0646\u0646\u062f Github \u0641\u0634\u0627\u0631 \u0645\u06cc\u200c\u062f\u0647\u06cc\u062f\u060c \u062f\u0631\u062c \u0646\u0645\u06cc\u200c\u0634\u0648\u062f.<\/li>\n<li>\n<code>.vscodeignore<\/code>  \u062d\u0627\u0648\u06cc \u0644\u06cc\u0633\u062a\u06cc \u0627\u0632 \u0646\u0627\u0645 \u0641\u0627\u06cc\u0644 \u0647\u0627 \u0648\/\u06cc\u0627 \u067e\u0648\u0634\u0647 \u0647\u0627\u06cc\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627\u06cc\u062f \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a \u067e\u0633 \u0627\u0632 \u0627\u0646\u062a\u0634\u0627\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u06cc \u062e\u0648\u062f \u0645\u0646\u062a\u0634\u0631 \u0634\u0648\u0646\u062f.<\/li>\n<li>\n<code>CHANGELOG.md<\/code>  \u0628\u0631\u0627\u06cc \u067e\u06cc\u06af\u06cc\u0631\u06cc \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a\u06cc \u06a9\u0647 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u06cc \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<li>\n<code>extension.js<\/code>  \u0627\u06cc\u0646\u062c\u0627\u0633\u062a \u06a9\u0647 \u0645\u0627 \u06a9\u062f\/\u0645\u0646\u0637\u0642 \u0631\u0627 \u062f\u0631 \u067e\u0633 \u067e\u0633\u0648\u0646\u062f (\u0646\u0642\u0637\u0647 \u0648\u0631\u0648\u062f\u06cc) \u062e\u0648\u062f \u0645\u06cc \u0646\u0648\u06cc\u0633\u06cc\u0645.<\/li>\n<li>\n<code>jsconfig.json<\/code>  \u0634\u0627\u0645\u0644 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0645\u0627 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f<\/li>\n<li>\n<code>package.json<\/code>  \u0641\u0627\u06cc\u0644 \u0645\u0627\u0646\u06cc\u0641\u0633\u062a \u0647\u0631 \u067e\u0631\u0648\u0698\u0647 Node.js \u0627\u0633\u062a \u0648 \u062d\u0627\u0648\u06cc \u0627\u0628\u0631\u062f\u0627\u062f\u0647 \u067e\u0631\u0648\u0698\u0647 \u0627\u0633\u062a.<\/li>\n<li>\n<code>README.md<\/code>  \u062d\u0627\u0648\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u06cc \u0645\u0627 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.<\/li>\n<li>\n<code>vsc-extension-quickstart.md<\/code>  \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0634\u0631\u0648\u0639 \u0633\u0631\u06cc\u0639 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627 \u067e\u0631\u0648\u0698\u0647 \u0645\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D9%82%D8%B7%D9%87_%D9%88%D8%B1%D9%88%D8%AF\"><\/span>\n<p>  \u0646\u0642\u0637\u0647 \u0648\u0631\u0648\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0627\u0632 \u06a9\u0646 <code>extension.js<\/code> \u0641\u0627\u06cc\u0644\u06cc \u06a9\u0647 \u062d\u0627\u0648\u06cc \u06a9\u062f \u062f\u06cc\u06af \u0628\u062e\u0627\u0631 \u0648 \u0646\u0638\u0631\u0627\u062a \u0627\u0633\u062a.  \u0642\u0628\u0644 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u0628\u0647 \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc \u0622\u0646 \u0628\u067e\u0631\u062f\u0627\u0632\u06cc\u0645\u060c \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0628\u0647 \u0637\u0648\u0631 \u062e\u0644\u0627\u0635\u0647 \u06a9\u062f \u0631\u0627 \u062f\u0631\u06a9 \u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">vscode<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">require<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">vscode<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0627\u0698\u0648\u0644 API \u062a\u0648\u0633\u0639\u0647 \u067e\u0630\u06cc\u0631\u06cc vscode \u0631\u0627 \u0648\u0627\u0631\u062f \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">function<\/span> <span class=\"nx\">activate<\/span><span class=\"p\">(<\/span><span class=\"nx\">context<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Congratulations, your extension \"react-setstate\" is now active!<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"kd\">let<\/span> <span class=\"nx\">disposable<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">vscode<\/span><span class=\"p\">.<\/span><span class=\"nx\">commands<\/span><span class=\"p\">.<\/span><span class=\"nx\">registerCommand<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">react-setstate.helloWorld<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"kd\">function<\/span> <span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n\n        <span class=\"nx\">vscode<\/span><span class=\"p\">.<\/span><span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">showInformationMessage<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Hello World from react-setstate!<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"nx\">context<\/span><span class=\"p\">.<\/span><span class=\"nx\">subscriptions<\/span><span class=\"p\">.<\/span><span class=\"nx\">push<\/span><span class=\"p\">(<\/span><span class=\"nx\">disposable<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0648\u0631\u062f \u0641\u0648\u0642 \u0627\u0633\u062a <code>activate<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u06a9\u0647 \u0628\u0627 \u0641\u0639\u0627\u0644 \u0634\u062f\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u06cc \u0645\u0627 \u062a\u0645\u0627\u0633 \u0645\u06cc \u06af\u06cc\u0631\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">let<\/span> <span class=\"nx\">disposable<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">vscode<\/span><span class=\"p\">.<\/span><span class=\"nx\">commands<\/span><span class=\"p\">.<\/span><span class=\"nx\">registerCommand<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">react-setstate.helloWorld<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"kd\">function<\/span> <span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n\n        <span class=\"nx\">vscode<\/span><span class=\"p\">.<\/span><span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">showInformationMessage<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Hello World from react-setstate!<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0631\u0627 <code>react-setstate.helloWorld<\/code> \u06cc\u06a9 \u0634\u0646\u0627\u0633\u0647 \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0641\u0631\u0645\u0627\u0646 \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06cc\u06a9 \u0639\u0645\u0644 \u062e\u0627\u0635 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f.  \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 <code>react-setstate.helloWorld<\/code> \u062f\u0633\u062a\u0648\u0631 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f\u060c \u067e\u06cc\u0627\u0645\u06cc \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 &#8220;Hello World from react-setstate!&#8221;.  \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0634\u0646\u0627\u0633\u0647\u200c\u0647\u0627\u06cc \u0641\u0631\u0645\u0627\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0637\u0648\u0644\u0627\u0646\u06cc \u0628\u0627\u0634\u0646\u062f\u060c \u0648 \u062a\u0627\u06cc\u067e \u06a9\u0631\u062f\u0646 \u0622\u0646\u0647\u0627 \u062f\u0631 \u0647\u0631 \u0632\u0645\u0627\u0646 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u062e\u0633\u062a\u0647\u200c\u06a9\u0646\u0646\u062f\u0647 \u0628\u0627\u0634\u062f.  \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0631\u0627\u06cc \u0633\u0647\u0648\u0644\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647\u060c \u0646\u0627\u0645\u200c\u0647\u0627\u06cc \u0633\u0627\u062f\u0647\u200c\u062a\u0631\u06cc \u0631\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0634\u0646\u0627\u0633\u0647\u200c\u0647\u0627\u06cc \u0641\u0631\u0645\u0627\u0646 \u0627\u062e\u062a\u0635\u0627\u0635 \u062f\u0647\u06cc\u0645 <\/p>\n<h2><span class=\"ez-toc-section\" id=\"packagejson\"><\/span>\n<p>  package.json<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 <code>package.json<\/code> \u0641\u0627\u06cc\u0644\u060c \u062f\u0631 \u0632\u06cc\u0631 \u0642\u0633\u0645\u062a \u0645\u0634\u0627\u0631\u06a9\u062a\u060c \u0622\u0631\u0627\u06cc\u0647 \u0627\u06cc \u0628\u0647 \u0646\u0627\u0645 \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0634\u0627\u0645\u0644 \u0634\u0646\u0627\u0633\u0647 \u0641\u0631\u0645\u0627\u0646 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0627\u0633\u062a.  \u0628\u0647 \u0637\u0648\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636\u060c \u0639\u0646\u0648\u0627\u0646 <code>react-setstate.helloWorld<\/code> \u062f\u0633\u062a\u0648\u0631 \u0631\u0648\u06cc \u0686\u06cc\u0632\u06cc \u0628\u0647 \u06cc\u0627\u062f \u0645\u0627\u0646\u062f\u0646\u06cc \u062a\u0646\u0638\u06cc\u0645 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c &#8220;Hello World&#8221;.  \u0647\u0631 \u0634\u0646\u0627\u0633\u0647 \u062f\u0633\u062a\u0648\u0631 \u062c\u062f\u06cc\u062f\u06cc \u06a9\u0647 \u062b\u0628\u062a \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0627\u06cc\u0646 \u0622\u0631\u0627\u06cc\u0647 \u0627\u0636\u0627\u0641\u0647 \u0634\u0648\u062f.  \u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u06cc\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0641\u0634\u0627\u0631 \u062f\u0647\u06cc\u0645 <code>Ctrl + F5<\/code>\u060c \u06a9\u0647 \u06cc\u06a9 \u067e\u0646\u062c\u0631\u0647 VS Code \u062c\u062f\u06cc\u062f \u0628\u0627 \u0646\u0627\u0645 \u0628\u0627\u0632 \u0645\u06cc \u06a9\u0646\u062f<strong>[Extension Development Host]<\/strong>\u0628\u0631\u0627\u06cc \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u06cc \u062e\u0648\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0641\u0634\u0627\u0631 \u062f\u0647\u06cc\u0645 <code>Ctrl + Shift + P<\/code> \u0628\u0631\u0627\u06cc \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u067e\u0627\u0644\u062a \u0641\u0631\u0645\u0627\u0646\u060c \u0646\u0627\u0645\u06cc \u0631\u0627 \u06a9\u0647 \u067e\u0633\u0648\u0646\u062f \u062f\u0627\u062f\u0647 \u0627\u06cc\u0645 (\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f &#8220;Hello World&#8221;) \u062a\u0627\u06cc\u067e \u06a9\u0631\u062f\u0647 \u0648 Enter \u0631\u0627 \u0641\u0634\u0627\u0631 \u062f\u0647\u06cc\u062f. <\/p>\n<p><\/p>\n<p>\u0627\u06cc\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u06cc \u0645\u0627 \u0631\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u06cc \u06a9\u0646\u062f<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/02\/1677218956_801_\u0627\u06cc\u062c\u0627\u062f-\u0648-\u0627\u0646\u062a\u0634\u0627\u0631-\u06cc\u06a9-\u067e\u0633\u0648\u0646\u062f-\u06a9\u062f-VS-\u0631\u0627\u0647\u0646\u0645\u0627\u06cc-\u06af\u0627\u0645-\u0628\u0647.png\" alt=\"\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u06cc \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u0627\u0646\u062c\u0627\u0645 \u0634\u062f\" loading=\"lazy\" width=\"431\" height=\"44\" title=\"\"><\/p>\n<p>\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0645\u062a\u0648\u0642\u0641 \u06a9\u0646\u06cc\u0645 <code>Extension Development Host<\/code> \u0628\u0627 \u0641\u0634\u0627\u0631 \u062f\u0627\u062f\u0646 \u0645\u0631\u0628\u0639 \u0642\u0631\u0645\u0632<\/p>\n<h2><span class=\"ez-toc-section\" id=\"extensionjs\"><\/span>\n<p>  extension.js<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0628\u0633\u06cc\u0627\u0631 \u0637\u0648\u0644\u0627\u0646\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0628\u0631\u0627\u06cc \u0635\u0631\u0641\u0647 \u062c\u0648\u06cc\u06cc \u062f\u0631 \u0632\u0645\u0627\u0646\u060c \u06a9\u062f \u0631\u0627 \u067e\u06cc\u0633\u062a \u0645\u06cc \u06a9\u0646\u0645 \u0648 \u0633\u067e\u0633 \u062a\u0648\u0636\u06cc\u062d \u0645\u06cc \u062f\u0647\u0645 \u06a9\u0647 \u0647\u0631 \u0642\u0633\u0645\u062a \u0686\u0647 \u06a9\u0627\u0631\u06cc \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>\n<span class=\"kd\">const<\/span> <span class=\"nx\">vscode<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">require<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">vscode<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n<span class=\"cm\">\/**\n * @param {vscode.ExtensionContext} context\n *\/<\/span>\n<span class=\"kd\">function<\/span> <span class=\"nx\">activate<\/span><span class=\"p\">(<\/span><span class=\"nx\">context<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">let<\/span> <span class=\"nx\">disposable<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">vscode<\/span><span class=\"p\">.<\/span><span class=\"nx\">commands<\/span><span class=\"p\">.<\/span><span class=\"nx\">registerCommand<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">react-setstate.setState<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">inputText<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">vscode<\/span><span class=\"p\">.<\/span><span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">showInputBox<\/span><span class=\"p\">({<\/span>\n            <span class=\"na\">placeHolder<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Eg: show modal<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">prompt<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Enter the name of your state.<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n          <span class=\"p\">});<\/span>\n\n          <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">inputText<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">\"\"<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nx\">vscode<\/span><span class=\"p\">.<\/span><span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">showErrorMessage<\/span><span class=\"p\">(<\/span>\n              <span class=\"dl\">\"<\/span><span class=\"s2\">You need to type in something for this to work\ud83d\ude0a.<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"p\">);<\/span>\n            <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n          <span class=\"p\">}<\/span>\n\n          <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">inputText<\/span> <span class=\"o\">==<\/span> <span class=\"kc\">null<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n\n          <span class=\"kd\">const<\/span> <span class=\"nx\">words<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">inputText<\/span><span class=\"p\">.<\/span><span class=\"nx\">split<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\"> <\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n          <span class=\"kd\">const<\/span> <span class=\"nx\">stateList<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[];<\/span>\n          <span class=\"kd\">const<\/span> <span class=\"nx\">actionList<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[];<\/span>\n\n          <span class=\"k\">for<\/span> <span class=\"p\">(<\/span><span class=\"kd\">let<\/span> <span class=\"nx\">i<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span> <span class=\"nx\">i<\/span> <span class=\"o\">&lt;<\/span> <span class=\"nx\">words<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span><span class=\"p\">;<\/span> <span class=\"nx\">i<\/span><span class=\"o\">++<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">i<\/span> <span class=\"o\">!==<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n              <span class=\"nx\">stateList<\/span><span class=\"p\">.<\/span><span class=\"nx\">push<\/span><span class=\"p\">(<\/span><span class=\"nx\">capitalize<\/span><span class=\"p\">(<\/span><span class=\"nx\">words<\/span><span class=\"p\">[<\/span><span class=\"nx\">i<\/span><span class=\"p\">]));<\/span>\n            <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n              <span class=\"nx\">stateList<\/span><span class=\"p\">.<\/span><span class=\"nx\">push<\/span><span class=\"p\">(<\/span><span class=\"nx\">words<\/span><span class=\"p\">[<\/span><span class=\"nx\">i<\/span><span class=\"p\">]);<\/span>\n            <span class=\"p\">}<\/span>\n            <span class=\"nx\">actionList<\/span><span class=\"p\">.<\/span><span class=\"nx\">push<\/span><span class=\"p\">(<\/span><span class=\"nx\">capitalize<\/span><span class=\"p\">(<\/span><span class=\"nx\">words<\/span><span class=\"p\">[<\/span><span class=\"nx\">i<\/span><span class=\"p\">]));<\/span>\n          <span class=\"p\">}<\/span>\n\n          <span class=\"kd\">const<\/span> <span class=\"nx\">transformedState<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">stateList<\/span><span class=\"p\">.<\/span><span class=\"nx\">join<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n          <span class=\"kd\">const<\/span> <span class=\"nx\">transformedAction<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">set<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">actionList<\/span><span class=\"p\">.<\/span><span class=\"nx\">join<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n          <span class=\"kd\">const<\/span> <span class=\"nx\">text<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`const [<\/span><span class=\"p\">${<\/span><span class=\"nx\">transformedState<\/span><span class=\"p\">}<\/span><span class=\"s2\"> , <\/span><span class=\"p\">${<\/span><span class=\"nx\">transformedAction<\/span><span class=\"p\">}<\/span><span class=\"s2\">] = useState(null)`<\/span><span class=\"p\">;<\/span>\n\n          <span class=\"kd\">const<\/span> <span class=\"nx\">editor<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">vscode<\/span><span class=\"p\">.<\/span><span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">activeTextEditor<\/span><span class=\"p\">;<\/span>\n\n          <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">editor<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"kd\">const<\/span> <span class=\"nx\">selection<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">editor<\/span><span class=\"p\">.<\/span><span class=\"nx\">selection<\/span><span class=\"p\">;<\/span>\n\n            <span class=\"nx\">editor<\/span><span class=\"p\">.<\/span><span class=\"nx\">edit<\/span><span class=\"p\">((<\/span><span class=\"nx\">editBuilder<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n              <span class=\"nx\">editBuilder<\/span><span class=\"p\">.<\/span><span class=\"nx\">replace<\/span><span class=\"p\">(<\/span><span class=\"nx\">selection<\/span><span class=\"p\">,<\/span> <span class=\"nx\">text<\/span><span class=\"p\">);<\/span>\n            <span class=\"p\">});<\/span>\n          <span class=\"p\">}<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"nx\">context<\/span><span class=\"p\">.<\/span><span class=\"nx\">subscriptions<\/span><span class=\"p\">.<\/span><span class=\"nx\">push<\/span><span class=\"p\">(<\/span><span class=\"nx\">disposable<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c1\">\/\/ This method is called when your extension is deactivated<\/span>\n<span class=\"kd\">function<\/span> <span class=\"nx\">deactivate<\/span><span class=\"p\">()<\/span> <span class=\"p\">{}<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nx\">capitalize<\/span><span class=\"p\">(<\/span><span class=\"nx\">word<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"nx\">word<\/span><span class=\"p\">.<\/span><span class=\"nx\">charAt<\/span><span class=\"p\">().<\/span><span class=\"nx\">toUpperCase<\/span><span class=\"p\">()<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">word<\/span><span class=\"p\">.<\/span><span class=\"nx\">slice<\/span><span class=\"p\">(<\/span><span class=\"mi\">1<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n\n<span class=\"nx\">module<\/span><span class=\"p\">.<\/span><span class=\"nx\">exports<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">activate<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">deactivate<\/span>\n<span class=\"p\">}<\/span>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u062a\u0627\u0628\u0639 \u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0631\u0627 \u062b\u0628\u062a \u0645\u06cc \u06a9\u0646\u062f <code>react-setstate.setState<\/code> \u0634\u0646\u0627\u0633\u0647 \u0641\u0631\u0645\u0627\u0646 \u06a9\u0647 \u0642\u0628\u0644\u0627\u064b \u062f\u0631 \u0641\u0627\u06cc\u0644 extension.js \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0631\u062f\u06cc\u0645.<\/li>\n<\/ul>\n<p>\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u060c \u0645\u0627 \u0628\u0627\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u0645 <code>package.json<\/code> \u0641\u0627\u06cc\u0644\u06cc \u06a9\u0647 \u0645\u0646\u0639\u06a9\u0633 \u06a9\u0646\u0646\u062f\u0647 \u0627\u06cc\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0633\u062a.  \u0645\u0627 \u0628\u0627\u06cc\u062f \u0646\u0627\u0645 \u062f\u0633\u062a\u0648\u0631 \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 <code>react-setstate.setState<\/code> \u0648 \u0639\u0646\u0648\u0627\u0646 \u0645\u0646\u0627\u0633\u0628\u06cc \u0628\u0647 \u0622\u0646 \u0628\u062f\u0647\u06cc\u062f.  \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631\u060c \u0645\u0627 \u0622\u0646 \u0631\u0627 \u0635\u062f\u0627 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f <strong>React setState<\/strong>\u060c \u0627\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0647\u0631 \u0646\u0627\u0645\u06cc \u0631\u0627 \u06a9\u0647 \u062a\u0631\u062c\u06cc\u062d \u0645\u06cc \u062f\u0647\u06cc\u062f \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"dl\">\"<\/span><span class=\"s2\">commands<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n    <span class=\"p\">{<\/span>\n      <span class=\"dl\">\"<\/span><span class=\"s2\">command<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-setstate.setState<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n      <span class=\"dl\">\"<\/span><span class=\"s2\">title<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">React setState<\/span><span class=\"dl\">\"<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">]<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0641\u0631\u0627\u0645\u0648\u0634 \u0646\u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0622\u0631\u0627\u06cc\u0647 &#8220;activationEvents&#8221; \u0631\u0627 \u0646\u06cc\u0632 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"dl\">\"<\/span><span class=\"s2\">activationEvents<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n    <span class=\"dl\">\"<\/span><span class=\"s2\">onCommand:react-setstate.setState<\/span><span class=\"dl\">\"<\/span>\n  <span class=\"p\">],<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u067e\u0633 \u0627\u0632 \u0641\u0639\u0627\u0644 \u0634\u062f\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u06cc\u060c \u0627\u0632 \u06a9\u0627\u0631\u0628\u0631 \u062e\u0648\u0627\u0633\u062a\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u0646\u0627\u0645 \u062d\u0627\u0644\u062a\u06cc \u0631\u0627 \u06a9\u0647 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u062f\u060c \u0648\u0627\u0631\u062f \u06a9\u0646\u062f \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f. <code>inputText<\/code> \u0645\u062a\u063a\u06cc\u0631.\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">inputText<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">vscode<\/span><span class=\"p\">.<\/span><span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">showInputBox<\/span><span class=\"p\">({<\/span>\n    <span class=\"na\">placeHolder<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Eg: show modal<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">prompt<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Enter the name of your state.<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u0627\u06af\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0686\u06cc\u0632\u06cc \u0631\u0627 \u062a\u0627\u06cc\u067e \u0646\u06a9\u0631\u062f\u0647 \u0628\u0627\u0634\u062f \u0648 \u062f\u0633\u062a\u0648\u0631 \u0631\u0627 \u062e\u0627\u0644\u06cc \u0628\u06af\u0630\u0627\u0631\u062f\u060c \u062f\u0633\u062a\u0648\u0631 \u0631\u0627 \u0645\u06cc \u0628\u0646\u062f\u06cc\u0645 \u0648 \u067e\u06cc\u0627\u0645\u06cc \u0645\u0628\u0646\u06cc \u0628\u0631 \u0627\u06cc\u062c\u0627\u062f \u062d\u0627\u0644\u062a \u0627\u06cc\u062c\u0627\u062f \u0646\u0634\u062f\u0647 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u06cc\u0645.\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">inputText<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">\"\"<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">vscode<\/span><span class=\"p\">.<\/span><span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">showErrorMessage<\/span><span class=\"p\">(<\/span>\n      <span class=\"dl\">\"<\/span><span class=\"s2\">You need to type in something for this to work\ud83d\ude0a.<\/span><span class=\"dl\">\"<\/span>\n    <span class=\"p\">);<\/span>\n    <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">inputText<\/span> <span class=\"o\">==<\/span> <span class=\"kc\">null<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u062f\u0644\u06cc\u0644 \u062a\u0642\u0633\u06cc\u0645 \u0645\u062a\u0646 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0641\u0627\u0635\u0644\u0647 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0646\u0627\u0645 \u06cc\u06a9 \u0627\u06cc\u0627\u0644\u062a \u0628\u0647 \u0637\u0648\u0631 \u0628\u0627\u0644\u0642\u0648\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0686\u0646\u062f\u06cc\u0646 \u06a9\u0644\u0645\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f\u060c \u0645\u0627\u0646\u0646\u062f &#8220;show modal&#8221;\u060c \u0648 \u0645\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0628\u062a\u0648\u0627\u0646\u06cc\u0645 \u0647\u0631 \u06a9\u0644\u0645\u0647 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0628\u0627 \u062d\u0631\u0648\u0641 \u0628\u0632\u0631\u06af \u0628\u0646\u0648\u06cc\u0633\u06cc\u0645.\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">words<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">inputText<\/span><span class=\"p\">.<\/span><span class=\"nx\">split<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\"> <\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u062a\u0627\u0628\u0639 \u0628\u0632\u0631\u06af \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u06a9\u0645\u06a9\u06cc \u0627\u0633\u062a \u06a9\u0647 \u06cc\u06a9 \u0631\u0634\u062a\u0647 \u0645\u06cc \u06af\u06cc\u0631\u062f \u0648 \u062d\u0631\u0641 \u0627\u0648\u0644 \u0647\u0631 \u06a9\u0644\u0645\u0647 \u062f\u0631 \u0631\u0634\u062a\u0647 \u0631\u0627 \u0628\u0632\u0631\u06af \u0645\u06cc \u06a9\u0646\u062f.  \u0645\u0627 \u0627\u0632 \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0628\u0631\u0627\u06cc \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u0646\u0627\u0645 \u0627\u06cc\u0627\u0644\u062a \u0648\u0627\u0631\u062f \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0628\u0627 \u062d\u0631\u0648\u0641 \u0628\u0632\u0631\u06af \u0646\u0648\u0634\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">function<\/span> <span class=\"nx\">capitalize<\/span><span class=\"p\">(<\/span><span class=\"nx\">word<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"nx\">word<\/span><span class=\"p\">.<\/span><span class=\"nx\">charAt<\/span><span class=\"p\">().<\/span><span class=\"nx\">toUpperCase<\/span><span class=\"p\">()<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">word<\/span><span class=\"p\">.<\/span><span class=\"nx\">slice<\/span><span class=\"p\">(<\/span><span class=\"mi\">1<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u0631\u0648\u0634 \u0645\u0631\u0633\u0648\u0645 \u0627\u06cc\u062c\u0627\u062f \u062d\u0627\u0644\u062a \u0647\u0627 \u062f\u0631 React \u0634\u0627\u0645\u0644 \u062a\u0639\u0631\u06cc\u0641 \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0642\u0644\u0627\u0628 useState \u0627\u0633\u062a \u06a9\u0647 \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0628\u0647 \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u0627\u0633\u062a:\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">showModal<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setShowModal<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">)<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 \u0633\u0645\u062a \u0686\u067e\u060c \u062e\u0648\u062f \u062f\u0648\u0644\u062a \u0631\u0627 \u062f\u0627\u0631\u06cc\u0645 \u0648 \u062f\u0631 \u0633\u0645\u062a \u0631\u0627\u0633\u062a\u060c \u0639\u0645\u0644 \u0631\u0627 \u062f\u0627\u0631\u06cc\u0645.  \u0628\u0647 \u0647\u0645\u06cc\u0646 \u062f\u0644\u06cc\u0644 \u0645\u0627 \u062f\u0648 \u0622\u0631\u0627\u06cc\u0647 \u062f\u0627\u0631\u06cc\u0645: <code>stateList<\/code> \u0646\u0633\u062e\u0647 \u0647\u0627\u06cc \u0628\u0627 \u062d\u0631\u0648\u0641 \u0628\u0632\u0631\u06af \u062a\u0645\u0627\u0645 \u06a9\u0644\u0645\u0627\u062a\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u062a\u0627\u06cc\u067e \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a\u060c \u0628\u0647 \u062c\u0632 \u06a9\u0644\u0645\u0647 \u0627\u0648\u0644\u060c \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"k\">for<\/span> <span class=\"p\">(<\/span><span class=\"kd\">let<\/span> <span class=\"nx\">i<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span> <span class=\"nx\">i<\/span> <span class=\"o\">&lt;<\/span> <span class=\"nx\">words<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span><span class=\"p\">;<\/span> <span class=\"nx\">i<\/span><span class=\"o\">++<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">i<\/span> <span class=\"o\">!==<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">stateList<\/span><span class=\"p\">.<\/span><span class=\"nx\">push<\/span><span class=\"p\">(<\/span><span class=\"nx\">capitalize<\/span><span class=\"p\">(<\/span><span class=\"nx\">words<\/span><span class=\"p\">[<\/span><span class=\"nx\">i<\/span><span class=\"p\">]));<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">stateList<\/span><span class=\"p\">.<\/span><span class=\"nx\">push<\/span><span class=\"p\">(<\/span><span class=\"nx\">words<\/span><span class=\"p\">[<\/span><span class=\"nx\">i<\/span><span class=\"p\">]);<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"nx\">actionList<\/span><span class=\"p\">.<\/span><span class=\"nx\">push<\/span><span class=\"p\">(<\/span><span class=\"nx\">capitalize<\/span><span class=\"p\">(<\/span><span class=\"nx\">words<\/span><span class=\"p\">[<\/span><span class=\"nx\">i<\/span><span class=\"p\">]));<\/span>\n  <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">stateList<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">show<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Modal<\/span><span class=\"dl\">'<\/span><span class=\"p\">]<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">actionList<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Show<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Modal']\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u067e\u0633 \u0627\u0632 \u06a9\u062f \u0628\u0627\u0644\u0627\u060c \u0622\u0631\u0627\u06cc\u0647 stateList \u0628\u0627\u06cc\u062f \u0634\u0627\u0645\u0644 \u062a\u0645\u0627\u0645 \u06a9\u0644\u0645\u0627\u062a \u0628\u0627 \u062d\u0631\u0648\u0641 \u0628\u0632\u0631\u06af \u0627\u0632 \u0648\u0631\u0648\u062f\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0628\u0647 \u062c\u0632 \u06a9\u0644\u0645\u0647 \u0627\u0648\u0644 \u0628\u0627\u0634\u062f.  \u0622\u0631\u0627\u06cc\u0647 actionList \u0628\u0627\u06cc\u062f \u062d\u0627\u0648\u06cc \u0646\u0633\u062e\u0647 \u0628\u0632\u0631\u06af \u06a9\u0644\u0645\u0647 \u0627\u0648\u0644 \u0628\u0627\u0634\u062f \u06a9\u0647 \u06a9\u0644\u0645\u0647 &#8220;Modal&#8221; \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>  <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">i<\/span> <span class=\"o\">!==<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">stateList<\/span><span class=\"p\">.<\/span><span class=\"nx\">push<\/span><span class=\"p\">(<\/span><span class=\"nx\">capitalize<\/span><span class=\"p\">(<\/span><span class=\"nx\">words<\/span><span class=\"p\">[<\/span><span class=\"nx\">i<\/span><span class=\"p\">]));<\/span>\n    <span class=\"p\">}<\/span> \n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0639\u0646\u0627\u0635\u0631 \u0631\u0627 \u062f\u0631 \u062e\u0648\u062f \u0628\u0647 \u0647\u0645 \u0628\u0686\u0633\u0628\u0627\u0646\u06cc\u0645 <code>stateList<\/code> \u0622\u0631\u0627\u06cc\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u062a\u0634\u06a9\u06cc\u0644 \u06cc\u06a9 \u0631\u0634\u062a\u0647  \u0627\u0632 \u0622\u0646\u062c\u0627 \u06a9\u0647 <code>stateList<\/code> \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u062a\u0645\u0627\u0645 \u06a9\u0644\u0645\u0627\u062a \u0628\u0632\u0631\u06af \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0645\u0627 \u0631\u0627 \u062f\u0627\u0631\u062f\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0628\u062f\u0648\u0646 \u067e\u0631\u062f\u0627\u0632\u0634 \u0628\u06cc\u0634\u062a\u0631 \u0628\u0647 \u06cc\u06a9\u062f\u06cc\u06af\u0631 \u0628\u067e\u06cc\u0648\u0646\u062f\u06cc\u0645.\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">transformedState<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">stateList<\/span><span class=\"p\">.<\/span><span class=\"nx\">join<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ showModal<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0627 \u0639\u0646\u0627\u0635\u0631 \u0622\u0631\u0627\u06cc\u0647 actionList \u0631\u0627 \u0628\u0647 \u0647\u0645 \u0645\u06cc \u067e\u06cc\u0648\u0646\u062f\u06cc\u0645 \u062a\u0627 \u06cc\u06a9 \u0631\u0634\u062a\u0647 \u0628\u0627 \u0645\u062c\u0645\u0648\u0639\u0647 \u067e\u06cc\u0634\u0648\u0646\u062f \u062a\u0634\u06a9\u06cc\u0644 \u062f\u0647\u06cc\u0645.\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">transformedAction<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">set<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">actionList<\/span><span class=\"p\">.<\/span><span class=\"nx\">join<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<ul>\n<li>\u062d\u0627\u0644\u0627 \u0628\u0627\u06cc\u062f \u062f\u0648 \u0631\u0634\u062a\u0647 \u0645\u062c\u0632\u0627 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645.\n<\/li>\n<\/ul>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">transformedState<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">showModal<\/span><span class=\"dl\">\"<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">transformedAction<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">setShowModal<\/span><span class=\"dl\">\"<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u062a\u0646\u0647\u0627 \u06a9\u0627\u0631\u06cc \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0647\u0645 \u0646\u0632\u062f\u06cc\u06a9 \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">text<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`const [<\/span><span class=\"p\">${<\/span><span class=\"nx\">transformedState<\/span><span class=\"p\">}<\/span><span class=\"s2\"> , <\/span><span class=\"p\">${<\/span><span class=\"nx\">transformedAction<\/span><span class=\"p\">}<\/span><span class=\"s2\">] = useState(null)`<\/span><span class=\"p\">;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u062f\u0631\u062c \u0627\u0633\u062a <code>transformedState<\/code> \u0648 <code>transformedAction<\/code> \u0631\u0634\u062a\u0647 \u0628\u0647 \u0631\u0634\u062a\u0647 \u0628\u0627\u0644\u0627.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">text<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`const [showModal , setShowModal] = useState(null)`<\/span><span class=\"p\">;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0631\u0634\u062a\u0647 \u0645\u0627 \u0627\u06a9\u0646\u0648\u0646 \u0628\u0627\u06cc\u062f \u0645\u0627\u0646\u0646\u062f \u0634\u06a9\u0644 \u0628\u0627\u0644\u0627 \u0628\u0627\u0634\u062f. <\/p>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u0648\u0636\u0639\u06cc\u062a \u062e\u0648\u062f \u0631\u0627 \u062f\u0627\u0631\u06cc\u0645\u060c \u0628\u0647 \u0631\u0627\u0647\u06cc \u0628\u0631\u0627\u06cc \u0686\u0633\u0628\u0627\u0646\u062f\u0646 \u0622\u0646 \u0645\u062a\u0646 \u062f\u0631 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631\/VS Code \u062e\u0648\u062f \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">editor<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">vscode<\/span><span class=\"p\">.<\/span><span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">activeTextEditor<\/span><span class=\"p\">;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u0645\u062a\u0646 \u0641\u0639\u0627\u0644 \u0641\u0639\u0644\u06cc\u060c \u0627\u0632 <code>vscode.window.activeTextEditor<\/code>.  \u0633\u067e\u0633 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 selection.active \u0628\u0631\u0627\u06cc \u0628\u062f\u0633\u062a \u0622\u0648\u0631\u062f\u0646 \u0645\u0648\u0642\u0639\u06cc\u062a \u0645\u06a9\u0627\u0646 \u0646\u0645\u0627 \u062f\u0631 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u0645\u062a\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>  <span class=\"kd\">const<\/span> <span class=\"nx\">selection<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">editor<\/span><span class=\"p\">.<\/span><span class=\"nx\">selection<\/span><span class=\"p\">;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a \u0627\u0632 \u062e\u0637 \u0632\u06cc\u0631 \u0628\u0631\u0627\u06cc \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646\u06cc \u0645\u062a\u0646 \u0631\u0648\u06cc \u0622\u0646 \u062e\u0637 \u0628\u0627 \u0645\u062a\u0646 \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">editor<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">selection<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">editor<\/span><span class=\"p\">.<\/span><span class=\"nx\">selection<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"nx\">editor<\/span><span class=\"p\">.<\/span><span class=\"nx\">edit<\/span><span class=\"p\">((<\/span><span class=\"nx\">editBuilder<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">editBuilder<\/span><span class=\"p\">.<\/span><span class=\"nx\">replace<\/span><span class=\"p\">(<\/span><span class=\"nx\">selection<\/span><span class=\"p\">,<\/span> <span class=\"nx\">text<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0631\u0627\u06cc \u0622\u0632\u0645\u0627\u06cc\u0634 \u0627\u06cc\u0646\u06a9\u0647 \u0622\u06cc\u0627 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0627\u0646\u062a\u0638\u0627\u0631 \u0645\u06cc \u0631\u0648\u062f \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f \u06cc\u0627 \u062e\u06cc\u0631\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u06cc \u0631\u0627 \u0628\u0627 \u0641\u0634\u0627\u0631 \u062f\u0627\u062f\u0646 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f <code>Ctrl + F5<\/code>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/02\/\u0627\u06cc\u062c\u0627\u062f-\u0648-\u0627\u0646\u062a\u0634\u0627\u0631-\u06cc\u06a9-\u067e\u0633\u0648\u0646\u062f-\u06a9\u062f-VS-\u0631\u0627\u0647\u0646\u0645\u0627\u06cc-\u06af\u0627\u0645-\u0628\u0647.gif\" alt=\"\u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u06cc Gif \u0646\u0633\u062e\u0647 \u06cc \u0646\u0645\u0627\u06cc\u0634\u06cc\" loading=\"lazy\" width=\"880\" height=\"495\" data-animated=\"true\" title=\"\"><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AF%D8%B1_%D8%AD%D8%A7%D9%84_%D8%A7%D9%86%D8%AA%D8%B4%D8%A7%D8%B1_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86%DB%8C_%D9%85%D8%A7\"><\/span>\n<p>  \u062f\u0631 \u062d\u0627\u0644 \u0627\u0646\u062a\u0634\u0627\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u06cc \u0645\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0627\u06cc\u0646\u06a9\u0647 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0637\u0628\u0642 \u0627\u0646\u062a\u0638\u0627\u0631 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0632\u0645\u0627\u0646 \u0622\u0646 \u0631\u0633\u06cc\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u06cc \u062e\u0648\u062f \u0631\u0627 \u0645\u0646\u062a\u0634\u0631 \u06a9\u0646\u06cc\u0645 \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062f\u06cc\u06af\u0631\u0627\u0646 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u0645.  \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u0628\u0647 \u06cc\u06a9 \u062a\u0648\u06a9\u0646 \u062f\u0633\u062a\u0631\u0633\u06cc \u0634\u062e\u0635\u06cc \u0627\u0632 Azure DevOps \u0648 \u06cc\u06a9 \u062d\u0633\u0627\u0628 \u0646\u0627\u0634\u0631 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645.<\/p>\n<p>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0633\u0627\u0632\u0645\u0627\u0646 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 Azure DevOps \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0631\u062f\u06cc\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u06cc\u0646 \u0645\u0631\u0627\u062d\u0644 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0631\u0645\u0632 \u062f\u0633\u062a\u0631\u0633\u06cc \u0634\u062e\u0635\u06cc \u062e\u0648\u062f \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D9%85%D8%B2_%D8%AF%D8%B3%D8%AA%D8%B1%D8%B3%DB%8C_%D8%B4%D8%AE%D8%B5%DB%8C\"><\/span>\n<p>  \u0631\u0645\u0632 \u062f\u0633\u062a\u0631\u0633\u06cc \u0634\u062e\u0635\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/02\/1677218957_745_\u0627\u06cc\u062c\u0627\u062f-\u0648-\u0627\u0646\u062a\u0634\u0627\u0631-\u06cc\u06a9-\u067e\u0633\u0648\u0646\u062f-\u06a9\u062f-VS-\u0631\u0627\u0647\u0646\u0645\u0627\u06cc-\u06af\u0627\u0645-\u0628\u0647.png\" alt=\"\u0645\u0646\u0648\u06cc \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0634\u062e\u0635\u06cc\" loading=\"lazy\" width=\"880\" height=\"593\" title=\"\"><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/02\/1677218958_803_\u0627\u06cc\u062c\u0627\u062f-\u0648-\u0627\u0646\u062a\u0634\u0627\u0631-\u06cc\u06a9-\u067e\u0633\u0648\u0646\u062f-\u06a9\u062f-VS-\u0631\u0627\u0647\u0646\u0645\u0627\u06cc-\u06af\u0627\u0645-\u0628\u0647.png\" alt=\"\u0631\u0645\u0632 \u062f\u0633\u062a\u0631\u0633\u06cc \u0634\u062e\u0635\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f\" loading=\"lazy\" width=\"880\" height=\"593\" title=\"\"><\/p>\n<ol>\n<li>\u0631\u0648\u06cc \u0646\u0645\u0627\u062f \u06a9\u0627\u0631\u0628\u0631 \u062f\u0631 \u06a9\u0646\u0627\u0631 \u062a\u0635\u0648\u06cc\u0631 \u067e\u0631\u0648\u0641\u0627\u06cc\u0644 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\u0631\u0648\u06cc \u0646\u0634\u0627\u0646\u0647 \u062f\u0633\u062a\u0631\u0633\u06cc \u0634\u062e\u0635\u06cc \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\u0627\u06cc\u0646 \u0628\u0627\u06cc\u062f \u0634\u0645\u0627 \u0631\u0627 \u0628\u0647 \u0635\u0641\u062d\u0647 \u0627\u06cc \u0628\u0628\u0631\u062f \u062a\u0627 \u062a\u0648\u06a9\u0646 \u062c\u062f\u06cc\u062f \u062a\u0648\u0644\u06cc\u062f \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\u0631\u0648\u06cc New Token \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u06cc\u06a9 \u0645\u062f\u0627\u0644 \u0628\u0627\u0632 \u0634\u0648\u062f.<\/li>\n<li>\u062f\u0631 \u0645\u0648\u062f\u0627\u0644\u060c \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0644\u0627\u0632\u0645 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0648\u06a9\u0646 \u062e\u0648\u062f \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u06cc\u062f.<\/li>\n<li>\u0631\u0648\u06cc Show more scopes \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 Marketplace \u0628\u06af\u0631\u062f\u06cc\u062f \u0648 \u06af\u0632\u06cc\u0646\u0647 Manage \u0631\u0627 \u0639\u0644\u0627\u0645\u062a \u0628\u0632\u0646\u06cc\u062f.<\/li>\n<li>\u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u062a\u0648\u06a9\u0646 \u062e\u0648\u062f \u0631\u0648\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u062a\u0648\u06a9\u0646 \u0631\u0627 \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f \u0632\u06cc\u0631\u0627 \u0628\u0639\u062f\u0627\u064b \u0628\u0647 \u0622\u0646 \u0646\u06cc\u0627\u0632 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u0634\u062a. <\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%A7%D8%B4%D8%B1\"><\/span>\n<p>  \u0646\u0627\u0634\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u0627 \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u0646\u0627\u0634\u0631 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u067e\u0633\u0648\u0646\u062f \u0645\u0627 \u0631\u0627 \u062a\u062d\u062a \u0622\u0646 \u0645\u0646\u062a\u0634\u0631 \u06a9\u0646\u062f.  \u0627\u06cc\u0646 \u0645\u0631\u0627\u062d\u0644 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n<ol>\n<li>\u0628\u0647 \u0635\u0641\u062d\u0647 \u062b\u0628\u062a \u0646\u0627\u0645 \u0646\u0627\u0634\u0631 \u0628\u0631\u0648\u06cc\u062f.<\/li>\n<li>\u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0646\u0627\u0634\u0631 \u062c\u062f\u06cc\u062f \u0628\u0631 \u0631\u0648\u06cc Create Publisher \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\u0628\u0647 \u06cc\u0627\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0646\u0627\u0645 \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u0646\u0627\u0634\u0631 \u0631\u0627 \u062f\u0631 \u062c\u0627\u06cc\u06cc \u0627\u0645\u0646 \u06a9\u067e\u06cc \u0648 \u062c\u0627\u06cc\u06af\u0630\u0627\u0631\u06cc \u06a9\u0646\u06cc\u062f\u060c \u0632\u06cc\u0631\u0627 \u0628\u0639\u062f\u0627\u064b \u0628\u0631\u0627\u06cc \u0648\u0631\u0648\u062f \u0628\u0647 \u0622\u0646 \u0628\u0647 \u0622\u0646 \u0646\u06cc\u0627\u0632 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u0634\u062a.<\/li>\n<\/ol>\n<p>\u0628\u0627 \u06a9\u067e\u06cc \u0634\u062f\u0646 \u0646\u0627\u0645 \u0646\u0627\u0634\u0631\u060c \u0628\u0627\u06cc\u062f \u0641\u06cc\u0644\u062f \u0646\u0627\u0634\u0631 \u0631\u0627 \u062f\u0631 \u0642\u0633\u0645\u062a \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc\/\u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 <code>package.json<\/code> \u0641\u0627\u06cc\u0644 \u0628\u0627 \u0646\u0627\u0645 \u0646\u0627\u0634\u0631 \u0645\u0627<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>  <span class=\"dl\">\"<\/span><span class=\"s2\">publisher<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">your-publisher-name<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%B5%D8%A8_vsce\"><\/span>\n<p>  \u0646\u0635\u0628 vsce<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"nx\">npm<\/span> <span class=\"nx\">install<\/span> <span class=\"o\">-<\/span><span class=\"nx\">g<\/span> <span class=\"p\">@<\/span><span class=\"nd\">vscode<\/span><span class=\"sr\">\/vsc<\/span><span class=\"err\">e\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><code>vsce<\/code>  \u06cc\u06a9 \u0627\u0628\u0632\u0627\u0631 CLI \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u067e\u0633\u0648\u0646\u062f\u0647\u0627\u06cc VS Code \u0627\u0633\u062a.  \u0627\u0632 \u0622\u0646 \u0628\u0631\u0627\u06cc \u0648\u0631\u0648\u062f \u0628\u0627 \u0646\u0627\u0645 \u0646\u0627\u0634\u0631 \u0648 \u0631\u0645\u0632 \u062f\u0633\u062a\u0631\u0633\u06cc \u0634\u062e\u0635\u06cc \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"nx\">vsce<\/span> <span class=\"nx\">login<\/span> <span class=\"o\">&lt;<\/span><span class=\"nx\">unique<\/span> <span class=\"nx\">publisher<\/span> <span class=\"nx\">name<\/span><span class=\"o\">&gt;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"nx\">vsce<\/span> <span class=\"nx\">publish<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06af\u0631 \u0628\u0627 \u067e\u06cc\u0627\u0645 \u062e\u0637\u0627\u06cc\u06cc \u0645\u0648\u0627\u062c\u0647 \u0634\u062f\u06cc\u062f \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u062f\u0633\u062a\u0648\u0631 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0641\u0627\u06cc\u0644 README.md \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0627\u0644\u06af\u0648\u06cc \u0632\u06cc\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u06cc\u0627 \u0642\u0627\u0644\u0628 \u062e\u0648\u062f \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f. <code>README.md<\/code> \u0645\u062a\u0646<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"c\"># react-setstate README<\/span>\n\nreact-setstate is an extension that allows react developers to create state quickly.\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u067e\u0633 \u0627\u0632 \u0627\u0646\u062a\u0634\u0627\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u06cc\u060c \u062f\u0631 VS Code Marketplace \u062a\u0623\u06cc\u06cc\u062f \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0686\u0646\u062f \u062f\u0642\u06cc\u0642\u0647 \u0637\u0648\u0644 \u0628\u06a9\u0634\u062f.  \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0648\u0636\u0639\u06cc\u062a \u0641\u0631\u0622\u06cc\u0646\u062f \u062a\u0623\u06cc\u06cc\u062f \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u062a\u0628\u0631\u06cc\u06a9 \u0645\u06cc \u06af\u0648\u06cc\u0645!  \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u06cc \u0634\u0645\u0627 \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u062f\u0631 VS Code \u0627\u06cc\u062c\u0627\u062f \u0648 \u0645\u0646\u062a\u0634\u0631 \u0634\u062f\u0647 \u0627\u0633\u062a [marketplace].<br \/>(https:\/\/marketplace.visualstudio.com\/vscode) \u0628\u0631\u0627\u06cc \u062f\u0627\u0646\u0644\u0648\u062f \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0647\u0631 \u06a9\u0633\u06cc.<\/p>\n<ul>\n<li>\u06a9\u062f \u0645\u0646\u0628\u0639 \u0631\u0627 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\u067e\u0633\u0648\u0646\u062f \u0631\u0627 \u0627\u0632 \u0627\u06cc\u0646\u062c\u0627 \u062f\u0627\u0646\u0644\u0648\u062f \u06a9\u0646\u06cc\u062f.<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/02\/1677218959_275_\u0627\u06cc\u062c\u0627\u062f-\u0648-\u0627\u0646\u062a\u0634\u0627\u0631-\u06cc\u06a9-\u067e\u0633\u0648\u0646\u062f-\u06a9\u062f-VS-\u0631\u0627\u0647\u0646\u0645\u0627\u06cc-\u06af\u0627\u0645-\u0628\u0647.gif\" alt=\"\u062a\u0628\u0631\u06cc\u06a9 \u0645\u06cc\u06af\u0645\" loading=\"lazy\" width=\"498\" height=\"498\" data-animated=\"true\" title=\"\"><\/p>\n<\/p><\/div>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0645\u0646 \u0627\u062e\u06cc\u0631\u0627\u064b \u0628\u0647 \u06cc\u06a9 \u0627\u0641\u0632\u0648\u0646\u0647 \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u0648 \u0633\u0631\u06af\u0631\u0645 \u06a9\u0646\u0646\u062f\u0647 \u0628\u0631\u0627\u06cc VS Code \u0628\u0647 \u0646\u0627\u0645 vscode-pets \u0628\u0631\u062e\u0648\u0631\u062f\u0645 \u06a9\u0647 \u062a\u0648\u0633\u0637 \u0622\u0646\u062a\u0648\u0646\u06cc \u0634\u0627\u0648. \u0627\u06cc\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u06cc \u06cc\u06a9 \u062d\u06cc\u0648\u0627\u0646 \u062e\u0627\u0646\u06af\u06cc \u0645\u062c\u0627\u0632\u06cc \u0645\u0627\u0646\u0646\u062f \u0633\u06af\ud83d\udc36 \u0631\u0627 \u0628\u0647 \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0634\u0645\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0628\u0627\u0639\u062b \u062d\u0648\u0627\u0633 \u067e\u0631\u062a\u06cc \u0627\u0632 \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u0645\u06cc \u0634\u0648\u062f. \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u062d\u06cc\u0648\u0627\u0646 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":8180,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-8179","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/8179","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=8179"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/8179\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/8180"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=8179"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=8179"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=8179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}