2015년 5월 24일 일요일

[Visual Studio Code Docs 번역] Visual Studio Code 기본

* 개인 학습을 위한 번역글이니 참고용으로만 읽어주시면 감사하겠습니다. 잘못된 부분은 댓글로 알려주시면 업데이트 하도록 하겠습니다.

원문 주소 : https://code.visualstudio.com/Docs

1. 왜 Visual Studio Code 인가?
2. Visual Studio Code 설치하기

3. Visual Studio Code 기본 (이 글)

Visual Studio Code 기본

본질적으로, Visual Studio Code는 코드 에디터이다. 다른 많은 코드 에디터 처럼 VSCode에 기본적인 UI와 좌측에 탐색기가 배치되어 있어 당신이 접근할 수 있는 모든 파일과 폴더가 보여지고, 오른쪽에는 당신이 연 파일의 컨텐츠가 보여진다.

추가적으로 VSCode 사용자 인터렉션에 다수의 유니크한 특징이 있다. 이러한 부분들에 대해서 이번에 기술하고자 한다.

파일, 폴더 & 프로젝트

VSCode는 파일과 폴더 기반(- VSCode에서 폴더나 파일을 여는 즉시 시작할 수 있는)이다

이것 외에, VSCode 다양한 플랫폼과 프레임워크 기반의 프로젝트 파일을 읽거나 가져올 수 있다. 예를 들어 VSCode에서 폴더를 열었을 때, 한 개 이상의 package.json, project.json, tsconfig.json 또는 ASP .NET v5 비주얼스튜디오 솔루션과 프로젝트 파일을 포함하면 VSCode는 이 파일들을 읽은 후 에 인텔리센스와 같은 추가적인 기능을 제공하게 될 것이다.

VSCode 실행하기

여러분은 파일이나 폴더 또는 프로젝트를 빠르게 열기위해 VSCode를 커맨드라인으로부터 실행할 수 있다.

VSCode에서 index.html파일 열기 :

code index.html

c:\src\Contents 폴더 열기 :

code c:\src\contents

VSCode는 폴더나 프로젝트를 여는 동안에 이것을 분간하지 못한다. 대신에 프로젝트 파일을 포함하는 폴더를 연 경우, VSCode는 그 파일들을 읽고 상태바에 상황을 보여줄 것이다. 만약 한개 이상의 프로젝트가 발견되면 프로젝트 사이를 전환할 수 있다.

프로젝트 파일이 포함된 c:\src\WebApp 폴더 열기:

code c:\src\webapp

다시말해서, 프로젝트를 포함하는 폴더를 여는 것은 사실상 프로젝트를 여는 것 것이다:

현재 폴더 열기:

code .

기본 레이아웃

VSCode는 폴더나 프로젝트의 전체 내용에 접근하고 조회할 수 있는 여유공간을 남겨놓고도 에디터를 위한 최대 공간을 제공하는 심플하고 직관적인 레이아웃이 딸려있다. UI는 4개의 영역으로 나눠져있다.

에디터 파일을 편집하기 위한 메인 영역이다. 3개의 에디터를 나란히 열 수 있다.
사이드바 프로젝트에서 작업하는 동안 당신을 도와주는 Explorer 같은 다른 뷰들을 포함한다
상태바 열려있는 프로젝트와 편집중인 파일에 대한 정보를 표시한다.
뷰바 좌측 끝 부분에, 뷰들 사이를 전환할 수 있게 해주고, Git을 이용 중일 때, 로컬파일 변경사항 숫자와 같은 부가적인 내용을 보여주는 특정한 인디케이터이다.

VSCode를 실행할 때마다, 마지막으로 종료했던 상태 그대로 열어준다. 폴더, 레이아웃, 열었던 파일들이 유지된다.

나눠진 탭들에 파일들이 배치되는 대신에 VSCode는 최대 3개의 파일을 나란히, 최대 3개의 보여지는 에디터에 오도록한다.

이것은 탭을 관리하는데 오버헤드를 줄여주는데 도움을 주지만 함께 편집할 수 있는 파일의 숫자를 제한하지 않는다. Explorer 뷰는 당신이 필요로 하는 파일에 빠르게 접근하도록 작업파일들의 목록을 유지한다.

팁: 당신은 사이드바를 오른쪽으로 이동하거나(View, Move Sidebar) or 보기를 켜고 끌수 있다 (⌘B).

사이드 바이 사이드 편집

당신은 최대 3개의 에디터를 나란히 열 수 있다.

