{"id":173,"date":"2019-10-09T19:00:12","date_gmt":"2019-10-09T16:00:12","guid":{"rendered":"https:\/\/amorev.ru\/?p=173"},"modified":"2019-10-16T05:36:12","modified_gmt":"2019-10-16T02:36:12","slug":"phpstorm-autocomplete-import-js","status":"publish","type":"post","link":"https:\/\/amorev.ru\/en\/phpstorm-autocomplete-import-js\/","title":{"rendered":"Autocomplete in PHPStorm using JS"},"content":{"rendered":"\n<p>In our work, one way or another, we include various components through import. for example<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import Places from '~\/components\/Global\/Places\/Places'<\/pre>\n\n\n\n<p>And, I want the string after ~ to appear automatically. PHPStorm can do this but you need to do one setup. Namely<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Create webpack.config.json file<\/li><li> Place it in the root of the project, from where it will be counted ~ as a path<\/li><li> Make its contents as follows<\/li><\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const path = require('path')\n\nmodule.exports = {\n  resolve: {\n    extensions: ['.js', '.json', '.vue'],\n    alias: {\n      '~': path.resolve(__dirname)\n    }\n  },\n}<\/pre>\n\n\n\n<p>Then it is necessary in the PHPStorm settings in<\/p>\n\n\n\n<p>  | Settings | Languages & Frameworks | JavaScript | Webpack <\/p>\n\n\n\n<p>Specify this file as a settings file. After the manipulations are done, the autocomple will automatically offer components of the right path and automatically make convenient imports.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/amorev.ru\/wp-content\/uploads\/2019\/09\/image-3.png\" alt=\"\u042d\u0442\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u043c\u0435\u0435\u0442 \u043f\u0443\u0441\u0442\u043e\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 alt; \u0435\u0433\u043e \u0438\u043c\u044f \u0444\u0430\u0439\u043b\u0430 - image-3.png\"\/><figcaption>Autocomplete<\/figcaption><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In our work, one way or another, we include various components through import. for example And, I want the string after ~ to appear automatically. &hellip; <\/p>\n","protected":false},"author":1,"featured_media":250,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[166,49],"tags":[153,152,154,21],"class_list":["post-173","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-main","category-razrabotka","tag-develop","tag-javascript","tag-phpstorm","tag-razrabotka"],"_links":{"self":[{"href":"https:\/\/amorev.ru\/en\/wp-json\/wp\/v2\/posts\/173","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/amorev.ru\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/amorev.ru\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/amorev.ru\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/amorev.ru\/en\/wp-json\/wp\/v2\/comments?post=173"}],"version-history":[{"count":0,"href":"https:\/\/amorev.ru\/en\/wp-json\/wp\/v2\/posts\/173\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/amorev.ru\/en\/wp-json\/wp\/v2\/media\/250"}],"wp:attachment":[{"href":"https:\/\/amorev.ru\/en\/wp-json\/wp\/v2\/media?parent=173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/amorev.ru\/en\/wp-json\/wp\/v2\/categories?post=173"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/amorev.ru\/en\/wp-json\/wp\/v2\/tags?post=173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}