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.

error-from-standard

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.

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: go to Preferences | Editor | Code Style | JavaScript and click Set from Predefined Style – Standard. This style will then replace your current scheme.

set-from-standard

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.

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.

2 Responses to Using JavaScript Standard Style

  1. Juliusz Fedyk says:

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

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

Leave a Reply

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