Using JavaScript Standard Style

Posted on by Ekaterina Prigara

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.

error-from-standard

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.

use-standard

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.

select-js-standard-style-in-preferences

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.

fix-with-standard-or-ws

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. Juliusz Fedyk says:

    June 14, 2017

    What would be the easiest way to apply semi-standard as default?
    https://github.com/Flet/semistandard

    • 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. Lars Reimann says:

    August 6, 2017

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

    • 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: https://youtrack.jetbrains.com/issue/WEB-28197

  3. Gabriel Porras says:

    November 29, 2017

    Hello,
    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?
    Thanks

    • Ssekirime Geofrey says:

      January 15, 2018

      Has this been resolved, I am facing a similar issue

      • Ekaterina Prigara says:

        January 15, 2018

        Can you please provide an example?

        • 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. 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 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. winniehell says:

    October 11, 2018

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

  6. 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 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. 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 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: https://www.jetbrains.com/help/webstorm/eslint.html. Blog posts are not updated as frequently as our documentation is.