How to set code style indent on 2 spaces for vuejs

Hi,

 

After 2 hours of research, I give up and claim some help here.

I want to use vuejs code style recommanddation + airbnb javascript coding style.

Both define tab indent to 2 spaces. I triedd everything I could to set the coding style of my vuejs files and no way to find how to do thing very basic thing.

I use vuejs plugin by the way, I try to set indent for javascript file and "other type file" and there is no vuejs file type in settings code style.

Is somebody can help me to figure out how to set this ?

 

Thanks in advance for your help.

15 comments
Comment actions Permalink

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

1
Comment actions Permalink

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.

0
Comment actions Permalink

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

6
Comment actions Permalink

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.  

0
Comment actions Permalink

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

1
Comment actions Permalink

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

 

 

0
Comment actions Permalink

What is the result of Code | Reformat Code?

0
Comment actions Permalink

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.

 

 

0
Comment actions Permalink

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

0
Comment actions Permalink

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

0
Comment actions Permalink

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.

 

0
Comment actions Permalink

>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

0
Comment actions Permalink

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

1
Comment actions Permalink

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

 

1

Please sign in to leave a comment.