Tips & Tricks

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!

Happy developing!

Your JetBrains WebStorm Team

Comments below can no longer be edited.

20 Responses to Maintaining Consistent Code Style

  1. Avatar

    Dan Major says:

    August 25, 2015

    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.


    class MyClass extends Base { ...


    @anotherDecorator class MyClass extends Base { ...


    • Ekaterina Prigara

      Ekaterina Prigara says:

      August 25, 2015

      Thanks for a comment. Created an issue:
      You can vote for it and follow the updates on its status.

      • Avatar

        Dan Major says:

        August 25, 2015

        Thanks very much! +1

  2. Avatar

    Jakub says:

    August 25, 2015

    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

      Ekaterina Prigara says:

      August 26, 2015

      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. Avatar

    Joe says:

    August 28, 2015

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

    • Avatar

      Gil Barbara says:

      October 13, 2015

      Yeah, ESLint all the way!
      It covers both JSCS and JSHint functionalities and much more.

    • Avatar

      Gabriel Porras says:

      August 22, 2016

      JSCS has merged with ESLint! as seen in:

      • Ekaterina Prigara

        Ekaterina Prigara says:

        August 23, 2016

        Yes, but you can still use JSCS in your project.

  4. Avatar

    Reinhard says:

    November 6, 2015

    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. Avatar

    onemen says:

    May 1, 2016

    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. Avatar

    Ronen says:

    August 4, 2016

    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.

    • Avatar

      Alex says:

      August 9, 2016

      +1 looking for that also!

  7. Avatar

    Dmitri Moore says:

    August 23, 2016

    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));`

    • Ekaterina Prigara

      Ekaterina Prigara says:

      August 23, 2016

      Unfortunately, you can’t configure code style for arrow function in WebStorm 2016.2, but it will be possible in the upcoming WebStorm 2016.3:

  8. Avatar

    Anil Namde says:

    March 8, 2017

    It seems now eslint and jscs code together as a package. As ESLint has .eslintrc file ESLint works fine but seems JSCS is not able to extract properties from .eslintrc (I think this is fine as ESLint is fine alone).

    But problem I face is with “code style” of JavaScript. As i am using airbnb preset while fixing js code styles with eslint are different from editors default indentation (which keeps causing red colors to show in editor).

    is there a way to keep them in sync Or say way to load eslin’s code style automatically in Intellij’s JS styles ?

    • Ekaterina Prigara

      Ekaterina Prigara says:

      March 9, 2017

      At the moment it’s not possible to import the code style from the ESLint configuration file to WebStorm. Here’s a feature request about it:
      We are planning to start working on it some time soon, but it’s a big task: ESLint has several hundred options and matching them to the WebStorm existing code style option automatically is not that easy.
      We encourage you to spend some time to configure the key code style options in the IDE like indents and quotes style manually to match the Airbnb style. That should improve your current experience with the WebStorm formatter significantly.

  9. Avatar

    Martijn van der Lee says:

    March 29, 2019

    Will editorconfig ever be supported in the base install of PHPStorm, as it does for some or your other editors?

    • Avatar

      Maxim Kolmakov says:

      April 1, 2019

      The plugin is supported, it’s just not bundled by default. The plugin is indeed very popular for PhpStorm users so we will think about bundling. Thank you for the heads up!