Maintaining Consistent Code Style

Code style matters. 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’s time and even help you avoid some errors. 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.


When using WebStorm, there are several ways to manage code style in your project.

  • 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.
  • Second, you can use EditorConfig file format for describing code style that WebStorm and your other editor understand and enforce in the project.
  • And third, you can use JSCS, 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.

Let’s have a closer look at these ways in which WebStorm can help you maintain a consistent code style.

IDE code style settings

If you go to IDE Preferences | Editor | Code style, you’ll see a list of languages for which WebStorm provides specific formatting options.

Let’s have a look at JavaScript code style settings and try to configure them to follow some principles of Airbnb code style.

>> Use soft tabs set to 2 spaces.
In JavaScript code style, go to Tabs and Indents and set the values of Tab size, Indent and Continuation indent to 2.


>> Place 1 space before the leading brace. Place 1 space before the opening parenthesis in control statements (if, while etc.).
On the Spaces tab, check Before Left Brace options for Functions, if, while and other keywords.

>> Place no space before the argument list in function calls and declarations.
Uncheck Function declaration parentheses and Function calls parentheses in the Before parentheses group.

Now let’s reformat our code according to this code style. This can be done with the Alt-Cmd-L (Alt-Ctrl-L on Win and Linux) shortcut. The diff view in the Local history shows how the code has changed.


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.

The code style preferences are stored in so-called schemes. The IDE Default 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.

If you’re 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 Project. Once you’ve done that, all the changes will be applied to and saved specifically for this project. You can commit codeStyleSettings.xml file from the project’s .idea 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.


One of the ways to share code style settings with colleagues who use various editors and IDEs is to use EditorConfig. 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.

WebStorm supports EditorConfig and applies the style settings described in .editorconfig file. By default these override the IDE code style settings.


You may often see an .editorconfig file in popular open-source projects: EditorConfig makes it easier for all contributors to follow the same code style.

This behavior can be disabled in Preferences | Editor | Code style – EditorConfig.

Detect and use existing indents preferences

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.

This feature is enables by default and you can disable that in Preferences | Editor | Code style – Detect and use existing file indents for editing.

This can be quite useful for file formats that you don’t often use and don’t have any specific styles configured for. Or if you are just making some minor changes in a project and don’t want to configure anything. However, we do recommend changing your IDE code style settings to fit the project’s styles if you want to work with it extensively.


JSCS 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 150 validation rules. Whenever your code doesn’t meet the validation rules, JSCS reports a warning.

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.


To get started with JSCS, install it via npm either locally in your project or globally. Then go to IDE Preferences | Languages & Frameworks | JavaScript | Code quality tools | JSCS and enable it. Make sure you have a config file in your project or you have selected one of the predefined presets.

With a recent update, JSCS provides auto-fixes for some code style rules. Press Alt+Enter on the highlighted code and select Fix current file with JSCS to have JSCS reformat your code.


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’s no an exact match between IDE settings and JSCS rules.) Go to Preferences | Editor | Code style, click Manage… next to the selected code style scheme and then Import from JSCS.


And how do you manage code styles in your team or project? Does WebStorm help you with that or not yet? We’d be glad to hear your story!

Develop with pleasure!
– JetBrains WebStorm Team

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Tutorials and tagged , , . Bookmark the permalink.

16 Responses to Maintaining Consistent Code Style

  1. Dan Major says:

    Hi, couldn’t find this anywhere so far, but is there any way to change the line formatting of ES2015 decorators on the class? The standard convention seems to be putting each decorator on its own line before the class declaration, but the current behaviour of code reformatting in WebStorm 10.0.4 puts the last/only decorator inline.




  2. Jakub says:

    There’s one feature missing: automatic reformatting of changed lines / whole file on save. There’s a workaround refining Ctrl+S (or using another short cut) but it’s impractical. I’m sure I’ve seen it somewhere – one of the plugins for Atom maybe?

    • Ekaterina Prigara says:

      In WebStorm the default workflow doesn’t require you to save files – the IDE saves everything automatically. Thus, there’re no way to assign the other actions on save. You can hit ctrl-alt-L to reformat your code or you can reassign that action to ctrl-S.

  3. Joe says:

    Looks like JSCS is redundant and unnecessary since ESLint does what it does and more.

  4. Reinhard says:

    Great work! Though the editor config has a little problem with ideaVim now.

    When using “<>” to shift left and right, ideaVim only recognizes the indent setting in system settings. while indent_size and tab_width in .editorconfig won’t effect.

  5. onemen says:

    I’m using WebStorm 2016.1.1
    Reformat this code:

    let test = 2;
    switch (test) {
    case 1: {
    let helperVar = 21;
    answer(helperVar * 2);
    case 2:
    answer('no body knows');

    look like this:

    let test = 2;
    switch (test) {
    case 1:
    let helperVar = 21;
    answer(helperVar * 2);
    case 2:
    answer('no body knows');

    Notice that the curly braces jump to a new line in case 1

  6. Ronen says:

    Is there a way of exporting IDE Code Style settings into EditorConfig .editorconfig file? Couldn’t find this export option anywhere… Would be very helpful for our team.

  7. Dmitri Moore says:

    Converting this function

    foo(function (param) { return bar(param); });

    to an arrow function in Webstorm 2016.2.2 currently results in


    Notice missing spaces around “=>”. This is pretty much the case with all arrow function intentions. How can I add spaces back, so it’s converted to this instead?

    foo(param => bar(param));

Leave a Reply

Your email address will not be published. Required fields are marked *