웹 스 톰 에 Vue.js 단일 파일 구성 요소 의 하 이 라이트 와 문법 지원 을 추가 합 니 다.

본 고 는 WebStorm 에 Vue.js 단일 파일 구성 요 소 를 추가 하 는 하 이 라이트 와 문법 적 지원 을 상세 하 게 설명 하고 다음 과 같이 구체 적 으로 공유 합 니 다.
작은 유감
 
이 글 을 볼 수 있 는 사람 은 내 가 vue 가 무엇 인지 소개 하지 않 아 도 될 것 이다.먼저 우리 로 하여 금 대신 에 게 경 배 하 게 하 자!vue 프로젝트 의 작성 자 는 특히 sublime 에서 문법 이 높 은 플러그 인 을 대문자 로 썼 습 니 다.어떤 사람 이 그 에 게 how about webstorm support 라 고 물 었 습 니 다.그 는 이렇게 대답 했다.1 분간 묵념 하 다.
하 이 라이트 와 문법 지원 추가
이것 은 플러그 인 을 통 해 이 루어 집 니 다.인터넷 에는 현재 두 개의 플러그 인 이 있다.
플러그 인 1:https://github.com/henjue/vue-for-idea
플러그 인 2:https://github.com/postalservice14/vuejs-plugin
제 가 지금 사용 하고 있 는 것 은 플러그 인 1 입 니 다.
그것 은 약간의 문법 과 코드 하 이 라 이 트 를 제공 할 수 있 고 파일 템 플 릿 도 제공 할 수 있다.
바로 왼쪽 프로젝트 표시 줄 에서 오른쪽 단 추 를 누 르 면 새로 만 들 때 vue 파일 이 있 습 니 다.

그러나 그의 문법 적 지원 은 정말 한계 가 있 으 니,너 는 너무 큰 희망 을 품 지 마라.일부 cmd+ 의 점프 는 모두 실현 되 지 못 한다.
나 는 설정 에 추가 도움 을 추가 했다.
 
이것 은 이것/이것 조직 이 github 에 있 는 문법 목록 을 유지 하고 웹 storm 에 설치 한 후에 해당 하 는 문법 알림 이 있 습 니 다.설정 에 들 어가 면 오른쪽 에 있 는 download 을 누 르 면 이 목록 이 나타 납 니 다.위의 원본 을 선택 하면 모두 두 가지 옵션 이 있 습 니 다.두 번 째 를 선택 하면 이 목록 이 나타 납 니 다.vue 를 찾 아서 설치 하면 됩 니 다.
하지만 vue 파일 에서 도 큰 역할 을 하지 않 는 것 같 습 니 다.
ES6 지원 추가
우선 웹 스 톰 자체 의 자바 스 크 립 트 버 전 을 설정 해 야 합 니 다.그림:
 
기본 값 은 ES 5.1 입 니 다.ES6 로 바 꿉 니 다.
그리고 설정 열기:
 
이 곳 을 찾 으 면 위의 html 형식 을 찾 아*.vue 를 추가 합 니 다.확인 할 때 알림 이 점용 되 었 습 니 다.그것 을 지 우려 면 계속 OK 입 니 다.
이렇게 하면 시스템 은 vue 파일 을 html 로 보고 안에 있 는 <script> 라벨 을 정확하게 식별 할 수 있 습 니 다.
만약 네가 이렇게 하고 싶 지 않다 면 그래도 된다.또 하나의 방법 이 있다.<script> 탭 에 type="text/ecmascript-6" 을 직접 추가 하 는 것 도 OK 이 고 안의 코드 도 밝 고 ES6 를 지원 합 니 다.
지원
vue-loader 문 서 를 본 결과*.vue 템 플 릿 에 서 는 몇 가지 css 예비 프로세서 와 템 플 릿 언어 jade 을 지원 합 니 다.
하지만 <style> 라벨 에 lang=sass 을 붙 이 고 sas 를 쓸 때 IDE 가 잘못 되 었 다 는 것 을 알 게 될 것 이다.처음에 내 가 생각 한 것 은 웹 스 톰 의 Language Injections 이 었 고 기 존의 것 에 따라 하 나 를 썼 다.
 
하지만 사용 할 수 없습니다...
구 글 에 갔 더 니 이렇게 하 는 사람 도 있 었 지만 성공 하지 못 했다.왜 그런 지 모 르 겠 어 요.jade 가 템 플 릿 언어 라 는 것 을 알 았 으 니 이렇게 하면 안 됩 니 다.
근 데 사 스 는 아니 잖 아.
하지만 수확 이 없 는 것 도 아니다.<style> 라벨 중 rel="stylesheet/scss" 과 type="text/css" 이 발 견 됐 을 때 sass 언어 를 정확하게 식별 할 수 있 었 다.예:

<style scoped lang="sass" rel="stylesheet/scss" type="text/css">

같은 이치 로 less 도 가능 합 니 다.하지만 웹 스 톰 버 전이 2016.1.1 보다 높 아야 합 니 다.
jade 지원
나 는 아직 jade 템 플 릿 언어 를 할 줄 모른다.그러나 sas 지원 을 찾 는 과정 에서 누군가가 이렇게'곡선 구국'을 지지 한 것 을 발견 했다.

이 동시에 저 는 vue-idea-plugin 플러그 인의 작가 가 믿 을 수 없 는 약속 을 발 견 했 습 니 다.여기 찍 어. 은 jade 을 지원 하 겠 다 고 했 지만 구체 적 인 시간 이 없 었 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.