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

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.

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 Plik → Preferencje → Ustawienia użytkownika i dla komputerów Mac w menu Kod → Preferencje → Ustawienia 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

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, →

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.

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

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
}

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.

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

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 Plik → Preferencje → Ustawienia użytkownika lub użyj krótkich klawiszy Ctrl+ Shift+P
• Mac w menu Kod → Preferencje → Ustawienia lub ⌘,

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.

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

Teraz po zapisaniu karty nie zostaną przekonwertowane.

W prawym dolnym rogu masz Spaces: Spaces: 2

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

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

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.

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

Menu Plik → Preferencje → Ustawienia

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.

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.

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,
}

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.

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

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.