{"id":199342,"date":"2019-09-24T11:04:46","date_gmt":"2019-09-24T11:04:46","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=199342"},"modified":"2024-03-05T04:19:46","modified_gmt":"2024-03-05T04:19:46","slug":"adding-code-sniffer-in-visual-studio-code-for-magento2","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/adding-code-sniffer-in-visual-studio-code-for-magento2\/","title":{"rendered":"Adding Code Sniffer In Visual Studio Code For Magento2"},"content":{"rendered":"\n

As an extension developer if you are submitting your code to Magento marketplace you must be familiar with code sniffer, Magento only accepts the extensions which are built on their coding standards, and to check the code whether it is following the standard or not we use code sniffer with Magento coding standard rules.<\/p>\n\n\n\n

The code sniffer that Magento uses is Sqiz Lab’s code sniffer, which checks the code on some PHP code standards check such as PEAR coding standard<\/a> or PSR<\/a>, by default it uses PEAR coding standard or you can switch to any other standard by simply using this command:<\/p>\n\n\n\n

$ phpcs --standard=PSR2 \/path\/to\/code-directory<\/pre>\n\n\n\n
Magento uses its own code standard, which you can find on git:<\/p>\n\n\n\n
https:\/\/github.com\/magento\/magento-coding-standard<\/a><\/p>\n\n\n\n
It is quite a time taking to first build a module and test code standard and fix them, so it would be nice to add the coding standard check into the editor itself, so as you write code you can immediately fix the standard issues. Now we will see how we can add the Magento code standard check, in visual code studio editor or VS Code.<\/p>\n\n\n\n
There is already a Sqiz labs code sniffer extension available for vs code so we just need to install that configure it to support Magento2 standard.<\/p>\n\n\n\n
Open your visual code studio and press ctrl + shift + x it will open the Extensions tab like this:<\/p>\n\n\n\n
\"extensions<\/figure>\n\n\n\n
 Now search for ‘phpcs’ and you will get many results but I have installed Loannis Kappas extension, now click the green install button on the search item and code sniffer will get installed on your editor, now to configure magento2 standard first install the Magento coding standard library using composer on your system with this command:<\/p>\n\n\n\n
$ composer create-project magento\/magento-coding-standard --stability=dev InstallationDir<\/pre>\n\n\n\n
Using the above command Magento code standard will be installed in your system as a standalone software package. Now after installing code standard again open your vs code editor and press:  ctrl + shift + p it will open the command pallet in that search for open settings and click on open settings in JSON, and add these two lines:<\/p>\n\n\n\n
—- “phpcs.executablePath”:\u00a0“Path-To-InstallationDir\/vendor\/bin\/phpcs”, “phpcs.standard”:\u00a0“Path-To-InstallationDir\/Magento2\/ruleset.xml” —-<\/strong><\/p>\n\n\n\n
‘Path-To-InstallationDir’ will be your path to the Magento coding standard installation directory.<\/p>\n\n\n\n
Now restart your editor and it will start showing code standard issues against Magento2 Code Standard on the fly, like below:<\/p>\n\n\n\n
\"code<\/figure>\n\n\n\n
All the yellow underlined statements are code sniffer issues, when you will hover on then it will show you the issue description so that you can fix it.

Thanks<\/p>\n","protected":false},"excerpt":{"rendered":"
As an extension developer if you are submitting your code to Magento marketplace you must be familiar with code sniffer, Magento only accepts the extensions which are built on their coding standards, and to check the code whether it is following the standard or not we use code sniffer with Magento coding standard rules. The […]<\/a><\/p>\n","protected":false},"author":33,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9121],"tags":[9925,9924,9926],"class_list":["post-199342","post","type-post","status-publish","format-standard","hentry","category-magento-2","tag-code-sniffer","tag-magento-coding-standard","tag-visual-code"],"yoast_head":"\nAdding Code Sniffer In Visual Studio Code For Magento2 - Webkul Blog<\/title>\n<meta name=\"description\" content=\"it would be nice to add the coding standard check into the editor itself, so as you write code you can immediately fix the standard issues\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/adding-code-sniffer-in-visual-studio-code-for-magento2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding Code Sniffer In Visual Studio Code For Magento2 - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"it would be nice to add the coding standard check into the editor itself, so as you write code you can immediately fix the standard issues\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/adding-code-sniffer-in-visual-studio-code-for-magento2\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-09-24T11:04:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-05T04:19:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/09\/extensions_tab.png\" \/>\n<meta name=\"author\" content=\"Ashutosh Srivastava\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ashutosh Srivastava\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/adding-code-sniffer-in-visual-studio-code-for-magento2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/adding-code-sniffer-in-visual-studio-code-for-magento2\/\"},\"author\":{\"name\":\"Ashutosh Srivastava\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/5555025750ec4e4df34fadc78b083970\"},\"headline\":\"Adding Code Sniffer In Visual Studio Code For Magento2\",\"datePublished\":\"2019-09-24T11:04:46+00:00\",\"dateModified\":\"2024-03-05T04:19:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/adding-code-sniffer-in-visual-studio-code-for-magento2\/\"},\"wordCount\":428,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/adding-code-sniffer-in-visual-studio-code-for-magento2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/09\/extensions_tab.png\",\"keywords\":[\"code sniffer\",\"magento coding standard\",\"visual code\"],\"articleSection\":[\"Magento 2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/adding-code-sniffer-in-visual-studio-code-for-magento2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/adding-code-sniffer-in-visual-studio-code-for-magento2\/\",\"url\":\"https:\/\/webkul.com\/blog\/adding-code-sniffer-in-visual-studio-code-for-magento2\/\",\"name\":\"Adding Code Sniffer In Visual Studio Code For Magento2 - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/adding-code-sniffer-in-visual-studio-code-for-magento2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/adding-code-sniffer-in-visual-studio-code-for-magento2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/09\/extensions_tab.png\",\"datePublished\":\"2019-09-24T11:04:46+00:00\",\"dateModified\":\"2024-03-05T04:19:46+00:00\",\"description\":\"it would be nice to add the coding standard check into the editor itself, so as you write code you can immediately fix the standard issues\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/adding-code-sniffer-in-visual-studio-code-for-magento2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/adding-code-sniffer-in-visual-studio-code-for-magento2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/adding-code-sniffer-in-visual-studio-code-for-magento2\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/09\/extensions_tab.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/09\/extensions_tab.png\",\"width\":1851,\"height\":862,\"caption\":\"extensions tab\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/adding-code-sniffer-in-visual-studio-code-for-magento2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adding Code Sniffer In Visual Studio Code For Magento2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/5555025750ec4e4df34fadc78b083970\",\"name\":\"Ashutosh Srivastava\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2f5312e6903909ffeb33aa5eb38e1c0bed8f498f92144f5f84065adf7e8708a6?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2f5312e6903909ffeb33aa5eb38e1c0bed8f498f92144f5f84065adf7e8708a6?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Ashutosh Srivastava\"},\"sameAs\":[\"http:\/\/webkul.com\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/ashutosh\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Adding Code Sniffer In Visual Studio Code For Magento2 - Webkul Blog","description":"it would be nice to add the coding standard check into the editor itself, so as you write code you can immediately fix the standard issues","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/adding-code-sniffer-in-visual-studio-code-for-magento2\/","og_locale":"en_US","og_type":"article","og_title":"Adding Code Sniffer In Visual Studio Code For Magento2 - Webkul Blog","og_description":"it would be nice to add the coding standard check into the editor itself, so as you write code you can immediately fix the standard issues","og_url":"https:\/\/webkul.com\/blog\/adding-code-sniffer-in-visual-studio-code-for-magento2\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2019-09-24T11:04:46+00:00","article_modified_time":"2024-03-05T04:19:46+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/09\/extensions_tab.png","type":"","width":"","height":""}],"author":"Ashutosh Srivastava","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Ashutosh Srivastava","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/adding-code-sniffer-in-visual-studio-code-for-magento2\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/adding-code-sniffer-in-visual-studio-code-for-magento2\/"},"author":{"name":"Ashutosh Srivastava","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/5555025750ec4e4df34fadc78b083970"},"headline":"Adding Code Sniffer In Visual Studio Code For Magento2","datePublished":"2019-09-24T11:04:46+00:00","dateModified":"2024-03-05T04:19:46+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/adding-code-sniffer-in-visual-studio-code-for-magento2\/"},"wordCount":428,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/adding-code-sniffer-in-visual-studio-code-for-magento2\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/09\/extensions_tab.png","keywords":["code sniffer","magento coding standard","visual code"],"articleSection":["Magento 2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/adding-code-sniffer-in-visual-studio-code-for-magento2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/adding-code-sniffer-in-visual-studio-code-for-magento2\/","url":"https:\/\/webkul.com\/blog\/adding-code-sniffer-in-visual-studio-code-for-magento2\/","name":"Adding Code Sniffer In Visual Studio Code For Magento2 - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/adding-code-sniffer-in-visual-studio-code-for-magento2\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/adding-code-sniffer-in-visual-studio-code-for-magento2\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/09\/extensions_tab.png","datePublished":"2019-09-24T11:04:46+00:00","dateModified":"2024-03-05T04:19:46+00:00","description":"it would be nice to add the coding standard check into the editor itself, so as you write code you can immediately fix the standard issues","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/adding-code-sniffer-in-visual-studio-code-for-magento2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/adding-code-sniffer-in-visual-studio-code-for-magento2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/adding-code-sniffer-in-visual-studio-code-for-magento2\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/09\/extensions_tab.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/09\/extensions_tab.png","width":1851,"height":862,"caption":"extensions tab"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/adding-code-sniffer-in-visual-studio-code-for-magento2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Adding Code Sniffer In Visual Studio Code For Magento2"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/5555025750ec4e4df34fadc78b083970","name":"Ashutosh Srivastava","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2f5312e6903909ffeb33aa5eb38e1c0bed8f498f92144f5f84065adf7e8708a6?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2f5312e6903909ffeb33aa5eb38e1c0bed8f498f92144f5f84065adf7e8708a6?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Ashutosh Srivastava"},"sameAs":["http:\/\/webkul.com"],"url":"https:\/\/webkul.com\/blog\/author\/ashutosh\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/199342","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/33"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=199342"}],"version-history":[{"count":5,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/199342\/revisions"}],"predecessor-version":[{"id":426028,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/199342\/revisions\/426028"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=199342"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=199342"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=199342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}