Vue.js를위한 최고의 코드 편집기

선택할 수있는 고급 코드 편집기가 점점 더 많아짐에 따라 Vue.js에 가장 적합한 코드 편집기가 무엇인지 궁금 할 것입니다. 일부 개발자는 정치적 신념에 따라 편집자에게 헌신하기 때문에 요청한 사람에 따라 다른 답변을 얻을 수 있습니다.

그러나 Vue로 코딩 할 때 Vue를 만든 사람은 Evan You입니다. 그래서 그는 무엇을 사용합니까? Visual Studio 코드.

인터뷰에서 그는 그 주제에 대해 물었고 다음과 같이 대답했습니다.

… 최근에 TypeScript를 사용하기 시작하고 VS Code TypeScript가 우수하기 때문에 VS 코드로 (영구적으로) 전환했습니다.

Vue에서는 TypeScript를 사용할 필요가 없지만 Vue 3.0에 대한이 게시물에서 다루었 듯이 소스 코드가 곧 작성 될 것입니다.

생각할 수도 있지만… 소스 코드 작업을하고 있지 않고 Vue를 TypeScript로 코딩하지 않습니다. VS 코드가 여전히 관련이 있습니까?

이것은 Vetur의 주제로 나아갑니다. Vetur 파일은 .vue 파일의 구문 강조 표시, 스 니펫, 보푸라기, 오류 검사 및 형식 지정, 자동 완성 및 디버깅과 같은 기능을 제공합니다. 이 시점에서 코드 편집기를위한 최고의 Vue 확장입니다. 그것은 Vue 핵심 팀의 일원 인 Pine Wu가 개발했기 때문입니다.

Vue 개발을 위해 VS Code를 사용하고 싶거나 이미 VS Code를 사용하고 싶다면 VS Code를 최적화하는 방법을 아래에서 확인할 수 있습니다.

우리는 무엇을 배울 것입니까?

우리는 다음을 수행하는 방법을 배우게 될 것입니다.

  • .vue 파일에서 구문 강조 표시
  • 더 빠른 워크 플로우를 위해 코드 스 니펫 활용
  • 코드를 자동 형식화하도록 편집기 구성
  • 개발 환경을 개선 할 수있는 다른 유용한 확장 프로그램을 살펴보십시오.

Vetur 설치

Vue.js 팀의 핵심 멤버 인 Pine Wu가 디자인 한 플러그인 인 Vetur를 포함하여 VS Code를 Vue 개발에 훌륭한 환경으로 만드는 몇 가지 기능이 있습니다.

VS 코드에서 About.vue 파일과 같은 .vue 파일을 열면이 회색 코드가 모두 표시됩니다. VS 코드는 .vue 파일의 구문을 자동으로 강조 표시하지 않기 때문입니다.

Vetur는이 문제를 해결하고 개발자 경험을 향상시키기 위해 설계된 다른 기능을 제공 할 수 있습니다.

이제 설치하겠습니다. 확장 저장소를여십시오.

그런 다음 "Vetur"를 검색하고 검색 결과에서 선택한 다음 설치를 클릭하십시오. 그런 다음 새로 고침을 클릭하십시오.

Vetur의 특징

Vetur가 설치되었으므로 기능을 살펴 보겠습니다.

구문 강조 명령 + P를 입력하고 .vue 파일의 이름을 입력하면 About.vue 파일을 열 수 있습니다. 보시다시피, 이제 코드에서 구문 강조가 올바르게 표시됩니다. 굉장-더 이상 회색 코드가 없습니다.

Home.vue 파일을 확인하면 JavaScript도 올바르게 강조 표시됩니다.

스 니펫 또 다른 기능 Vetur는 코드 스 니펫과 함께 제공됩니다. 이들은 일반적으로 사용되는 코드를 신속하게 생성 할 수있는 시간 절약형 코드 스 니펫입니다.

실제로 작동하는 것을 확인하기 위해 새로운 컴포넌트를 만들어 봅시다. 이름은 EventCard.vue입니다. 이제 "scaffold"라는 단어를 .vue 파일에 입력하고 Enter 키를 누르면 단일 파일 .vue 구성 요소의 골격 또는 스캐 폴드로 해당 파일을 자동으로 채 웁니다.

