WebStorm configuration for Standard Style
WebStorm recently announced native support
for standard
directly in the IDE!
This applies to all JetBrains products, including PhpStorm, IntelliJ, RubyMine, etc.
If you still prefer to configure standard
manually, use the following guide.
- Close your IDE.
- Figure out where your configuration lives (IDE Settings section)
- Navigate to
your-config-dir/codestyles
. If this directory doesn't exist, create it in the WebStorm config settings directory - Create a
Standard.xml
file:
<code_scheme name="Standard">
<JSCodeStyleSettings>
<option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
<option name="USE_DOUBLE_QUOTES" value="false" />
<option name="SPACES_WITHIN_IMPORTS" value="true" />
</JSCodeStyleSettings>
<codeStyleSettings language="JavaScript">
<option name="KEEP_BLANK_LINES_IN_CODE" value="1" />
<option name="SPACE_BEFORE_METHOD_PARENTHESES" value="true" />
<option name="KEEP_SIMPLE_BLOCKS_IN_ONE_LINE" value="true" />
<option name="KEEP_SIMPLE_METHODS_IN_ONE_LINE" value="true" />
<indentOptions>
<option name="INDENT_SIZE" value="2" />
<option name="CONTINUATION_INDENT_SIZE" value="2" />
<option name="TAB_SIZE" value="2" />
</indentOptions>
</codeStyleSettings>
</code_scheme>
- You may install dependencies and config globally or locally and with support of ES7 or without it
- Local install:
npm install --save-dev eslint-config-standard eslint-config-standard-jsx eslint-plugin-promise eslint-plugin-react eslint-plugin-standard
echo '{"extends": ["standard", "standard-jsx"]}' > .eslintrc
- Global install:
npm install --global eslint-config-standard eslint-config-standard-jsx eslint-plugin-promise eslint-plugin-react eslint-plugin-standard
echo '{"extends": ["standard", "standard-jsx"]}' > ~/.eslintrc
Be aware: The second command above will overwrite an existing .eslintrc
if one exists.
If you choose global install, the first command may require you to use sudo
. If
it does require sudo, that means you do not have permission to write to the
directories that npm uses to store global packages. Standard
will work, but if
you would like to fix it, read this article.
- Start up the IDE and open a Settings/Preferences screen (choose between project and default settings accordingly to your preference)
- Under
Editor > Code Style > JavaScript
changeScheme
toStandard
- Under
Editor > Code Style > HTML
just selectOther
, inSpaces
setting, checkIn empty tag
- Under
Editor > Inspections > JavaScript > Code style issues
untickUnterminated statement
- Under
Languages & Frameworks > JavaScript > Code Quality Tools > ESLint
just selectEnable
. If you didn't installESLint
before and you don't have it in your dependencies - that's all. If you do - be sure to useESLint package
of the same version as current version ofstandard
is using. Or just remove your old one - you probably won't need it anymore