{"id":34,"date":"2013-04-14T11:44:00","date_gmt":"2013-04-14T11:44:00","guid":{"rendered":"http:\/\/tpodolak.com.hostingasp.pl\/blog\/2013\/04\/14\/fixing-missing-semicolon-issue-using-webstorm\/"},"modified":"2016-01-30T23:49:02","modified_gmt":"2016-01-30T23:49:02","slug":"fixing-missing-semicolon-issue-using-webstorm","status":"publish","type":"post","link":"https:\/\/tpodolak.com\/blog\/2013\/04\/14\/fixing-missing-semicolon-issue-using-webstorm\/","title":{"rendered":"Fixing missing semicolon issue using WebStorm"},"content":{"rendered":"<p>Recently in the company I work for, we&#8217;ve been trying to improve Javascript code quality. After hooking up JSlint into our build script, it turned out that the most common issue with our code is missing semicolon at the end of statements. Fixing all warnings manually would be very boring task, that is why I started searching for alternative solution. Fortunatelly once again, WebStorm came for the rescue. As you probably know WebStorm has it&#8217;s own code inspection tool which indicates problems with code. However except that, this tool can also fix these problems automatically. Here is a little demonstration. Let us start with simple code.<\/p>\n<pre lang=\"javascript\">\r\nExt.define('GeneralLearning.controllers.ImageCachingController',{\r\n    extend:'Ext.app.Controller',\r\n    viewInstance:null,\r\n    launch:function(){\r\n        var me = this;\r\n        me.viewInstance = Ext.create('GeneralLearning.views.ImageCachingView');\r\n    },\r\n\r\n    getView:function(){\r\n        var me = this\r\n        return me.viewInstance\r\n    }\r\n});\r\n<\/pre>\n<p>In the listing above, there are two lines with missing semicolon (in function <i>getView<\/i>). Let fix them using Webstorm code inspection tool.<br \/>\nFirst of all, we have to make sure that appropriate inspection options are selected. In order to do that, let&#8217;s choose &#8220;Settings&#8221; from menu &#8220;File&#8221;. In the opened window, go to &#8220;Settings&#8221; and select options presented in the picture below.<br \/>\n<a href=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/04\/fixing-missing-semicolon-issue-using-webstorm\/options.png\" rel=\"attachment wp-att-354\"><img decoding=\"async\" src=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/04\/fixing-missing-semicolon-issue-using-webstorm\/options.png\" alt=\"options\" width=\"800\" class=\"aligncenter size-full wp-image-354\" srcset=\"https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/04\/fixing-missing-semicolon-issue-using-webstorm\/options.png 1240w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/04\/fixing-missing-semicolon-issue-using-webstorm\/options-150x89.png 150w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/04\/fixing-missing-semicolon-issue-using-webstorm\/options-300x179.png 300w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/04\/fixing-missing-semicolon-issue-using-webstorm\/options-1024x609.png 1024w\" sizes=\"(max-width: 1240px) 100vw, 1240px\" \/><\/a><br \/>\nIn the next step, from menu <i>&#8220;Code&#8221;<\/i> choose <i>&#8220;Inspect code&#8221;<\/i><br \/>\n<a href=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/04\/fixing-missing-semicolon-issue-using-webstorm\/InspectCode.png\" rel=\"attachment wp-att-350\"><img decoding=\"async\" src=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/04\/fixing-missing-semicolon-issue-using-webstorm\/InspectCode.png\" alt=\"InspectCode\" width=\"500\" class=\"aligncenter size-full wp-image-350\" srcset=\"https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/04\/fixing-missing-semicolon-issue-using-webstorm\/InspectCode.png 544w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/04\/fixing-missing-semicolon-issue-using-webstorm\/InspectCode-150x135.png 150w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/04\/fixing-missing-semicolon-issue-using-webstorm\/InspectCode-300x269.png 300w\" sizes=\"(max-width: 544px) 100vw, 544px\" \/><\/a><br \/>\nIn the opened window, we can change inspection profile or inspection scope, but usually we can go with default settings<br \/>\n<a href=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/04\/fixing-missing-semicolon-issue-using-webstorm\/InspectCodeWindow.png\" rel=\"attachment wp-att-351\"><img decoding=\"async\" src=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/04\/fixing-missing-semicolon-issue-using-webstorm\/InspectCodeWindow.png\" alt=\"InspectCodeWindow\" width=\"300\" class=\"aligncenter size-full wp-image-351\" srcset=\"https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/04\/fixing-missing-semicolon-issue-using-webstorm\/InspectCodeWindow.png 347w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/04\/fixing-missing-semicolon-issue-using-webstorm\/InspectCodeWindow-150x136.png 150w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/04\/fixing-missing-semicolon-issue-using-webstorm\/InspectCodeWindow-300x272.png 300w\" sizes=\"(max-width: 347px) 100vw, 347px\" \/><\/a><br \/>\nAfter inspection is done, at the bottom of the screen you will see results<br \/>\n<a href=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/04\/fixing-missing-semicolon-issue-using-webstorm\/InspectionResult.png\" rel=\"attachment wp-att-352\"><img decoding=\"async\" src=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/04\/fixing-missing-semicolon-issue-using-webstorm\/InspectionResult.png\" alt=\"InspectionResult\" width=\"600\" class=\"aligncenter size-full wp-image-352\" srcset=\"https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/04\/fixing-missing-semicolon-issue-using-webstorm\/InspectionResult.png 752w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/04\/fixing-missing-semicolon-issue-using-webstorm\/InspectionResult-150x51.png 150w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/04\/fixing-missing-semicolon-issue-using-webstorm\/InspectionResult-300x102.png 300w\" sizes=\"(max-width: 752px) 100vw, 752px\" \/><\/a><br \/>\nNow, we can quickly fix them by using context menu and clicking <i>&#8220;Terminate statement&#8221;<\/i><br \/>\n<a href=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/04\/fixing-missing-semicolon-issue-using-webstorm\/InspectionResultMenu.png\" rel=\"attachment wp-att-353\"><img decoding=\"async\" src=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/04\/fixing-missing-semicolon-issue-using-webstorm\/InspectionResultMenu.png\" alt=\"InspectionResultMenu\" width=\"600\" class=\"aligncenter size-full wp-image-353\" srcset=\"https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/04\/fixing-missing-semicolon-issue-using-webstorm\/InspectionResultMenu.png 732w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/04\/fixing-missing-semicolon-issue-using-webstorm\/InspectionResultMenu-150x57.png 150w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/04\/fixing-missing-semicolon-issue-using-webstorm\/InspectionResultMenu-300x114.png 300w\" sizes=\"(max-width: 732px) 100vw, 732px\" \/><\/a><br \/>\nHere is the result of fixing operation<br \/>\n<a href=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/04\/fixing-missing-semicolon-issue-using-webstorm\/result.png\" rel=\"attachment wp-att-355\"><img decoding=\"async\" src=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/04\/fixing-missing-semicolon-issue-using-webstorm\/result.png\" alt=\"missing semicolon\" width=\"600\" class=\"aligncenter size-full wp-image-355\" srcset=\"https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/04\/fixing-missing-semicolon-issue-using-webstorm\/result.png 828w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/04\/fixing-missing-semicolon-issue-using-webstorm\/result-150x55.png 150w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/04\/fixing-missing-semicolon-issue-using-webstorm\/result-300x111.png 300w\" sizes=\"(max-width: 828px) 100vw, 828px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Recently in the company I work for, we&#8217;ve been trying to improve Javascript code quality. After hooking up JSlint into our build script, it turned out that the most common issue with our code is missing semicolon at the end of statements. Fixing all warnings manually would be very boring task, that is why I [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,69,70],"tags":[174,212,213],"class_list":["post-34","post","type-post","status-publish","format-standard","hentry","category-javascript","category-jslint","category-webstorm","tag-javascript","tag-jslint","tag-webstorm"],"_links":{"self":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts\/34","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/comments?post=34"}],"version-history":[{"count":4,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts\/34\/revisions"}],"predecessor-version":[{"id":540,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts\/34\/revisions\/540"}],"wp:attachment":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/media?parent=34"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/categories?post=34"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/tags?post=34"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}