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.

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

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

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

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

Leave a Reply

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