Visual Studio 코드를 사용자 지정하는 방법

Visual Studio Code, Microsoft의 새로운 오픈 소스 코드 편집기는 개발자들에게 많은 멋진 기능을 제공합니다. 소스 코드 편집 프로세스를 용이하게한다.. 게다가 Visual Studio Code는 사용자가 작업 할 때 지루해하지 않도록합니다. 모양의 여러 부분을 사용자 정의, 색상, 글꼴, 간격 및 텍스트 형식과 같은 여러 가지 기능을 사용할 수 있습니다. 보풀 과 유효성 검사 규칙.

이 게시물에서 처음에는 Visual Studio 코드 작업 영역의 모양을 변경하는 방법, 다음 두 가지의 도움으로 기본 설정을 사용자 정의하는 방법을 보여 드리겠습니다. JSON-형식이 지정된 구성 파일.

VS 코드에서 색상 테마를 설정하는 방법

Visual Studio 코드를 사용하면 사용자 정의 색상 테마 설정 당신의 편집자를위한.

미리 만들어진 테마를 사용하려면 파일> 환경 설정> 색상 테마 메뉴를 선택하십시오. 너가 명중 할 때 “들어가다”, 명령 팔레트가 나타나고 선택할 수있는 테마의 드롭 다운 목록을 표시합니다.

언론을 통해 동일한 효과를 얻을 수 있습니다. F1 명령 팔레트를 열고 환경 설정 : 색상 테마 명령을 입력 필드에 입력하십시오..

드롭 다운 목록의 옵션을 롤오버 할 때, 작업 공간의 모양이 실시간으로 변경됩니다., 원하는 테마가 가장 적합한 테마를 신속하게 확인할 수 있습니다..

나는 선택했다. “고 대비” 색상 테마, 내 눈은 최고가 아니므로. 내보기는 다음과 같습니다..

VS 코드 마켓 플레이스에서 테마를 설치하는 방법

기본적으로 VS 코드가 제공하는 색상 테마가 마음에 들지 않으면 VS 코드 마켓 플레이스에서 많은 다른 색상을 다운로드 할 수 있습니다.

마켓 플레이스가 현재 가지고있는 테마를 살펴볼 수 있습니다. 마켓 플레이스에서 테마를 설치하려면 F1 VS 코드 편집기에서 명령 팔레트를 열려면 다음을 입력하십시오. 내선 설치 명령을 입력 필드에 입력하고 마지막으로 확장 프로그램 : 확장 프로그램 설치 옵션 목록에서 팝업.

이 옵션을 클릭하면 명령 팔레트의 새 인스턴스가 나타납니다. 유형 "ext install theme" 명령을 새로운 입력 필드에 추가하면 모든 주제의 목록을 얻는다. VS 코드 마켓 플레이스에서 구할 수있는.

나는 테마를 선택했다. “소재 테마 키트”, 그것을 클릭하여 설치하십시오. 색상 테마 목록의 새 테마를 다른 기본 테마와 같은 위치에 두려면 다음을 수행해야합니다. VS 코드를 다시 시작하십시오.. 다시 시작하면 새 테마가 테마 목록에 나타나며 명령 팔레트에서 설정할 수 있습니다.

새로운 Material Theme을 사용하면 편집자는 다음과 같이 보입니다.

이전 테마로 돌아갈 수 있습니다 (내가 그 테마를 여전히 좋아하기 때문에 내가했던 것처럼). 또는 다른 테마로 좀 더 놀아 당신에게 가장 적합한 것을 볼 수 있습니다..

원한다면 다음과 같이 할 수도 있습니다. 사용자 정의 테마 만들기, vsce 확장 관리자 도구를 사용하여 VS 코드 마켓 플레이스에 게시하십시오..

사용자 및 작업 영역 설정 변경

VS 코드는 사용자 정의 테마를 설정할 수있게 해줄뿐만 아니라 다른 많은 설정을 구성하십시오., 서식 규칙, 다양한 기능 사용, 오류 보고서, HTTP 설정, 파일 연결, linting 규칙 등.

JSON 형식의 두 가지 구성 파일을 편집하여이 작업을 수행 할 수 있습니다. VS 코드가 사용자 정의를 신속하게 추가하는 매우 직관적이고 직관적 인 방법을 제공하므로, 전문가 일 필요는 없습니다..

