Programing

탭-공간 변환 계수를 사용자 정의하는 방법은 무엇입니까?

crosscheck 2020. 9. 30. 08:42
반응형

탭-공간 변환 계수를 사용자 정의하는 방법은 무엇입니까?


Visual Studio Code를 사용할 때 탭-공간 변환 계수를 사용자 지정하는 방법은 무엇입니까?

예를 들어, HTML에서는을 누를 때마다 두 개의 공백을 생성하는 것처럼 TAB보이지만 TypeScript에서는 4를 생성합니다.


기본적으로 Visual Studio Code는 여는 파일에 따라 들여 쓰기 옵션을 추측합니다.

을 통해 들여 쓰기 추측을 끌 수 있습니다 "editor.detectIndentation": false.

당신은 이러한 세 가지 설정을 통해 쉽게 사용자 정의 할 수 있습니다 윈도우 메뉴에서 파일환경 설정사용자 설정 및 대한 메뉴에서 코드환경 설정설정 또는 ⌘,:

// 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

버전 1.21을 실행 중이지만 이전 버전에도 적용될 수 있다고 생각합니다.

화면 오른쪽 하단을 살펴보십시오. Spaces또는 라는 내용이 표시되어야합니다 Tab-Size.

광산은 공백을 보여줍니다.-> 여기에 이미지 설명 입력

  1. 온 클릭 Spaces(또는 Tab-Size)
  2. Indent Using Spaces또는 선택Indent using Tabs
  3. 원하는 공간이나 탭의 양을 선택하십시오.

이것은 프로젝트 전체가 아닌 문서별로 만 작동합니다. 프로젝트 전체에 적용하려면 "editor.detectIndentation": false사용자 설정 에도 추가 해야합니다.


개발자 방식을 좋아한다면 Visual Studio Code를 사용하면 tabSize. 다음은 settings.json기본 4 개 공백 및 JavaScript / JSON 2 공백 이있는 나의 예입니다 .

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

추신 :이 파일을 여는 방법을 모르는 경우 (특히 새 버전의 vscode에서) 다음을 수행 할 수 있습니다.

left-bottom gear-> Settings-> 하단으로 스크롤하여 클릭Edit in settings.json


기본적으로 Visual Studio Code는 현재 열려있는 파일의 들여 쓰기를 자동으로 감지합니다. 이 기능을 끄고 모든 들여 쓰기 (예 : 두 개의 공백)를 만들려면 사용자 설정 또는 작업 영역 설정에서 다음을 수행합니다.

{
    "editor.tabSize": 2,

    "editor.detectIndentation": false
}

우리는 할 수 있습니다 파일 유형 탭의 크기를 제어EditorConfig비주얼 스튜디오 코드 확장 . 그런 다음 Alt+ Shift+ F를 각 파일 유형에 맞게 만들 수 있습니다 .

설치

ext install EditorConfig

구성 예

.editorconfig

[*]
indent_style = space

[*.{cs,js}]
indent_size = 4

[*.json]
indent_size = 2

settings.json

EditorConfig는 편집기에 대해 구성한 settings.json을 재정의합니다. 변경할 필요가 없습니다 editor.detectIndentation.


You want to make sure your editorconfig is not conflicting with your user or workspace settings configuration, as I just had a bit of annoyance thinking the settings files settings were not being applied when it was my editor configuration undoing those changes.


That is lonefy.vscode-js-css-html-formatter to blame. Disable it, and install HookyQR.beautify.

Now on save your tabs wouldn't be converted.


If you use the prettier extension in vscode, try adding this to the settings.json file:

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

"prettier.tabWidth": 4,
"prettier.useTabs": true  // this made it finally work for me 

In your bottom-right corner, you have Spaces: Spaces: 2

There you can change the indentation according to your needs: Indentation Options


If the accepted answer on this post doesn't work, give this a try:

I had EditorConfig for Visual Studio Code installed in my editor, and it kept overriding my user settings which were set to indent files using spaces. Every time I switched between editor tabs, my file would automatically get indented with tabs even if I had converted indentation to spaces!!!

Right after I uninstalled this extension, indentation no longer changes between switching editor tabs, and I can work more comfortably rather than having to manually convert tabs to spaces every time I switch files - that is painful.


In VSC version 1.31.1 or more (I think). Like sed Alex Dima. You can customize this easily via these settings for

  • Windows in menu File → Preferences → User Settings or use short keys ctr + shift + p
  • Mac in menu Code → Preferences → Settings or ⌘,

여기에 이미지 설명 입력

여기에 이미지 설명 입력


Menu FilePreferencesSettings

Add to user settings:

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

then right click your document if you have one opened already and click Format Document to have your existing document follow these new settings.


@alex-dima's solution from 2015 will change tab sizes and spaces for all files and @Tricky's solution from 2016 appears to only change the settings for the current file.

As of 2017, I found another solution that works on a per-language basis. Visual Studio Code was not using the proper tab sizes or space settings for Elixir, so I found that I could change the settings for all Elixir files.

I clicked on the language in the status bar ("Elixir" in my case), chose "Configure 'Elixir' language based settings...", and edited the Elixir-specific language settings. I just copied the "editor.tabSize" and "editor.insertSpaces" settings from the default settings on the left (I'm so glad those are shown) and then modified them on the right.

It worked great, and now all Elixir language files use the proper tab size and space settings.


When using TypeScript, the default tab width is always two regardless of what it says in the toolbar. You have to set "prettier.tabWidth" in your user settings to change it.

Ctrl + P, Type → user settings, add:

"prettier.tabWidth": 4

If this is for Angular 2, and the CLI is generating files which you would like differently formatted, you can edit these files to change what is generated:

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

Not massively recommended as an npm update will delete your work, but it has saved me a lot of time.


I tried to change editor.tabSize to 4, but .editorConfig overrides whatever settings I had specified, so there is no need to change any configuration in user settings. You just need to edit .editorConfig file:

set indent_size = 4

User3550138 is correct. lonefy.vscode-js-css-html-formatter overrides all the settings mentioned in other answers. However, you don't have to disable or uninstall it as it can be configured.

확장 사이드 바를 열고이 확장을 클릭하면 전체 지침을 찾을 수 있으며 편집기 작업 공간에 구성 지침이 표시됩니다. 적어도 Visual Studio Code 버전 1.14.1에서는 나를 위해합니다.

참고 URL : https://stackoverflow.com/questions/29972396/how-to-customize-the-tab-to-space-conversion-factor

반응형