{"id":22324,"date":"2015-08-24T10:59:34","date_gmt":"2015-08-24T10:59:34","guid":{"rendered":"https:\/\/blog.jetbrains.com\/webstorm\/?p=7769"},"modified":"2021-06-11T12:14:51","modified_gmt":"2021-06-11T11:14:51","slug":"maintaining-consistent-code-style","status":"publish","type":"webstorm","link":"https:\/\/blog.jetbrains.com\/zh-hans\/webstorm\/2015\/08\/maintaining-consistent-code-style","title":{"rendered":"Maintaining Consistent Code Style"},"content":{"rendered":"<p><strong>Code style matters.<\/strong> Having a consistent code style in your project should not be underestimated, as by making code more readable for all project contributors, it can save everyone&#8217;s time and even help you avoid some errors.&nbsp;Our goal is to make sure the code we write follows the agreed code style and that we can easily reformat the code if and when we want.<\/p>\n<p><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2015\/08\/webstorm-code_styles_main.png\" alt=\"code_styles_main\" width=\"640\"><\/p>\n<p>When using WebStorm, there are several ways to manage code style in your project.<\/p>\n<ul>\n<li>First, the IDE can help you automatically apply configured code style settings to the code you write and reformat the existing code based on those.<\/li>\n<li>Second, you can use <a href=\"http:\/\/editorconfig.org\/\" target=\"_blank\" rel=\"noopener\">EditorConfig<\/a> file format for describing code style that WebStorm and your other editor understand and enforce in the project.<\/li>\n<li>And third, you can use <a href=\"http:\/\/jscs.info\/\" target=\"_blank\" rel=\"noopener\">JSCS<\/a>, a JavaScript code style checker, to ensure proper code style. WebStorm provides integration with JSCS, allowing you to see the reported code style warnings right in the editor.<\/li>\n<\/ul>\n<p>Let\u2019s have a closer look at these ways in which WebStorm can help you maintain a consistent code style.<\/p>\n<h2>IDE code style settings<\/h2>\n<p>If you go to IDE <em>Preferences | Editor | Code style<\/em>, you\u2019ll see a list of languages for which WebStorm provides specific formatting options.<\/p>\n<p>Let\u2019s have a look at JavaScript code style settings and try to configure them to follow some principles of <a href=\"https:\/\/github.com\/airbnb\/javascript\" target=\"_blank\" rel=\"noopener\">Airbnb code style<\/a>.<\/p>\n<p><em>&gt;&gt; Use soft tabs set to 2 spaces.<\/em><br \/>\nIn JavaScript code style, go to <em>Tabs and Indents<\/em> and set the values of <em>Tab size<\/em>, <em>Indent and Continuation indent<\/em> to 2.<\/p>\n<p><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2015\/08\/webstorm-js_code_style_indents.png\" alt=\"js_code_style_indents\" width=\"640\"><\/p>\n<p><em>&gt;&gt; Place 1 space before the leading brace. Place 1 space before the opening parenthesis in control statements (if, while etc.).<\/em><br \/>\nOn the <em>Spaces tab<\/em>, check <em>Before Left Brace<\/em> options for Functions, if, while and other keywords.<\/p>\n<p><em>&gt;&gt; Place no space before the argument list in function calls and declarations.<\/em><br \/>\nUncheck <em>Function declaration parentheses<\/em> and <em>Function calls parentheses<\/em> in the <em>Before parentheses<\/em> group.<\/p>\n<p>Now let\u2019s reformat our code according to this code style. This can be done with the <strong>Alt-Cmd-L<\/strong> (<strong>Alt-Ctrl-L<\/strong> on Win and Linux) shortcut. The diff view in the Local history shows how the code has changed.<\/p>\n<p><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2015\/08\/webstorm-code_format_diff_view.png\" alt=\"code_format_diff_view\" width=\"640\"><\/p>\n<p>These are quite basic but important code style settings. The IDE supports a significant number of different code style settings which hopefully cover most of the common code style guides.<\/p>\n<p>The code style preferences are stored in so-called <em>schemes<\/em>. The IDE <em>Default<\/em> code style scheme is applied automatically to all projects. To tune it to your style, go to Preferences and make the adjustments. A copy of the Default scheme with your changes will be created and applied to any projects that already use the Default scheme.<\/p>\n<p>If you\u2019re working on multiple projects with different code styles and would like to keep them separate, you need to switch the current scheme in Code style settings to <em>Project<\/em>. Once you\u2019ve done that, all the changes will be applied to and saved specifically for this project. You can commit <em>codeStyleSettings.xml<\/em> file from the project\u2019s <em>.idea<\/em> folder to your VCS. In this way your code style setting can be shared with your team members using WebStorm or other JetBrains IDE(s) to keep a consistent code style.<\/p>\n<h2>EditorConfig<\/h2>\n<p>One of the ways to share code style settings with colleagues who use various editors and IDEs is to use <a href=\"http:\/\/editorconfig.org\/\" target=\"_blank\" rel=\"noopener\">EditorConfig<\/a>. It comes with a file format for describing styles, like indents, trailing spaces and so on, and set of plugins that enforce this code style in the tools.<\/p>\n<p>WebStorm supports EditorConfig and applies the style settings described in <a href=\"http:\/\/editorconfig.org\/#example-file\" target=\"_blank\" rel=\"noopener\">.editorconfig<\/a> file. By default these override the IDE code style settings.<\/p>\n<p><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2015\/08\/webstorm-editor_conf_file.png\" alt=\"editor_conf_file\" width=\"640\"><\/p>\n<p>You may often see an <em>.editorconfig<\/em> file in popular open-source projects: EditorConfig makes it easier for all contributors to follow the same code style.<\/p>\n<p>This behavior can be disabled in <em>Preferences | Editor | Code style &#8211; EditorConfig<\/em>.<\/p>\n<h2>Detect and use existing indents preferences<\/h2>\n<p>WebStorm can also automatically detect the indent style used in the file and continue following it when you edit this file, instead of following the default code style settings.<\/p>\n<p>This feature is enables by default and you can disable that in <em>Preferences | Editor | Code style &#8211; Detect and use existing file indents for editing<\/em>.<\/p>\n<p>This can be quite useful for file formats that you don\u2019t often use and don\u2019t have any specific styles configured for. Or if you are just making some minor changes in a project and don\u2019t want to configure anything. However, we do recommend changing your IDE code style settings to fit the project\u2019s styles if you want to work with it extensively.<\/p>\n<h2>JSCS<\/h2>\n<p><a href=\"http:\/\/jscs.info\/\" target=\"_blank\" rel=\"noopener\">JSCS<\/a> is another tool that helps keep your code style consistent. JSCS stands for JavaScript Code Style checker. Similar to other code linters like JSHint or ESLint (which can also detect some code style issues), JSCS has a configuration file where you can describe your code style using over <a href=\"http:\/\/jscs.info\/rules.html\" target=\"_blank\" rel=\"noopener\">150 validation rules<\/a>. Whenever your code doesn\u2019t meet the validation rules, JSCS reports a warning.<\/p>\n<p>With JSCS integration in WebStorm, JCSC warnings from are reported right in the editor. For example, you can clearly see where you missed a space or you failed to use CamelCase.<\/p>\n<p><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2015\/08\/webstorm-jscs_warning.png\" alt=\"jscs_warning\" width=\"640\"><\/p>\n<p>To get started with JSCS, install it via npm either locally in your project or globally. Then go to IDE <em>Preferences | Languages &amp; Frameworks | JavaScript | Code quality tools | JSCS<\/em> and enable it. Make sure you have a config file in your project or you have selected one of the predefined <a href=\"https:\/\/github.com\/jscs-dev\/node-jscs\/tree\/master\/presets\" target=\"_blank\" rel=\"noopener\">presets<\/a>.<\/p>\n<p>With a recent update, JSCS provides auto-fixes for some code style rules. Press Alt+Enter on the highlighted code and select <em>Fix current file with JSCS<\/em> to have JSCS reformat your code.<\/p>\n<p><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2015\/08\/webstorm-jscs_fix.png\" alt=\"jscs_fix\" width=\"640\"><\/p>\n<p>WebStorm allows you to import some of the code style properties from the JSCS configuration file to the IDE code style settings. (However, it is not a full set of JSCS rules because there\u2019s no an exact match between IDE settings and JSCS rules.) Go to <em>Preferences | Editor | Code style<\/em>, click <em>Manage&#8230;<\/em> next to the selected code style scheme and then <em>Import from JSCS<\/em>.<\/p>\n<p><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2015\/08\/webstorm-jscs_import_scheme.png\" alt=\"jscs_import_scheme\" width=\"640\"><\/p>\n<p>And how do you manage code styles in your team or project? Does WebStorm help you with that or not yet? We\u2019d be glad to hear your story!<\/p>\n<p><em>Happy developing!<\/em><\/p>\n<p><em>Your JetBrains WebStorm Team<\/em><\/p>\n","protected":false},"author":221,"featured_media":0,"comment_status":"open","ping_status":"open","template":"","categories":[601],"tags":[854,1993,2804],"cross-post-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/22324"}],"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=22324"}],"version-history":[{"count":2,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/22324\/revisions"}],"predecessor-version":[{"id":153706,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/webstorm\/22324\/revisions\/153706"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/media?parent=22324"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/categories?post=22324"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/tags?post=22324"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/zh-hans\/wp-json\/wp\/v2\/cross-post-tag?post=22324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}