만약 하나의 에디터를 이미 열었다면, 또 하나의 에디터를 열어 기존의 에디터 옆에 놓는 방법은 여러가지가 있다:

Ctrl (Mac: Cmd) + Explorer에서 파일을 클릭한다.
⌘\ 활성화된 에디터를 둘로 나눈다.
Explorer의 파일 위에서 컨텍스트 메뉴의 Open to the Side 를 통해서.

항상 또 다른 파일을 열때마다 활성화된 에디터에 파일의 내용이 출력된다. 그래서 에디터가 나란히 있을 때, ‘foo.cs’라는 파일을 오른쪽 에디터에 열고 싶은 경우, ‘foo.cs’파일을 열기 전에 에디터의 안쪽을 클릭하여 활성화 시켜줘야 한다.

팁: 에디터의 크기를 조정하고 순서를 재배치 할 수 있다. 에디터 제목 영역을 드래그 앤 드롭하여 재배치 하거나 에디터 크기를 조절한다

Explorer

Explorer는 프로젝트 내의 폴더, 파일들을 조회하고 열고 관리하기 위해 사용된다.

VSCode에서 폴더를 열면, Explorer에 폴더의 컨텐츠가 보여진다. 여기에서 많은 것들을 할 수 있다:

폴더와 파일의 생성, 삭제, 이름변경
드래그 앤 드롭으로 폴더와 파일의 이동
모든 옵션을 보기 위한 컨텍스트 메뉴 이용

팁: VSCode의 바깥으로부터 드래그하여 Explorer의 안으로 드롭하여 항목을 복사할 수 있다.

At the top of the Explorer의 최상단 섹션은 Working Files이라고 표기되어있다. 이 섹션은 활성화된 파일들의 목록이다. 이 파일들은 이전에 VSCode에서 작업하며 열었던 파일들이다. 예를들어, 당신이 아래와 같이 한다면 Working Files 섹션의 파일 목록에 보여질 것이다 :

파일을 변경한다
Explorer에서 파일을 더블클릭한다
현재 폴더가 아닌 부분의 파일을 연다

작업이 끝났을 때, Close All 동작을 사용하여 섹션의 모든 파일을 닫을 수 있다.

팁: ⌘O 를 타이핑하여 해당이름의 파일을 빠르게 검색하고 열 수 있다.

VSCode는 당신이 사용했을 특수한 커맨드라인 도구들과도 훌륭하게 작동한다.VSCode에 현재 열려있는 폴더의 내용에 대해 커맨드라인 도구를 실행하고 싶다면, 폴더에서 오른쪽 클릭 후 Open in Console를 선택한다.

또한 파일이나 폴더에서 오른쪽 클릭 후 Reveal in Explorer (또는 Mac에서 Reveal in Finder)를 선택하여 파일탐색기(파인더)의 폴더나 파일의 위치로 이동 할 수 있다.

저장/자동저장

기본적으로 VSCode는 변경사항을 디스크에 저장하기 위해 확실한 동작을 필요로 한다, ⌘S.

그러나, 유휴시간(idle)에 변경사항을 저장하는 Auto Save 를 켜는 것은 쉽다. 이 옵션을 켜면 파일을 저장하는 확실한 동작을 할 필요가 없다. 이것은 매우 훌륭한 점이 될 수 있지만, 만약 태스크 자동화를 위한 파일 감시자(watcher)를 사용한다면 당신은 이 동작을 끄고 싶어할 것이다. 그래서 태스크가 백그라운드에서 실행될 때, 한층 더 훌륭하게 컨트롤 할 수 있다.

자동저장을 켜기 위해서는 (또는 끄기 위해서는) 간단하게 컨트롤 팔레트를 열어, ⇧⌘P, 목록을 필터하기 위해 auto 를 타이핑 한 후에 엔터를 누른다. 단지 그 뿐이다, 끝났다.

또한 File 메뉴에서 옵션형태로 이 세팅을 찾아볼 수 있다.

검색

VSCode는 열려있는 폴더 내의 모든 파일에 거쳐 빠르게 검색할 수 있게 해준다. 간단히 ⇧⌘F 입력하여 검색하면 된다. 일치한 부분과 위치가 포함된 검색 결과가 파일에 그룹화 된다. 파일을 확장하면 파일 내의 모든 검색결과를 미리 볼 수 있다. 그리고 일치한 항목 중의 하나를 클릭하여 에디터에서 살펴볼 수 있다.

팁: 검색상자에서 정규표현식 검색을 지원한다.