처음에는 두 구성 파일의 차이점을 알아 보겠습니다. VS 코드에는 두 개의 범위가 있습니다 (글로벌 과 노동 조합 지부) 설정을위한, 따라서 두 개의 별도의 파일 :

세계적인 settings.json, 각 작업 공간에 대해 구성 규칙이 유효합니다.
작업 공간 관련 .vscode / settings.json, 그것은 개별 작업 공간에만 관련이 있습니다.

그만큼 글로벌 settings.json 파일은 운영 체제가 다른 모든 응용 프로그램 관련 구성 파일을 각각 저장하는 폴더에서 찾을 수 있습니다.

Windows의 경우 : % APPDATA % \ Code \ User \ settings.json
Linux : $ HOME / .config / Code / User / settings.json
Mac의 경우 : $ HOME / 라이브러리 / Application Support / Code / User / settings.json

그만큼 작업 공간 관련 settings.json 파일은 현재 프로젝트의 폴더에 저장됩니다. 기본적으로이 파일은 존재하지 않지만 사용자 지정 작업 영역 설정을 추가하는 즉시 VS 코드는 .vscode / settings.json 한 번에 파일을 만들고 사용자 지정 작업 영역 관련 구성을이 파일에 저장합니다..

그래서 언제 당신이 settings.json 파일들?

VS 코드에서 사용자 지정 구성 규칙을 모든 당신의 프로젝트를 글로벌 settings.json 파일.

귀하의 설정이 귀하의 현재 프로젝트, 그것들을 작업 공간과 관련된 settings.json 파일.

작업 영역 설정이 전역 설정을 무시합니다., 그러므로 조심 해주시길 바랍니다.

전역 설정이 호출됩니다. “사용자 설정” VS 코드. 그것들을 클릭하거나 파일> 환경 설정> 사용자 설정 메뉴를 선택하거나 표현식을 입력하여 “사용자 설정” 커맨드 팔레트 (F1을 사용하여 엽니 다).

VS 코드는 서로 옆에 두 개의 창이 열립니다. 왼쪽에는 구성 가능한 모든 옵션이 포함되고 오른쪽에는 구성 가능한 모든 옵션이 표시됩니다. settings.json 파일. 이 파일에 사용자 지정 구성 규칙을 배치해야합니다..

보시다시피, 다른 작업을 수행 할 필요가 없습니다. 변경하려는 설정을 왼쪽에서 오른쪽으로 복사하여 붙여넣고 수정 된 값을 추가하십시오.

간단한 예를 살펴 보도록하겠습니다 (그러나 개인의 필요에 따라 다른 수정을 할 수 있습니다). 나는 폰트 패밀리를 바꿀 것이고, 탭 기본 4 개 스페이스에서 2 개로, 작업 파일의 최대 수를 9 개에서 5 개로 줄이고 중복 스타일과 관련된 CSS linting 규칙 중 하나를 "무시하다" 에 "경고".

복사하여 붙여 넣은 후에 내 전역 settings.json 파일은 다음과 같습니다.

 // 기본 설정  "editor.fontFamily": "Courier New", "editor.tabSize": 2, "explorer.workingFiles.maxVisible": 5, "css.lint.duplicateProperties"를 덮어 쓰려면이 파일에 설정을 지정하십시오. : "경고"

수정 된 내용을 저장 한 후 settings.json 파일을 편집하면 내 에디터가 한 번에 바뀝니다 (글꼴 패밀리 만 변경된 스크린 샷이 표시됨).

마찬가지로 작업 공간 설정을 변경할 수 있습니다. 이제 클릭해야합니다. 파일> 환경 설정> 작업 공간 설정 상단 메뉴 표시 줄에서 작업 영역과 관련된 .vscode / settings.json 파일.

작업 영역 설정은 사용자 설정과 완전히 동일한 구성 옵션을 가지며 동일한 복사 붙여 넣기 기술을 사용할 수 있습니다. 두 가지 차이점이 있습니다. 범위 (전역 대신 로컬)와 settings.json 사용자 지정 구성이 저장 될 파일.