CODEWITHSUNDEEP
flutterdartvisual-studio-codeindentation
Burak İbrahim Ünal
Burak İbrahim Ünal

Reputation: 315

Visual Studio Code Flutter Format is Not Working with My Indent Space Value

I wasted my all day and i didnt understand what is going on. I'm using Visual Studio Code 1.40.2 and i am learning Flutter 3.60. Sometimes Flutter codes turn unreadable because of indent space. I only wanted to create more space (indent space) but when i use format option, tab size is turning again 2. I looked too many web sites including Stackoverflow and unfortunately i didnt find solution.It turned annoying. This is my config file: (Thanks for help)

{
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
"editor.fontSize": 18,
"editor.fontFamily": "Consolas, 'Courier New', monospace, ",
"dart.openDevTools": "flutter",
"workbench.colorTheme": "Night Owl (No Italics)",
"workbench.iconTheme": "material-icon-theme",
"editor.fastScrollSensitivity": 8,
"editor.tabSize": 8,
"editor.insertSpaces": true,
"editor.wordWrap": "on",
"editor.smoothScrolling": true,
"editor.cursorBlinking": "expand",
"editor.cursorSmoothCaretAnimation": true,
"editor.fontWeight": "400",
"outline.showFields": false,

"[dart]": {
    "editor.tabSize": 6,
    "editor.insertSpaces": true,
    "editor.detectIndentation": false,
},

}

This is my simple code:

import 'package:flutter/material.dart';

class GridListe extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
        crossAxisCount: 3,
        primary: false,
        padding: EdgeInsets.all(10),
        crossAxisSpacing: 20,
        mainAxisSpacing: 40,
        children: <Widget>[
            Container(
                alignment: Alignment.center,
                color: Colors.teal,
                child: Text(
                "Salam",
                textAlign: TextAlign.center,
                ),
            ),
        ],
    );
  }
}

When i use format code (Shift + alt + p) Codes indent space or tab size turn 2 and it will make me crazy.

import 'package:flutter/material.dart';

class GridListe extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 3,
      primary: false,
      padding: EdgeInsets.all(10),
      crossAxisSpacing: 20,
      mainAxisSpacing: 40,
      children: <Widget>[
        Container(
          alignment: Alignment.center,
          color: Colors.teal,
          child: Text(
            "Salam",
            textAlign: TextAlign.center,
          ),
        ),
      ],
    );
  }
}

Upvotes: 18

Views: 29995

Answers (6)

Mike
Mike

Reputation: 354

If your FormatOnSave doesn't work you can check if there is one more existing keybindings set to the same key as the File:save in your VS Code, because that could also stop your FormatOnSave to work. Hope it helps!

Upvotes: 0

Rasel Khan
Rasel Khan

Reputation: 4239

Edit a file name settings.json inside .vscode folder note: {if not available create like this}

then paste this json 

{
    "[dart]": {
        "editor.defaultFormatter": "Dart-Code.dart-code",
        "editor.formatOnSave": true
     },
}

follow these instruction -> Create settings.json file inside .vscode folder Write this json

Upvotes: 3

MacDev
MacDev

Reputation: 1

  1. Open Settings (json)
  2. Find [dart] and add "editor.tabSize": 4

Upvotes: 0

FortuneCookie
FortuneCookie

Reputation: 1865

Just add the below code in your ProjectDir/ProjectName/.vscode/settings.json

   {
        "editor.defaultFormatter": "Dart-Code.dart-code",
        "editor.formatOnSave": true
 }

Upvotes: 16

Toai Quoc Ngo
Toai Quoc Ngo

Reputation: 1462

Add your this in your settings.json file

"[dart]": {
   "editor.defaultFormatter": "Dart-Code.dart-code",
   "editor.formatOnSave": true
},

Upvotes: 81

Danny Tuppeny
Danny Tuppeny

Reputation: 42333

The Dart extension for VS Code uses the formatter from the Dart SDK (dart_style) which does not support customising the indent options (by design) so it will always use 2-spaces.

It is possible to disable the built-in formatter should you wish to format manually, and it's also possible for other VS Code extensions to contribute formatters for Dart - though as far as I am aware none have (yet) been created (though I have offered assistance in this issue should someone be interested in creating a VS Code extension to do this).

Upvotes: 2

Related Questions