⇧⌘J를 타이핑하여 고급 검색 옵션을 설정할 수 있다. 추가적인 검색 옵션 필드가 보일 것이다.

VSCode는 기본적으로 검색결과 수를 줄이기 위해 필요없는 (예: node_modules) 몇몇 폴더를 제외할 것이다. 세팅 화면을 열어 search.excludeFolders섹션 아래에 이 규칙을 변경한다.

팁: Explorer에서 폴더 위에서 오른쪽 클릭 후 Find in Folder 를 선택하여 한 폴더 안에서만 검색할 수 있다.

명령어 팔레트(커맨드팔레트)

VSCode는 동일하게 키보드로 접근 할 수 있다. 알아야 할 가장 중요한 키 조합은 커맨드 팔레트를 가져오는 ⇧⌘P 키다. 여기서부터 대부분의 일반적인 동작을 위한 키보드 단축키를 포함한 VSCode의 모든 기능에 접근 할 수 있다.

명령어 팔레트 UI는 많은 명령어들에 접근하도록 해준다. 에디터 명령, 파일열기, 심볼검색, 파일의 빠른 아웃라인보기 등의 모든 것들을 동일한 인터렉티브 윈도우에서 실행할 수 있다. 여기 몇가지 팁이 있다:

⌘O 는 파일 접근하거나 간단하게 이름을 입력하여 심볼에 접근 가능하게 한다.
⌃Tab 최근 열었던 파일 셋을 순환한다.
⇧⌘P 에디터 명령어를 바로 불러온다.
⇧⌘O 파일의 특정 심볼로 이동한다
⌃G 특정파일로 이동한다

? 를 입력상자에 입력하면 현재 실행가능한 명령어 리스트를 가져올 수 있다:

파일 네비게이션

Explorer는 프로젝트를 탐색할 때 파일 들 사이를 이동하기에 아주 훌륭하다. 어쨌던, 작업을 하는 동안에 같은 파일셋 사이를 빠르게 넘나드는 스스로를 발견하게 될 것이다. VSCode는 파일 사이를 오가기 위한 두가지 강력한 명령어를 사용하기 쉬운 키바인등과 함께 제공한다.

VSCode가 실행되었을 때 열렸던 파일의 모든 목록을 보기 위해 ⌃Tab 을 누른다. 이것들 중의 하나를 열기위해, Ctrl (Mac: Cmd) 키를 누른 상태에서 Tab 을 눌러 이동하고자 하는 파일을 선택한다.

그 대신, ⌃- 와 ⌃⇧- 를 이용하여 파일 사이를 이동하고 위치를 이동할 수 있다. 만약 같은 파일의 다른 라인으로 이동하고 싶다면, 위의 단축키들을 이용하여 쉽게 이동할 수 있다.

팁: ⌘O.를 눌러 이름으로 어떤 파일이든 열 수 있다.

다음 단계

이제 기본 UI 단계를 통과 했다. - VSCode에는 더 많은 것들이 있다. 아래 항목들에 대해서 읽어보라:

기본사항들 - VSCode에 대한 기본적인 소개
개선된 편집 - Lint, IntelliSense, Lightbulbs, Peek and Goto Definition 등등
사용자화 - 테마, 환경설정과 키보드 바인딩 등

일반적인 질문들

Q: 글로벌 검색 및 치환이 가능한가?

A: 이 기능은 아직 적용되지 않았지만 향후에 적용될 예정이다!

2015년 5월 22일 금요일

[Visual Studio Code Docs 번역] Visual Studio Code 설치하기

* 개인 학습을 위한 번역글이니 참고용으로만 읽어주시면 감사하겠습니다. 잘못된 부분은 댓글로 알려주시면 업데이트 하도록 하겠습니다.

원문 주소 : https://code.visualstudio.com/Docs

1. 왜 Visual Studio Code 인가?
2. Visual Studio Code 설치하기 (이 글)
3. Visual Studio Code 기본

비주얼 스튜디오 설치하기

Mac OS X

Mac OS X 용 Visual Studio Code를 다운로드 한다.
VSCode-osx.zip 를 더블클릭하여 내용을 푼다.
Visual Studio Code.app 를 드래그 하여 Applications 폴더에 놓고 Launchpad에서 사용 가능하도록 한다.
아이콘 위에서 마우스 오른쪽 버튼을 클릭하여 Options, Keep in Dock 를 선택하여 VSCode를 독에 추가한다.