Emmet Vetur는 Emmet과 함께 제공됩니다. 단축키를 사용하여 코드를 작성할 수있는 인기있는 도구입니다.

예를 들어 h1을 입력하고 Enter 키를 누르면 시작 및 종료 h1 요소가 생성됩니다.

div> ul> li와 같이 더 복잡한 것을 입력하면 다음과 같이 생성됩니다.

        
                
  •              

Emmet이 제대로 작동하지 않는 경우 사용자 설정에 추가 할 수 있습니다.

"emmet.includeLanguages": {
          "vue": "html"
      },

Emmet이 개발 속도를 높이는 방법에 대한 자세한 내용을 보려면 여기로 이동하십시오.

ESLint & Prettier 설치

이제 ESLint와 Prettier가 설치되어 있는지 확인해야합니다. 확장 저장소에서 ESLint를 검색 한 다음 설치합니다. 그리고 Prettier도 마찬가지입니다. 설치되면 다시로드를 눌러 VS 코드를 다시로드합니다.

ESLint 구성

이것들이 설치되었으므로 약간의 추가 구성이 필요합니다.

터미널에서 프로젝트를 만들 때 전용 구성 파일을 사용하여 프로젝트를 만들도록 선택했습니다.이 .eslintrc.js 파일을 통해이 프로젝트에 대해 ESLint를 구성 할 수 있습니다. 전용 파일을 선택하지 않은 경우 package.json에서 ESLint 구성을 찾을 수 있습니다.

따라서 .eslintrc.js 파일에 다음을 추가합니다.

'plugin : 예뻐요 / 추천'

이렇게하면 기본 설정으로 ESLint에서 Prettier 지원이 활성화됩니다.

이제 파일은 다음과 같습니다.

module.exports = {
      뿌리 : 사실,
      env : {
        노드 : true
      },
      '연장': [
        'plugin : vue / essential',
        'plugin : prettier / recommended', //이 줄을 추가했습니다
        '@ vue / prettier'
      ],
      규칙 : {
        'no-console': process.env.NODE_ENV === 'production'? 'error': 'off',
        'no-debugger': process.env.NODE_ENV === 'production'? '오류': '꺼짐'
      },
      파서 옵션 : {
        파서 : 'babel-eslint'
      }
    }

더 예쁘게 구성

또한 개인 스타일이나 팀의 환경 설정에 따라 특별한 설정을 추가하기 위해 Prettier 구성 파일을 생성하는 옵션도 있습니다.

여기에서 생성하고 이름을 .prettierrc.js로 지정합니다.

그리고 안에 다음과 같이 입력합니다 :

module.exports = {
        singleQuote : 참,
        세미 : 거짓
    }

큰 따옴표를 작은 따옴표로 변환하고 세미콜론이 자동으로 삽입되지 않도록합니다.

사용자 설정

훌륭한 개발 경험을 위해 VS 코드를 더욱 최적화하기 위해 사용자 설정에 몇 가지 구성을 추가합니다. 사용자 설정에 액세스하려면 상단 탐색 표시 줄에서 코드를 클릭 한 다음 기본 설정, 설정을 차례로 클릭하십시오. 그러면 json에서 설정을 추가 할 수있는 사용자 설정 창이 나타납니다.

먼저 다음을 추가하려고합니다.

"vetur.validation.template": false

Vetur의 보푸라기 기능이 해제됩니다. 우리는 ESLint + Prettier를 대신 사용합니다.

이제 우리는 ESLint에게 어떤 언어 (vue, html 및 javascript)를 검증하기를 원하고 각각에 autoFix를 true로 설정하려고합니다.

"eslint.validate": [
        {
            "언어": "뷰",
            "autoFix": true
        },
        {
            "language": "html",
            "autoFix": true
        },
        {
            "언어": "자바 스크립트",
            "autoFix": true
        }
    ],

