JavaScript ES6 and .vue support in Sublime

ES6 Template 을 사용하기 위하여 설정하는 방법.

Worked.
https://forum.sublimetext.com/t/how-to-enable-css-highlighting-in-template-literal-strings/45264

ES6.sublime-syntax file.

%YAML 1.2
---

name: ES6
file_extensions:
  - js
  - component.js
  - page.js
scope: source.js.parasails
contexts:
  main:
    - match: ""
      push: scope:source.js
      with_prototype:
      - match: '`'
        push:
          - meta_content_scope: text.html.basic.embedded.js
          - include: 'scope:text.html.basic'
          - match: '`'
            pop: true

Not worked.
https://forum.sublimetext.com/t/javascript-es6-template-literals-syntax-for-html/18242
https://gist.github.com/subhaze/a754c8d17906f2a25ce2

Think Try (not worked)
https://github.com/bathos/Ecmascript-Sublime/

Interesting (not worked)
https://github.com/borela/naomi

Nonono…
https://github.com/vuejs/vue-syntax-highlight

Read.
https://vueschool.io/articles/

성공

*.sublime-syntax 파일은,
/Users/someuser/Library/Application Support/Sublime Text 3/Packages/ 여기에 만든다.
/Users/someuser/Library/Application Support/Sublime Text 3/Packages/User/ 여기에 만들면,

이곳에 User 라는 폴더가 생기고 그곳에서 지정해야 하게 된다.

아뭏든,

vue.sublime-syntax

여기서 지정해주면, .vue 파일을 PHP 로 우선 표시한 다음, 모든 따옴표에 대해 ES6 Template 를 적용한 효과. <div title="div></div>"> 이런곳까지 적용된다. (Markdown의 한계…)
js 파일도 안되고, html, php 파일에서도 적용되지 않는다.
아래의 JavaScript Scope 모두에 적용하는 방법이 좋겠다.

%YAML 1.2
---
name: VUE
file_extensions:
  - vue
first_line_match: '^(#!.*[^-]php[0-9]?|<?php)b'
scope: embedding.php.vue
contexts:
  main:
    - match: ''
      push: scope:text.html.basic
      with_prototype:
        - match: <?(?i:php|=)?(?![^?]*?>)
          scope: punctuation.section.embedded.begin.php
          push:
            - meta_scope: meta.embedded.block.php
            - meta_content_scope: source.php
            - include: php-end-tag-pop
            - include: scope:source.php
        - match: <?(?i:php|=)?
          scope: punctuation.section.embedded.begin.php
          push:
            - meta_scope: meta.embedded.line.php
            - meta_content_scope: source.php
            - include: php-end-tag-pop
            - include: scope:source.php
#        - match: '`'
#          push:
#            - meta_content_scope: text.html.basic.embedded.js
#            - include: 'scope:text.html.basic'
#            - match: '`'
#              pop: true

  php-end-tag-pop:
    - match: (?>)(s*n)?
      captures:
        1: punctuation.section.embedded.end.php
        2: meta.html-newline-after-php.php
      pop: true

이렇게 만들고 저장하면,
.vue파일을 php 로 읽어들인다. php 는 html javascript css 를 모두 알아서 판단해 준다.
여기에

#        - match: '`'
#          push:
#            - meta_content_scope: text.html.basic.embedded.js
#            - include: 'scope:text.html.basic'
#            - match: '`'
#              pop: true

이 부분을 해제해 주면,
JavaScript 뿐만 아니라 php 로 인식되는 모든 따옴표 구간에 ES6 Syntax 가 지정된다.

JavaScript Scope 모두에 적용

JavaScript 의 모든 Scope 에서 지원되게 하려면,
PackageResourceViewer로JavaScript.sublime-syntax 파일을 열어서 다음을 찾아 추가한다.

...
  comments:
    - match: /**(?!/)
      scope: punctuation.definition.comment.begin.js
      push:
        - meta_include_prototype: false
        - meta_scope: comment.block.documentation.js
        - match: */
          scope: punctuation.definition.comment.end.js
          pop: true
    - match: /*
      scope: punctuation.definition.comment.begin.js
      push:
        - meta_include_prototype: false
        - meta_scope: comment.block.js
        - match: */
          scope: punctuation.definition.comment.end.js
          pop: true
    - match: //
      scope: punctuation.definition.comment.js
      push:
        - meta_include_prototype: false
        - meta_scope: comment.line.double-slash.js
        - match: n
          pop: true
    - match: '`' 👈
      push: 👈
        - meta_content_scope: text.html.basic.embedded.js 👈
        - include: 'scope:text.html.basic' 👈
        - match: '`' 👈
          pop: true 👈
...

이렇게 해주면 모든 자바스크립트에 대해서 ES6 Template 문법이 표시된다.

Syntax 를 추가하게 되면, 열려있는 서브라임의 모든창의 Index 가 갱신되어 잠시동안 CPU 사용율이 100% 증가하므로 유의.

이렇게 복잡하게 코드 에디터를 설정하느니 Front-end 에서 Vue.js 를 스마트하게 작업할 수 있는 Essepage 를 이용하는게 낫겠다.

웹 개발의 모든것을 온라인에서 끝내다
https://essepage.com