Tips & Tricks

Using JavaScript Standard Style

Standard is a popular JavaScript code style guide. It can also lint your code since it’s built on top of ESLint and, therefore, it can also be used as an ESLint plugin.

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.

As Standard is based on ESLint, its support is implemented via WebStorm’s ESLint integration.

Enable linting with Standard via ESLint

If you open a project with `standard` listed in its package.json file, WebStorm will enable linting with Standard automatically. Run `npm install` to see warnings reported by Standard in the editor.


To enable linting with Standard yourself, go to Preferences/Settings | Languages & Frameworks | JavaScript | Code Quality Tools | ESLint, select Manual ESLint configuration and specify the location of the standard package in the ESLint Package field.

Apply code style rules

WebStorm will also suggest to set Standard code style for formatting.


Once you click Yes, the code style options available in WebStorm will be set the way Standard suggests.

You can also do this manually. For this, go to Preferences/Settings | Editor | Code Style | JavaScript, click Set from…, and select JavaScript Standard Style. This style will then replace your current scheme.


Please note that Standard can report a wider range of code style issues than WebStorm can automatically fix.

Fix issues with WebStorm and ESLint

Some of the issues Standard reports can be fixed by Standard or ESLint (depending on what you’re using). Press Alt+Enter on the highlighted code in the editor and select Fix current file.


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.

The WebStorm team

Comments below can no longer be edited.

15 Responses to Using JavaScript Standard Style

  1. Avatar

    Juliusz Fedyk says:

    June 14, 2017

    What would be the easiest way to apply semi-standard as default?

    • Ekaterina Prigara

      Ekaterina Prigara says:

      June 14, 2017

      If you just need the code formatting and not the full linting:
      – go to Preferences | Editor | Code Style | JavaScript
      – click Set from Predefined Style – Standard
      – in the Punctuation tab select: Use semicolons

      If you also need linting:
      – do the steps described above
      – go to Preferences | Languages & Frameworks | JavaScript | Code Quality Tools | ESLint
      – click Enable
      – make sure the path in the ESLint package field points to the ESLint local (or global) package
      – below switch the radio button to “Configuration file” and specify the path to the following file in the node_modules folder: eslint-config-semistandard/eslintrc.json

      Both eslint and eslint-config-semistandard modules are installed as dependencies of semistandard.

  2. Avatar

    Lars Reimann says:

    August 6, 2017

    Is there a way to enable Standard for the script section of a .vue file?

    • Ekaterina Prigara

      Ekaterina Prigara says:

      August 7, 2017

      If you’re using Standard as an ESLint plugin, linting should work fine in WebStorm 2017.2.1. Just make sure you have eslint-plugin-html installed and in .eslintrc file you have "plugins": ["html"]
      Linting .vue files with Standard itself will be fixed in the next bug-fix update. Please follow this issue:

  3. Avatar

    Gabriel Porras says:

    November 29, 2017

    I’m using StandardJS and works perfect as you explain.
    But when I use Code > Reformat Code (Ctrl + Alt + L) WebStorm damage some spaces.
    How I can set that Reformat Code uses StandardJS style?

    • Avatar

      Ssekirime Geofrey says:

      January 15, 2018

      Has this been resolved, I am facing a similar issue

      • Ekaterina Prigara

        Ekaterina Prigara says:

        January 15, 2018

        Can you please provide an example?

        • Avatar

          Ssekirime Geofrey says:

          January 15, 2018

          consider this VueJS component

          {{ msg }}

          /** webstorm added indentations **/
          export default {
          name: ‘StComponent’,
          data () {
          return {
          msg: ‘Dummy Component’

          /** What ESLint expects **/
          export default {
          name: ‘StComponent’,
          data () {
          return {
          msg: ‘Dummy Component’

          /* component styles go here */

          under the section when I instruct WebStorm to Reformat the code it adds additional indentation spaces which ESLint complains about with this message -> Expected indetation of 0 spaces but found 2

  4. Avatar

    Dave says:

    June 28, 2018

    Hmm I thought maybe if I added this to my .eslintrc, that the code style rules would prompt me to add a const in front of undeclared variables but it doesn’t:

    “prefer-const”: “error”

    • Ekaterina Prigara

      Ekaterina Prigara says:

      June 28, 2018

      No, sorry, right now it only imports settings related to the code formatting. But it sounds like a good new feature.

  5. Avatar

    winniehell says:

    October 11, 2018

    Thank you so much for this! It’s exactly how an IDE(A) should be. 🙂

  6. Avatar

    Matthew Adams says:

    July 31, 2019

    Can you update this blog to address using standard in WebStorm with @typescript-eslint/parser & @typescript-eslint/eslint-plugin so that WebStorm properly formats and enforces rules on *.ts files?

    • Ekaterina Prigara

      Ekaterina Prigara says:

      August 1, 2019

      Hello Matthew, if you are using Standard with ESLint, you should just see the warnings from the linter in the editor straight away. If not, please check the ESLint page in the IDE Preferences | Languages and Frameworks | JavaScript | Code Quality Tools.
      Unfortunately, it’s not possible to apply Standard/ESLint code style rules to the IDE TypeScript code style configuration directly, but as a workaround, you can apply it to the JavaScript code style and then copy to TypeScript code style: first use the Apply ESLint Code Style action in the context menu of the .eslintrc file, then go to Preferences | Editor | Code Style | TypeScript and use Set from… – JavaScript. Hope it helps!

  7. Avatar

    RB says:

    May 23, 2020

    This is out of date. in the current version, there is no “enable” checkbox, and the other options do not allow you to select a package — just the node module, then the IDE complains that there’s no ESLint configuration file.

    WebStorm 2020.1.1
    Build #WS-201.7223.93, built on April 30, 2020
    Licensed to Rich Burdon
    Subscription is active until February 8, 2021
    Runtime version: 11.0.6+8-b765.40 x86_64
    VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
    macOS 10.15.4
    GC: ParNew, ConcurrentMarkSweep
    Memory: 725M
    Cores: 16
    Non-Bundled Plugins: com.intellij.lang.jsgraphql

    • Ekaterina Ryabukha

      Ekaterina Ryabukha says:

      May 25, 2020

      Thanks for pointing it out, I’ll try to update the blog post this week. For the most up-to-date information, we recommend referring to our documentation: Blog posts are not updated as frequently as our documentation is.