Jak mogę dostosować współczynnik konwersji tabulacji na spację?

852

Jak dostosować współczynnik konwersji tabulacji na spację podczas korzystania z programu Visual Studio Code?

Na przykład teraz w HTML wydaje się tworzyć dwie spacje na jedno naciśnięcie TAB, ale w TypeScript daje 4.

J. Abrahamson
źródło

Odpowiedzi:

1359

Domyślnie program Visual Studio Code próbuje odgadnąć opcje wcięcia w zależności od otwieranego pliku.

Możesz wyłączyć zgadywanie wcięć za pomocą "editor.detectIndentation": false.

Możesz to łatwo dostosować za pomocą tych trzech ustawień dla systemu Windows w menu PlikPreferencjeUstawienia użytkownika i dla komputerów Mac w menu KodPreferencjeUstawienia lub ⌘,:

// The number of spaces a tab is equal to. This setting is overridden
// based on the file contents when `editor.detectIndentation` is true.
"editor.tabSize": 4,

// Insert spaces when pressing Tab. This setting is overriden
// based on the file contents when `editor.detectIndentation` is true.
"editor.insertSpaces": true,

// When opening a file, `editor.tabSize` and `editor.insertSpaces`
// will be detected based on the file contents. Set to false to keep
// the values you've explicitly set, above.
"editor.detectIndentation": false
Alex Dima
źródło
1
Hej Guss, czy zechciałbyś wskazać mi plik, w którym zgadywanie jest błędne? Proszę również podzielić się tym, jak skonfigurowałeś te dwa ustawienia (tabSize i insertSpaces) i czego oczekujesz. Dzięki! :)
Alex Dima,
5
Skonfigurowałem oba ustawienia na „auto”, a zachowanie nie jest takie, jak się spodziewam (chociaż nie posunąłbym się tak daleko, by nazwać to „złym”). Nie wiem, który plik powinien zostać zmieniony, aby obsługiwać moją konwencję, ale otworzyłem za to bilet na fakturę użytkownika , jak sugerowano w odpowiedzi na pytanie # 30057721
Guss
4
Czy istnieje również opcja ustawienia domyślnego dla nowych, pustych plików? W tym scenariuszu nie ma wiele do zgadnięcia i myślę, że VSCode domyślnie używa spacji (których nie preferuję) ...
Stijn de Witt
Fwiw, istnieje również opcja ustawień miejsca pracy, dzięki czemu możesz ustawić inne zachowanie według projektu, który zastępuje ustawienia użytkownika. 2 ¢
ruffin
1
Dzięki skarbie. Czy istnieje sposób zmiany tabSizewedług języka? np. podczas edycji wielu plików w różnych językach w tym samym obszarze roboczym (np. Ruby, JavaScript, CSS itp.) - Ruby to 2spacje, ale CSS 4... zwykle.
Jacob Barnard
692

Używam wersji 1.21, ale myślę, że może to dotyczyć również wcześniejszych wersji.

Spójrz na prawą dolną część ekranu. Powinieneś zobaczyć coś, co mówi Spaceslub Tab-Size.

Mój pokazuje spacje, →

Wpisz opis zdjęcia tutaj

  1. Kliknij spacje (lub tabulatory )
  2. Wybierz Wcięcie za pomocą spacji lub Wcięcie za pomocą tabulatorów
  3. Wybierz liczbę spacji lub zakładek, które lubisz.

Działa to tylko na dokument, a nie na cały projekt. Jeśli chcesz zastosować go w całym projekcie, musisz również dodać "editor.detectIndentation": falsedo ustawień użytkownika.

Zdradliwy
źródło
jak się robi # 3? Po wybraniu # 2 wydaje się, że nie ma sposobu, aby po prostu „wybrać ilość spacji ... lubisz”. Dzięki.
Chris22
Cały czas myślałem: „To musi być jakoś możliwe…” To wyjaśnia jak.
vlz
189

Cóż, jeśli podoba Ci się sposób programisty, Visual Studio Code pozwala określić różne typy plików dla tabSize. Oto przykład mojego settings.jsonz domyślnymi czterema spacjami i JavaScript / JSON dwoma spacjami:

{
  // I want my default to be 4, but JavaScript/JSON to be 2
  "editor.tabSize": 4,
  "[javascript]": {
    "editor.tabSize": 2
  },
  "[json]": {
    "editor.tabSize": 2
  },

  // This one forces the tab to be **space**
  "editor.insertSpaces": true
}

