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, in WebStorm 2017.1 we added lots of new JavaScript code style options that are defined in Standard (such as the use of semicolons and trailing commas and quotes 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

Assuming Standard (or eslint-config-standard) is listed in package.json, when you open a new project WebStorm will notice that and 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 | Languages & Frameworks | JavaScript | Code Quality Tools | ESLint, select the Enable check-box and select the path to the Standard package in the drop-down list. (Standard can be installed either locally in your project’s node_modules folder, or globally.)

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: go to Preferences | Editor | Code Style | JavaScript and click Set from Predefined Style – Standard. 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.

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.

13 Responses to Using JavaScript Standard Style

  1. Juliusz Fedyk says:

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

    • Ekaterina Prigara says:

      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:

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

    • Ekaterina Prigara says:

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

    • Ssekirime Geofrey says:

      Has this been resolved, I am facing a similar issue

      • Ekaterina Prigara says:

        Can you please provide an example?

        • Ssekirime Geofrey says:

          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:

    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:

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

  5. winniehell says:

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

  6. 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:

      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!

Leave a Reply

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