팁: 만약 터미널에서 VSCode 를 실행하고자 한다면 .bash_profile 파일에 아래 내용을 추가하라.

code () {

    if [[ $# = 0 ]]

    then

        open -a "Visual Studio Code"

    else

        [[ $1 = /* ]] && F="$1" || F="$PWD/${1#./}"

        open -a "Visual Studio Code" --args "$F"

    fi

}

이제, 편집하고자 하는 파일이 있는 어느 폴더에서든지 간단히 code . 를 타이핑하면 된다.

Linux

Linux용 Download Visual Studio Code 를 다운로드 한다.
새로운 폴더를 만들고 그 안에 VSCode-linux-x64.zip 파일을 압축푼다.
Code 를 더블클릭하여 Visual Studio Code를 실행한다.

팁: 만약 터미널에서 VSCode 를 실행하고자 한다면 Code 를 실행하기 위한 절대 경로, /path/to/vscode/Code 를 대신하는 링크를 만든다.

sudo ln -s /path/to/vscode/Code /usr/local/bin/code

이제, 편집하고자 하는 파일이 있는 어느 폴더에서든지 간단히 code . 를 타이핑하면 된다.

Windows

윈도우즈용 Visual Studio Code 를 다운로드 받는다.
VSCodeSetup.exe 를 더블클릭하여 설치 프로그램을 실행합니다. 이것은 몇 분도 안걸릴 것입니다.

설치 위치는 C:\Users\username\AppData\Local\Code 입니다.

팁: Visual Studio Code 는 path에 추가될 것입니다. 그래서 콘솔에서 간단하게 code . 를 타이핑하여 VSCode 를 해당 폴더에서 실행할 수 있습니다.

팁: PATH환경 변수의 변경사항이 적용되려면 설치 후에 로그오프를 해야할 수도 있습니다.

추가적인 도구들

Visual Studio Code는 기존의 툴 체인을 통합합니다. 우리는 아래 툴들이 당신의 개발 경험에 향상을 줄 것이라 생각합니다.

ASP.NET 5 - 웹과 클라우드 애플리케이션 개발을 위해 구성된 프레임워크로, 완전한 오픈소스이며 GitHub에서 볼 수 있다.
NodeJS (incudes NPM) - 쉽고 빠르게, 확장가능한 네트워크 애플리케이션을 개발할 수 있는 플랫폼이다.
git - VSCode는 git을 사용한 소스 코드 제어를 위한 내장된 지원 기능을 갖고 있다.
Yeoman - 애플리케이션 스캐폴딩 도구로 VSCode에서 File | New Project 와 같은 것이라고 생각할 수 있다.
generator-aspnet - ASP.NET 5 애플리케이션을 위한 yeoman 생성기로, 설치하기 위해 npm install -g generator-aspnet 를 실행한다.
hottowel - 빠른 AngularJS 애플리케이션 생성을 위한 yeoman 생성기로 , 설치하기 위해 npm install -g generator-hottowel 를 실행한다.
Express - Node 애플리케이션을 위한 프레임워크로, Jade 템플릿 엔진을 사용한다.
gulp - 스트리밍 태스크 러너 시스템으로 VSCode의 태스크와 통합되어 있다.
mocha - Node 상에서 실행되는 JavaScript 테스트 프레임워크이다.
bower - 클라이언트 사이드 패키지 매니저이다.
TypeScript - 좋은 부분을 유지한채로 당신의 자바스크립트 코드를 구조적이고 강력하게 타이핑 할 수 있다.
TypeScript definition manager - 인기있는 JavaScript 프레임워크를 위한 100여 가지의 TypeScript 정의 파일을 검색하고 다운로드 하며, VSCode에서 훌륭한 인텔리센스를 제공한다.

다음단계

이제 VSCode를 설치했으니, 아래 사항을 진행해봅시다.

기본사항들 - VSCode에 대한 기본적인 소개
개선된 편집 - Lint, IntelliSense, Lightbulbs, Peek and Goto Definition 등등
디버깅 - VSCode의 어느부분이 진짜 빛나는지 알 수 있는 부분이다.

[볼만한 동영상] 영국남자 - 불닭 볶음면 도전 영상

영국남자 불닭 볶음면 도전 영상

불닭 볶음면.. 전 무서워서 입에도 못 댈 것 같네요 ㅎㅎㅎ

[Visual Studio Code Docs 번역] 왜 Visual Studio Code 인가?

* 개인 학습을 위한 번역글이니 참고용으로만 읽어주시면 감사하겠습니다. 잘못된 부분은 댓글로 알려주시면 업데이트 하도록 하겠습니다.

원문 주소 : https://code.visualstudio.com/Docs

1. 왜 Visual Studio Code 인가? (이 글)
2. Visual Studio Code 설치하기
3. Visual Studio Code 기본

왜 Visual Studio Code 인가?

Visual Studio Code는 개발자들에게 개발툴 선택에 있어서 대부분의 개발자들이 필요로 하는 핵심 개발주기에서 간결하고 능률적인 경험의 코드에디터 라는 새로운 선택을 제공한다. Visual Studio Code는 비주얼 스튜디오 제품군에서 OSX, Linux, Windows를 지원하는 첫 번째 코드 에디터이며 크로스플랫폼 개발툴이다.

Visual Studio Code run's on Max OSX, Linux and Windows

이 핵심부에는, Visual Studio Code의 특징인 강력하고, 매일 사용하기에 적합한 빠른 코드에디터가 있다. Code의 프리뷰 릴리즈에서는 수십가지 언어 지원과 함께 코드/ 텍스트 편집기, 네비게이션, 커스터마이즈 가능한 키보드 바인딩 지원, 구문 강조, 괄호 맞춤, 자동 들여쓰기 그리고 스니핏 등의 개발자들이 필요로 하는 수 많은 특징을 이미 포함하고 있다.

무거운 코딩의 경우, 개발자들은 종종 단순한 텍스트보다는 코드로 작업 하는 것을 필요로 한다. Visual Studio Code는 내장된 인텔리센스 코드 자동 완성 지원, 풍부한 시멘틱 코드 해석 및 네비게이션, 그리고 코드 리팩터링 기능을 포함한다. 프리뷰에서, Code는 C#을 이용한 ASP.NET 5 개발, TypeScript와 JavaScript를 이용한 Node.js 개발을 위해 풍부한 내장 기술을 포함하고 있고 이는 비주얼스튜디오에 의해 동작하는 동일한 기술 기반 하에 있다. Code는 HTML, CSS, Less, Sass 그리고 JSON과 같은 웹기술을 위한 훌륭한 툴을 포함하고 있다.

또한 Code는 패키지 매니저와 리포지터리, 빌드, 일상적인 작업흐름을 더 빠르게 하는 기타 일반적인 작업들이 통합되어있다. 그리고 Code는 Git을 이해하고 Git의 작업흐름에 훌륭하게 전달하고 소스 비교가 에디터에 통합되어있다.

하지만 개발자들은 모든 시간을 쓸 필요가 없이 코딩과 디버깅을 오가며 그냥 코드만 작성하면 된다. 디버깅은 비주얼스튜디오에서 가장 인기있는 특징이고 종종 IDE 로부터 개발자들이 원하는 코딩 경험 특징 중의 하나이다. Visual Studio Code 프리뷰에서는 간결함, Node.js 디버깅을 지원하는 통합된 디버깅 경험을 포함하고 후에는 더 포함할 예정이다.

설계적인 면에서, Visual Studio Code는 최고의 웹, 네이티브 그리고 특정언어 기술을 아우른다. GitHub Electron Shell을 사용하여 Code는 네이티브 앱처럼 빠르고 유연성 있게 JavaScript, Node.js 같은 웹 기술을 결합할 수있다. Code는 강력한 HTML 기반의 에디터, “Monaco” 클라우드 에디터 기술, 인터넷 익스플로러의 F12 도구, 그리고 다른 프로젝트들의 동일한 새 버전, 그리고 빠른 버전을 사용한다. 그리고 Code는 Roslyn for .NET, TypeScript, Visual Studio 디버깅 엔진 등등의 Visual Studio에 기반한 많은 서비스 아키텍쳐 도구들을 사용한다. 앞으로의 프리뷰버전에서 이 아키텍쳐를 지속적으로 발전시키고 보완하여, Visual Studio Code가 개발자가 빌드, 플러그인 사용, 편집-빌드-디버그 경험에서 강력하게 커스터마이즈 하도록 대중적인 확장성있는 모델을 포함할 것이다.

우리는, 물론, 여전히 아주 초기버전의 Visual Studio Code다. 만약 코드 에디터 중심의 개발툴을 선호한다거나, 웹과 클라우드 애플리케이션의 크로스플랫폼 빌드를 한다면, 당신을 Visual Studio Code 프리뷰에 초대하고, 당신이 어떻게 생각하는지 우리에게 알려주길 바란다.