WebStorm에 Vue.js 단일 파일 구성 요소 인스턴스 추가

이 글은 WebStorm에 Vue.js 단일 파일 구성 요소를 추가하는 데 따른 강조 표시 및 구문 지원에 대한 자세한 설명을 주로 소개합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

이 글에서는 WebStorm에 Vue.js 단일 파일 구성 요소를 추가하기 위한 강조 표시 및 구문 지원에 대한 자세한 설명을 소개합니다. 자세한 내용은 다음과 같습니다.

작은 후회

이 글을 읽어주실 수 있나요? vue가 무엇인지 소개할 필요는 없습니다. 먼저 하나님을 예배합시다! vue 프로젝트의 창시자인 You Da는 sublime용 구문 강조 플러그인을 작성했습니다. 누군가 그에게 웹스톰 지원이 어떻냐고 물었습니다. 이것이 그의 대답입니다. 잠시 침묵.

강조 표시 및 구문 지원 추가

저는 플러그인을 통해 이를 구현했습니다. 현재 인터넷에는 두 가지 플러그인이 있습니다.

플러그인 1: https://github.com/henjue/vue-for-idea

플러그인 2: https://github.com/ postalservice14/vuejs-plugin

현재 플러그인 1을 사용하고 있습니다.

약간의 구문과 코드 강조 표시 및 파일 템플릿을 제공합니다.

즉, 왼쪽 프로젝트 바를 마우스 오른쪽 버튼으로 클릭하고 새로 생성하면 vue 파일이 생깁니다.

단, 문법 지원이 정말 제한적이므로 큰 기대는 하지 마세요. . 일부 cmd+클릭 점프는 실현될 수 없습니다. cmd+点击的跳转都不能实现。

我还去设置内添加了额外的帮助：

 

这是由这个组织维护在github上的一个语法列表，在webstorm上安装了之后会有对应的语法提示。进入设置中的这里，点击右边的download，就会出现这个列表，选择上面的源，一共有两个选项，选择第二个，就出现这个列表了。找到vue，安装就可以了。

但是感觉在.vue文件中作用也不是很大。。。

添加ES6支持

首先，你要设置webstorm自身的JavaScript的版本。如图：

 

这里默认是ES5.1，把它改成ES6。

然后打开设置：

 

找到这个地方，找到上面的html类型，将*.vue添加进其中。确定的时候会提示被占用了，要把那个清除掉，继续就OK了。
这样系统会把.vue文件看成html，也就能正确识别里面的<script></script>标签了。

如果你不想这样做，那也可以。还有一种方法。
直接在<script></script>标签中添加type="text/ecmascript-6"，这样也是OK的，里面的代码也会高亮并支持ES6。

支持sass

看过vue-loader文档的知道，在*.vue模板中是支持几种css预处理器和模板语言jade的。
但是当你在<style></style>标签中加上lang=sass然后写sass时会发现IDE一片报错。。一开始我想到的是webstorm的Language Injections，并照着已有的写了一个：

 

然而并不能用。。。

去谷歌了下，发现也有人这么做了，然而也没有成功。。至于为什么也没搞清楚。。倒是知道了jade是模板语言，不能这么做。

但是sass不应该啊。。

然而也不是没有收获。

发现了<style></style>标签中有rel="stylesheet/scss"和type="text/css"时能正确识别sass语言。如：

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

同理less也可以。但是需要webstorm版本高于2016.1.1。

关于jade支持

我还不会jade模板语言。但是在找sass支持的过程中发现有人这么“曲线救国”的支持了jade：

同时我也发现了vue-idea-plugin插件的作者不靠谱的承诺，戳这里，说会支持jade

설정에 추가 도움말도 추가했습니다:

이 조직에서 github에서 관리하는 문법 목록입니다. webstorm에 설치하면 해당 문법 프롬프트가 표시됩니다. 여기에 설정을 입력하고 오른쪽의 다운로드를 클릭하면 이 목록이 나타납니다. 위에서 두 가지 옵션을 선택하면 이 목록이 나타납니다. vue를 찾아서 설치하세요. 🎜🎜🎜하지만 .vue 파일에서는 큰 역할을 하는 것 같지 않습니다. . . 🎜🎜🎜ES6 지원 추가🎜🎜🎜먼저 웹스톰 자체의 JavaScript 버전을 설정해야 합니다. 그림과 같이: 🎜🎜🎜 🎜 🎜🎜여기서 기본값은 ES5.1이며 ES6으로 변경합니다. 🎜🎜🎜그런 다음 설정을 엽니다: 🎜🎜🎜 🎜🎜🎜이곳을 찾아 위의 html타입을 찾아 *.vue를 추가해주세요. 확인되면 사용 중이라는 메시지가 표시됩니다. 지우고 싶다면 계속 진행하세요. 🎜이러한 방식으로 시스템은 .vue 파일을 HTML로 처리하고 내부의 <script></script> 태그를 올바르게 식별할 수 있습니다. 🎜🎜그러고 싶지 않다면 괜찮습니다. 또 다른 방법이 있습니다. 🎜<script></script> 태그에 직접 type="text/ecmascript-6"를 추가해도 됩니다. 내부 코드도 강조 표시되며 ES6을 지원합니다. 🎜🎜🎜Sass 지원🎜🎜🎜vue-loader 문서를 읽어보셨다면 여러 CSS 전처리기와 템플릿 언어 ​​​​jade가 *.vue 템플릿에서 지원된다는 것을 아실 것입니다. 🎜그러나 <style></style> 태그에 lang=sass를 추가한 다음 sass를 작성하면 IDE에서 오류를 보고하는 것을 확인할 수 있습니다. . 처음에는 webstorm의 Language Inserts를 생각하고 기존 것을 기반으로 하나를 작성했습니다: 🎜🎜🎜 🎜🎜🎜그러나 작동하지 않습니다. . . 🎜🎜🎜Google에 가서 누군가가 이 작업을 했다는 것을 알았지만 역시 작동하지 않았습니다. . 왜 그런지 이해가 안 돼요. . 하지만 나는 jade가 템플릿 언어이고 이것을 할 수 없다는 것을 알고 있습니다. 🎜🎜하지만 Sass는 그러면 안 됩니다. . 🎜🎜🎜그러나 이득이 없는 것은 아닙니다. 🎜🎜🎜 <style></style> 태그에 rel="stylesheet/scss" 및 type="text/css"가 포함되어 있음을 확인했습니다. sass 언어를 식별하세요. 예: 🎜

🎜🎜rrreee🎜 less와 동일합니다. 단, 웹스톰 버전은 2016.1.1 이상이어야 합니다. 🎜🎜🎜Jade 지원 정보🎜🎜🎜저는 아직 Jade 템플릿 언어를 모릅니다. 그런데 Sass 지원을 찾는 과정에서 Jade를 지원하여 "나라를 구한" 사람을 발견했습니다: 🎜🎜🎜🎜🎜동시에 vue-idea-plugin 플러그인 작성자의 신뢰할 수 없는 약속도 발견했습니다. 여기를 클릭하고 말하세요. jade를 지원할 예정이지만 구체적인 시기는 미정입니다. 🎜🎜관련 권장 사항: 🎜🎜🎜🎜Webstorm의 새로운 .vue 파일은 강조 표시된 vue 구문 및 es6 구문을 지원합니다🎜🎜

WebStorm에서 자주 사용되는 단축키

유용한 프런트엔드 개발 도구 추천 -WebStorm

위 내용은 WebStorm에 Vue.js 단일 파일 구성 요소 인스턴스 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!