How to set code style indent on 2 spaces for vuejs

What options did you try namely?

Formatting in <template> section uses HTML code style preferences (Settings | Editor | Code Style | HTML | Tabs and Indents); JavaScript in <script> tag is formatted according to javascript settings (Settings | Editor | Code Style | JavaScript | Tabs and Indents)

Note that preferences in project .editorconfig file may override IDE settings, so, if you have this file in your project, either change it accordingly or disable EditorConfig support in Settings | Editor | Code Style by clearing Enable EditorConfig support checkbox

Hi Elena,

I'm having this same problem with .vue files.  Here is video to show the issue(link below).  Also I have no .editorconfig.  I also stopped and started phpstorm to confirm it's using the Settings | Editor | Code Style | JavaScript | Tabs and Indents.

http://recordit.co/PRB3BqDQ7w

Thanks for your help.

From your screenshot is seems that indent is correct - 2 spaces.

ESLint warning is likely caused by additional <script> tag contents indent (ESlint expects it to be not indented); issue is tracked as https://youtrack.jetbrains.com/issue/WEB-30382. as a workaround, try adding 'script' tag to the list of Do not indent child of in Settings -> Editor -> Code style -> HTML -> Other

HI Elena,

Thanks for the quick response.  I'm not sure you noticed but when I hit the tab key it would always indent 4 spaces.  I want the tab to always indent 2 spaces.  The indentation you were referring to in the video are there thru me manually spacing, not using the tab.  

What is the result of Code | Reformat Code?

Please also make sure to disable EditorConfig support in Settings | Editor | Code Style by clearing Enable EditorConfig support checkbox prior to performing your tests

Hi Elena,

I see no option to disable EditorConfig support in Settings | Editor | Code Style by clearing Enable EditorConfig support checkbox.  See this:  http://recordit.co/R8SC87SqcH

There is no .editorconfig.  See this: http://recordit.co/yNuA8n1PRD

What is the result of Code | Reformat Code?

On code that is not properly formatted it reformats it properly with 2 spaces.  

Is there just a simple way to have the editor follow all formatting/spacing/indents and so on rules set in eslint?

Thanks for your help.

You can import code style preferences from ESLint - see https://www.jetbrains.com/help/webstorm/eslint.html#ws_js_linters_eslint_import_code_style_from_eslint

But note that Vue-specific rules from 'eslint-plugin-vue' can't be currently imported, please follow https://youtrack.jetbrains.com/issue/WEB-34649 for updates

Make sure 'Detect and use existing file indents for editing' is turned off as well. It's under Editor -> Code Style

I'm working a project in Vuejs and my .editorconfig file specifies 2 spaces for tab "indent_size = 2", but every time I copied some code and paste it in another place, the code reformatted itself to 4 spaces for every tab.

The solution was to go to Editor > Code Style > JavaScript "Tabs and Indents" and set
  Tab size: 2
  Indent: 2
  Continuation indent: 2.

Hope this helps you.

>my .editorconfig file specifies 2 spaces for tab "indent_size = 2", but every time I copied some code and paste it in another place, the code reformatted itself to 4 spaces for every tab.

it's a known issue, https://youtrack.jetbrains.com/issue/WEB-40900. Please follow it for updates

Thanks.

Elena Pogorelova

Thanks for the issue link, however my Tab still inserts 4 spaces instead of two. Maybe because I use TypeScript?

But auto align will correctly use 2 spaces, only Tab key inserts 4 instead of two.

EDIT:

Found a new issue for this: https://youtrack.jetbrains.com/issue/WEB-33617

In my Webstorm, 2019.3, the whitespace in my .vue files are affected by these code styles:

<template>:
Preferences > HTML > Tabs and Indents > Indent

<script>:
Preferences > JavaScript > Tabs and Indents > Indent
Preferences > HTML > Other > Do not indent children of: add "script" to the list

<style>:
Preferences > HTML > Tabs and Indents > Indent (WEIRD)
Preferences > HTML > Other > Do not indent children of: add "style" to the list