{"id":22659,"date":"2017-04-07T14:42:33","date_gmt":"2017-04-07T14:42:33","guid":{"rendered":"https:\/\/blog.jetbrains.com\/webstorm\/?p=8904"},"modified":"2021-06-11T11:57:07","modified_gmt":"2021-06-11T10:57:07","slug":"using-javascript-standard-style","status":"publish","type":"webstorm","link":"https:\/\/blog.jetbrains.com\/zh-hans\/webstorm\/2017\/04\/using-javascript-standard-style","title":{"rendered":"Using JavaScript Standard Style"},"content":{"rendered":"<p><a href=\"https:\/\/github.com\/feross\/standard\" target=\"_blank\" rel=\"noopener\">Standard<\/a> is a popular JavaScript code style guide. It can also lint your code since it\u2019s built on top of ESLint and, therefore, it can also be used as an ESLint plugin.<\/p>\n<p>To improve the experience with WebStorm for those who use Standard, we added lots of new JavaScript code style options that are defined in Standard, such as the use of semicolons and trailing commas and quote style. We also implemented a simple way to make WebStorm follow them and report them in the editor.<\/p>\n<p>As Standard is based on <a href=\"http:\/\/eslint.org\/\" target=\"_blank\" rel=\"noopener\">ESLint<\/a>, its support is implemented via WebStorm\u2019s ESLint integration.<\/p>\n<h2>Enable linting with Standard via ESLint<\/h2>\n<p>If you open a project with `standard` listed in&nbsp;its package.json file, WebStorm will enable linting with Standard automatically. Run `npm install` to see warnings reported by Standard in the editor.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8906\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2017\/04\/webstorm-error-from-standard.png\" alt=\"error-from-standard\" width=\"800\"><\/p>\n<p>To enable linting with Standard yourself, go to <em>Preferences\/Settings | Languages &amp; Frameworks | JavaScript | Code Quality Tools | ESLint<\/em>, select <em>Manual ESLint configuration<\/em> and specify the location of the standard package in the <em>ESLint Package<\/em> field.<\/p>\n<h2>Apply code style rules<\/h2>\n<p>WebStorm will also suggest to set Standard code style for formatting.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8907\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2017\/04\/webstorm-use-standard.png\" alt=\"use-standard\" width=\"800\"><\/p>\n<p>Once you click <em>Yes<\/em>, the code style options available in WebStorm will be set the way Standard suggests.<\/p>\n<p>You can also do this manually. For this, go to <em>Preferences\/Settings | Editor | Code Style | JavaScript,&nbsp;<\/em>click <em>Set from&#8230;<\/em>, and select<em> JavaScript Standard Style<\/em>. This style will then replace your current scheme.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-11203\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2017\/04\/webstorm-select-js-standard-style-in-preferences-1.png\" alt=\"select-js-standard-style-in-preferences\" width=\"800\"><\/p>\n<p>Please note that Standard can report a wider range of code style issues than WebStorm can automatically fix.<\/p>\n<h2>Fix issues with WebStorm and ESLint<\/h2>\n<p>Some of the issues Standard reports can be fixed by Standard or ESLint (depending on what you\u2019re using). Press <em>Alt+Enter<\/em> on the highlighted code in the editor and select <em>Fix current file<\/em>.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8908\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2017\/04\/webstorm-fix-with-standard-or-ws.png\" alt=\"fix-with-standard-or-ws\" width=\"800\"><\/p>\n<p>For some code quality issues, you will also see available quick-fix options provided by WebStorm. For example, for an undefined variable WebStorm will suggest to insert a declaration.<\/p>\n<p><em>The WebStorm team<\/em><\/p>\n","protected":false},"author":221,"featured_media":0,"comment_status":"open","ping_status":"open","template":"","categories":[601],"tags":[854,2812,2838,2834],"cross-post-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/22659"}],"collection":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm"}],"about":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/types\/webstorm"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/users\/221"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/comments?post=22659"}],"version-history":[{"count":2,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/22659\/revisions"}],"predecessor-version":[{"id":153671,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/22659\/revisions\/153671"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/media?parent=22659"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/categories?post=22659"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/tags?post=22659"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/cross-post-tag?post=22659"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}