PS: Cóż, jeśli nie wiesz, jak otworzyć ten plik (szczególnie w nowej wersji programu Visual Studio Code), możesz:

  1. Lewy dolny bieg →
  2. Ustawienia → prawy górny róg Otwórz Ustawienia

 

Wpisz opis zdjęcia tutaj

Xin
źródło
105

Domyślnie program Visual Studio Code automatycznie wykrywa wcięcie bieżącego otwartego pliku. Jeśli chcesz wyłączyć tę funkcję i zrobić całe wcięcie, na przykład dwa spacje, wykonaj następujące czynności w Ustawieniach użytkownika lub Ustawieniach obszaru roboczego.

{
    "editor.tabSize": 2,

    "editor.detectIndentation": false
}
Jim Doyle
źródło
57

Możemy kontrolować rozmiar tabulatorów według typu pliku za pomocą EditorConfig i jego EditorConfig dla rozszerzenia VS Code . Następnie możemy dostosować Alt+ Shift+ Fdo każdego typu pliku.

Instalacja

ext install EditorConfig

Przykładowa konfiguracja

.editorconfig

[*]
indent_style = space

[*.{js,ts,json}]
indent_size = 2

[*.java]
indent_size = 4

[*.go]
indent_style = tab

settings.json

EditorConfig zastępuje wszystkie ustawienia setup.json dla edytora. Nie ma potrzeby zmiany editor.detectIndentation.

Shaun Luttin
źródło
O extczym mówisz (odpowiedz, edytując odpowiedź, a nie tutaj w komentarzach (jeśli to konieczne))? Jakieś problemy z Node.js? Jaka platforma?
Peter Mortensen,
12

Jeśli używasz ładniejszego rozszerzenia w programie Visual Studio Code, spróbuj dodać to do pliku settings.json:

"editor.insertSpaces": false,
"editor.tabSize": 4,
"editor.detectIndentation": false,

"prettier.tabWidth": 4,
"prettier.useTabs": true  // This made it finally work for me
slowpoke123
źródło
8

W Visual Studio Code w wersji 1.31.1 lub nowszej (myślę): Podobnie jak sed Alex Dima , możesz to łatwo dostosować za pomocą tych ustawień

  • Windows w menu PlikPreferencjeUstawienia użytkownika lub użyj krótkich klawiszy Ctrl+ Shift+P
  • Mac w menu KodPreferencjeUstawienia lub ,

Wpisz opis zdjęcia tutaj

Wpisz opis zdjęcia tutaj

Andrey Patseiko
źródło
7

Chcesz się upewnić, że konfiguracja edytora nie powoduje konfliktu z konfiguracją ustawień użytkownika lub obszaru roboczego, ponieważ miałem trochę irytacji, myśląc, że ustawienia plików ustawień nie zostały zastosowane, gdy moja konfiguracja edytora cofnęła te zmiany.

Travis Brown
źródło
7

To lonefy.vscode-js-css-html-formatterwina. Wyłącz i zainstaluj HookyQR.beautify.

Teraz po zapisaniu karty nie zostaną przekonwertowane.

użytkownik3550138
źródło
7

W prawym dolnym rogu masz Spaces: Spaces: 2

Tam możesz zmienić wcięcie według swoich potrzeb: Opcje wcięcia

Dacomis
źródło
4

Podczas korzystania z TypeScript domyślna szerokość tabulacji wynosi zawsze dwa, niezależnie od tego, co jest napisane na pasku narzędzi. Musisz ustawić „prettier.tabWidth” w ustawieniach użytkownika, aby go zmienić.

Ctrl+ P, Wpisz → ustawienia użytkownika, dodaj:

"prettier.tabWidth": 4
Steve Hanov
źródło
4

Jeśli zaakceptowana odpowiedź na ten post nie działa, spróbuj:

Miałem EditorConfig dla Visual Studio Code zainstalowanego w moim edytorze i nadal zastępowało moje ustawienia użytkownika, które były ustawione na wcięcie plików za pomocą spacji. Za każdym razem, gdy przełączam się między kartami edytora, mój plik automatycznie wcina się w tabulatory, nawet gdybym przekonwertował wcięcie na spacje !!!

Zaraz po odinstalowaniu tego rozszerzenia wcięcia nie zmieniają się między przełączaniem kart edytora i mogę pracować wygodniej, zamiast konieczności ręcznej konwersji kart na spacje za każdym razem, gdy zmieniam pliki - to bolesne.

dhruvpatel
źródło
4