그런 다음 ESLint에 autoFixOnSave를 알려줄 것입니다.

"eslint.autoFixOnSave": true,

그리고 에디터 자체에게 formatOnSave를 알려주십시오.

"editor.formatOnSave": true,

그것을 테스트

이것이 작동하는지 테스트하기 위해 여기에 EventCard 구성 요소에 데이터 속성을 추가하고 "단일하고 싶다"는 인용 부호를 추가 한 다음 여기에도 세미콜론을 넣습니다. 저장을 누르면 따옴표가 작은 따옴표로 변환되고 세미콜론이 제거됩니다. 대단하네요. 작동합니다.

추가 도구

이제 개발 속도를 높이는 데 도움이되는 몇 가지 추가 도구를 살펴 보겠습니다.

복사 상대 경로 복사 상대 경로는 파일이 연결된 디렉토리와의 관계에 따라 파일이있는 위치를 복사 할 수있는 확장명입니다.

검색하고 설치 한 다음 작동하는지 봅시다.

Home.vue 파일에는 HelloWorld 구성 요소를 가져 오는 상대 경로가 이미 있습니다.

가져 오려는 파일의 상대 경로를 가져 오려면 파일을 마우스 오른쪽 단추로 클릭 한 다음 상대 경로 복사를 선택하십시오. 복사 한 내용을 붙여 넣으면 정확한 상대 경로가 표시됩니다. 이 src를 주목하십시오. 이 주석은 프로젝트 설정 방식 때문에 @를 대신 사용할 수 있음을 알려줍니다.

통합 터미널 VS 코드 편집기의 편리한 내장 기능은 통합 터미널이며 별도의 터미널로 전환하는 대신 사용할 수 있습니다. 바로 가기 키를 사용하여 열 수 있습니다 :`ctrl +``

더 많은 스 니펫 편리한 코드 스 니펫을 추가로 설치하려면 Core Vue 팀원 Sarah Drasner가 작성한 Vue VSCode 스 니펫 전체를 다운로드 할 수 있습니다.

이름이 sarah.drasner 인 확장 프로그램을 검색해 보겠습니다. 저기 그들이있어. 이제 설치하고 새로 고침 할 수 있습니다.

그것들을 실제로 살펴 보도록하겠습니다.

템플릿의 요소에 vif를 입력하면 v-if 문이 표시되고 von을 입력하면 전체 이벤트 처리기가 제공됩니다. 데이터 속성을 수동으로 입력하는 대신 vdata 만 입력하면됩니다. vprops로 prop을 추가하기 위해 같은 작업을 수행 할 수 있습니다. vimport-lib를 사용하여 라이브러리를 빠르게 가져 오는 코드를 만드는 데 사용할 수도 있습니다. 보다시피, 이것들은 매우 유용하고 시간을 절약하는 스 니펫입니다.

이 스 니펫 확장 프로그램을 사용하는 경우 사용자 설정에 줄을 추가하는 것이 좋습니다.

vetur.completion.useScaffoldSnippets는 false 여야합니다

이렇게하면이 스 니펫이 Vetur와 충돌하지 않습니다.

색상 테마 마지막으로 VS 코드에서 테마를 변경하는 방법이 궁금하거나 여기에서 사용중인 테마가 궁금한 경우 코드> 환경 설정> 색상 테마로 이동할 수 있습니다.

보시다시피, FlatUI Dark를 사용하고 있습니다. 여기에서 테마 색상을이 옵션 중 하나로 변경하거나 확장 프로그램 저장소에서 다른 테마를 검색 할 수 있습니다.

원하는 것이 보이지 않으면 온라인으로 Visual Studio Marketplace로 이동할 수도 있습니다. 여기에서 친구 Sarah Drasner의 Night Owl과 같은 다양한 플러그인과 테마를 미리 볼 수 있습니다. 브라우저에서 직접 설치 한 다음 색상 테마 기본 설정에서 찾을 수 있습니다.

계속 학습

나와 계속 학습하기 위해 VueMastery.com에서 실제 Real Vue 과정을 수강 할 수 있습니다.