Istnieje już wiele dobrych odpowiedzi od naszych ukochanych członków społeczności. Naprawdę chciałem dodać tabSize kodu C # i znalazłem ten wątek. Znalazłem wiele rozwiązań, a oficjalne dokumenty VS Code są niesamowite. Chcę tylko udostępnić moje ustawienie C #:

"[csharp]": {
    "editor.insertSpaces": true,
    "editor.tabSize": 4
},

po prostu skopiuj i wklej powyższy kod do swojego settings.jsonpliku i zapisz. dzięki

Pan Jamal Uddin
źródło
1
Tak, jest to odpowiedni sposób, jeśli chcesz ustawić inny format dla określonego języka. Lubię używać tabulatorów z tabWidth = 2, ale autopep8 tego nienawidzi.
Abhishek Kasireddy
2

Menu PlikPreferencjeUstawienia

Dodaj do ustawień użytkownika:

"editor.tabSize": 2,
"editor.detectIndentation": false

następnie kliknij dokument prawym przyciskiem myszy, jeśli już go otworzyłeś i kliknij polecenie Formatuj dokument, aby istniejący dokument był zgodny z tymi nowymi ustawieniami.

Gmoney Mozart
źródło
2

Rozwiązanie @ alex-dima z 2015 roku zmieni rozmiary tabulatorów i spacje dla wszystkich plików, a rozwiązanie @ Tricky z 2016 roku zmienia tylko ustawienia dla bieżącego pliku.

Od 2017 roku znalazłem inne rozwiązanie, które działa w zależności od języka. Program Visual Studio Code nie używał odpowiednich rozmiarów tabulatorów lub ustawień miejsca dla Elixir , więc stwierdziłem, że mogę zmienić ustawienia dla wszystkich plików Elixir.

Kliknąłem język na pasku stanu (w moim przypadku „Elixir”), wybrałem „Konfiguruj ustawienia oparte na języku Elixir” ... ”i edytowałem ustawienia języka specyficzne dla Elixir. Właśnie skopiowałem ustawienia „editor.tabSize” i „editor.insertSpaces” z domyślnych ustawień po lewej stronie (cieszę się, że są one pokazane), a następnie zmodyfikowałem je po prawej stronie.

Działa świetnie, a teraz wszystkie pliki językowe Elixir używają odpowiedniego rozmiaru tabulatora i ustawień miejsca.

Kevin Peter
źródło
1

Musiałem dokonać wielu zmian ustawień, takich jak poprzednie odpowiedzi, więc nie wiem, co sprawiło, że zadziałało po wielu modyfikacjach.

Nic nie działało, dopóki nie zamknął i openen mojego IDE, ale ostatnie trzy rzeczy zrobiłem było Wyłącz lonefy.vscode-js-css-html-formatter, "html.format.enable": true,a ponowne uruchomienie programu Visual Studio.

{
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "workbench.colorTheme": "Default Light+",
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features",
        "editor.tabSize": 2,
        "editor.detectIndentation": false,
        "editor.insertSpaces": true
    },
    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true,
    "editor.tabSize": 2,
    "typescript.format.insertSpaceAfterConstructor": true,
    "files.autoSave": "afterDelay",
    "html.format.indentHandlebars": true,
    "html.format.indentInnerHtml": true,
    "html.format.enable": true,
    "editor.detectIndentation": false,
    "editor.insertSpaces": true,
}
użytkownik742102
źródło
0

Jeśli dotyczy to Angulara 2, a CLI generuje pliki, które chcesz inaczej sformatować, możesz edytować te pliki, aby zmienić to, co jest generowane:

npm_modules/@angular/cli/blueprints/component/files/__path__/*

Niezalecane jako aktualizacja npm usunie twoją pracę, ale zaoszczędziło mi to dużo czasu.

Ben Taliadoros
źródło
0

Próbowałem zmienić edytor .tabSizena 4, ale .editorConfigzastępuje ustawienia, które określiłem, więc nie ma potrzeby zmiany konfiguracji w ustawieniach użytkownika. Musisz tylko edytować plik .editorConfig:

set indent_size = 4
Gh111
źródło
-1

Użytkownik 3550138 jest poprawny. lonefy.vscode-js-css-html-formatterzastępuje wszystkie ustawienia wymienione w innych odpowiedziach. Nie trzeba go jednak wyłączać ani odinstalowywać, ponieważ można je skonfigurować.

Pełne instrukcje można znaleźć, otwierając pasek boczny rozszerzeń i klikając to rozszerzenie, a instrukcje konfiguracji zostaną wyświetlone w obszarze roboczym edytora. Przynajmniej robi to dla mnie w Visual Studio Code wersja 1.14.1.

DRL
źródło