weex学习笔记<三> : 安装weex的编辑工具-
2017-02-10 本文已影响512人
youngyunxing
weex文件的后缀名是.we,如果使用Xcode编辑weex,没有格式也没有高亮和提示,我们需要使用一个编辑工具来快速的编写weex的代码.我们可以用subline Text 来打开和编辑,但是我们先需要做下配置,让其支持.we文件.
-
安装subline Text3
首先下载subline Text3,可以直接去官网下载,我用的是破解版.请自行搜索安装.
-
添加高亮脚本,导航栏里选择Tools->Developer->New Syntax
Paste_Image.png
-
把下面代码粘贴进去,并覆盖原有的
%YAML 1.2
---
# http://www.sublimetext.com/docs/3/syntax.html
name: we Component
file_extensions:
- we
scope: text.html.we
contexts:
main:
- include: we-interpolations
- match: '(<)([a-zA-Z0-9:-]++)(?=[^>]*></\2>)'
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.html
push:
- meta_scope: meta.tag.any.html
- match: (>)(<)(/)(\2)(>)
captures:
1: punctuation.definition.tag.end.html
2: punctuation.definition.tag.begin.html meta.scope.between-tag-pair.html
3: punctuation.definition.tag.begin.html
4: entity.name.tag.html
5: punctuation.definition.tag.end.html
pop: true
- include: tag-stuff
- match: (<\?)(xml)
captures:
1: punctuation.definition.tag.html
2: entity.name.tag.xml.html
push:
- meta_scope: meta.tag.preprocessor.xml.html
- match: (\?>)
captures:
1: punctuation.definition.tag.html
2: entity.name.tag.xml.html
pop: true
- include: tag-generic-attribute
- include: string-double-quoted
- include: string-single-quoted
- match: <!--
captures:
0: punctuation.definition.comment.html
push:
- meta_scope: comment.block.html
- match: '--\s*>'
captures:
0: punctuation.definition.comment.html
pop: true
- match: "--"
scope: invalid.illegal.bad-comments-or-CDATA.html
- match: <!
captures:
0: punctuation.definition.tag.html
push:
- meta_scope: meta.tag.sgml.html
- match: ">"
captures:
0: punctuation.definition.tag.html
pop: true
- match: (?i:DOCTYPE)
captures:
1: entity.name.tag.doctype.html
push:
- meta_scope: meta.tag.sgml.doctype.html
- match: (?=>)
captures:
1: entity.name.tag.doctype.html
pop: true
- match: '"[^">]*"'
scope: string.quoted.double.doctype.identifiers-and-DTDs.html
- match: '\[CDATA\['
push:
- meta_scope: constant.other.inline-data.html
- match: "]](?=>)"
pop: true
- match: (\s*)(?!--|>)\S(\s*)
scope: invalid.illegal.bad-comments-or-CDATA.html
- match: '(?:^\s+)?(<)((?i:template))\b(?=[^>]*lang="jade(?:\?[^"]*)?")'
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.style.html
3: punctuation.definition.tag.html
push:
- meta_scope: text.jade.embedded.html
- match: (</)((?i:template))(>)(?:\s*\n)?
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.style.html
3: punctuation.definition.tag.html
pop: true
- include: tag-stuff
- match: (>)
captures:
1: punctuation.definition.tag.end.html
push:
- match: (?=</(?i:template))
pop: true
- include: scope:text.jade
- match: '(?:^\s+)?(<)((?i:template))\b(?=[^>]*lang="pug(?:\?[^"]*)?")'
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.style.html
3: punctuation.definition.tag.html
push:
- meta_scope: text.pug.embedded.html
- match: (</)((?i:template))(>)(?:\s*\n)?
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.style.html
3: punctuation.definition.tag.html
pop: true
- include: tag-stuff
- match: (>)
captures:
1: punctuation.definition.tag.end.html
push:
- match: (?=</(?i:template))
pop: true
- include: scope:text.pug
- match: '(?:^\s+)?(<)((?i:style))\b(?=[^>]*lang="stylus(?:\?[^"]*)?")'
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.style.html
3: punctuation.definition.tag.html
push:
- meta_scope: source.stylus.embedded.html
- match: (</)((?i:style))(>)(?:\s*\n)?
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.style.html
3: punctuation.definition.tag.html
pop: true
- include: tag-stuff
- match: (>)
captures:
1: punctuation.definition.tag.end.html
push:
- match: (?=</(?i:style))
pop: true
- include: scope:source.stylus
- match: '(?:^\s+)?(<)((?i:style))\b(?=[^>]*lang="(?:s(a|c)ss)(?:\?[^"]*)?")'
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.style.html
3: punctuation.definition.tag.html
push:
- meta_scope: source.sass.embedded.html
- match: (</)((?i:style))(>)(?:\s*\n)?
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.style.html
3: punctuation.definition.tag.html
pop: true
- include: tag-stuff
- match: (>)
captures:
1: punctuation.definition.tag.end.html
push:
- match: (?=</(?i:style))
pop: true
- include: scope:source.sass
- match: '(?:^\s+)?(<)((?i:style))\b(?=[^>]*lang="less(?:\?[^"]*)?")'
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.style.html
3: punctuation.definition.tag.html
push:
- meta_scope: source.less.embedded.html
- match: (</)((?i:style))(>)(?:\s*\n)?
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.style.html
3: punctuation.definition.tag.html
pop: true
- include: tag-stuff
- match: (>)
captures:
1: punctuation.definition.tag.end.html
push:
- match: (?=</(?i:style))
pop: true
- include: scope:source.less
- match: '(?:^\s+)?(<)((?i:style))\b(?![^>]*/>)'
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.style.html
3: punctuation.definition.tag.html
push:
- meta_scope: source.css.embedded.html
- match: (</)((?i:style))(>)(?:\s*\n)?
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.style.html
3: punctuation.definition.tag.html
pop: true
- include: tag-stuff
- match: (>)
captures:
1: punctuation.definition.tag.end.html
push:
- match: (?=</(?i:style))
pop: true
- include: scope:source.css
- match: '(?:^\s+)?(<)((?i:script))\b(?=[^>]*lang="coffee(?:\?[^"]*)?")'
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.script.html
push:
- meta_scope: source.coffee.embedded.html
- match: (?<=</(script|SCRIPT))(>)(?:\s*\n)?
captures:
2: punctuation.definition.tag.html
pop: true
- include: tag-stuff
- match: (?<!</(?:script|SCRIPT))(>)
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.script.html
push:
- match: (</)((?i:script))
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.script.html
pop: true
- include: scope:source.coffee
- match: '(?:^\s+)?(<)((?i:script))\b(?![^>]*/>)'
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.script.html
push:
- meta_scope: source.js.embedded.html
- match: (?<=</(script|SCRIPT))(>)(?:\s*\n)?
captures:
2: punctuation.definition.tag.html
pop: true
- include: tag-stuff
- match: (?<!</(?:script|SCRIPT))(>)
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.script.html
push:
- match: (</)((?i:script))
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.script.html
pop: true
- match: (//).*?((?=</script)|$\n?)
scope: comment.line.double-slash.js
captures:
1: punctuation.definition.comment.js
- match: /\*
captures:
0: punctuation.definition.comment.js
push:
- meta_scope: comment.block.js
- match: \*/|(?=</script)
captures:
0: punctuation.definition.comment.js
pop: true
- include: scope:source.js
- match: (</?)((?i:body|head|html)\b)
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.structure.any.html
push:
- meta_scope: meta.tag.structure.any.html
- match: (>)
captures:
1: punctuation.definition.tag.end.html
pop: true
- include: tag-stuff
- match: (</?)((?i:address|blockquote|dd|div|dl|dt|fieldset|form|frame|frameset|h1|h2|h3|h4|h5|h6|iframe|noframes|object|ol|p|ul|applet|center|dir|hr|menu|pre)\b)
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.block.any.html
push:
- meta_scope: meta.tag.block.any.html
- match: (>)
captures:
1: punctuation.definition.tag.end.html
pop: true
- include: tag-stuff
- match: (</?)((?i:a|abbr|acronym|area|b|base|basefont|bdo|big|br|button|caption|cite|code|col|colgroup|del|dfn|em|font|head|html|i|img|input|ins|isindex|kbd|label|legend|li|link|map|meta|noscript|optgroup|option|param|q|s|samp|script|select|small|span|strike|strong|style|sub|sup|table|tbody|td|textarea|tfoot|th|thead|title|tr|tt|u|var)\b)
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.inline.any.html
push:
- meta_scope: meta.tag.inline.any.html
- match: "((?: ?/)?>)"
captures:
1: punctuation.definition.tag.end.html
pop: true
- include: tag-stuff
- match: "(</?)([a-zA-Z0-9:-]+)"
captures:
1: punctuation.definition.tag.begin.html
2: entity.name.tag.other.html
push:
- meta_scope: meta.tag.other.html
- match: (>)
captures:
1: punctuation.definition.tag.end.html
pop: true
- include: tag-stuff
- include: entities
- match: <>
scope: invalid.illegal.incomplete.html
- match: <
scope: invalid.illegal.bad-angle-bracket.html
entities:
- match: "(&)([a-zA-Z0-9]+|#[0-9]+|#x[0-9a-fA-F]+)(;)"
scope: constant.character.entity.html
captures:
1: punctuation.definition.entity.html
3: punctuation.definition.entity.html
- match: "&"
scope: invalid.illegal.bad-ampersand.html
string-double-quoted:
- match: '"'
captures:
0: punctuation.definition.string.begin.html
push:
- meta_scope: string.quoted.double.html
- match: '"'
captures:
0: punctuation.definition.string.end.html
pop: true
- include: we-interpolations
- include: entities
string-single-quoted:
- match: "'"
captures:
0: punctuation.definition.string.begin.html
push:
- meta_scope: string.quoted.single.html
- match: "'"
captures:
0: punctuation.definition.string.end.html
pop: true
- include: we-interpolations
- include: entities
tag-generic-attribute:
- match: '\b([a-zA-Z\-:]+)'
scope: entity.other.attribute-name.html
tag-id-attribute:
- match: \b(id)\b\s*(=)
captures:
1: entity.other.attribute-name.id.html
2: punctuation.separator.key-value.html
push:
- meta_scope: meta.attribute-with-value.id.html
- match: (?<='|")
captures:
1: entity.other.attribute-name.id.html
2: punctuation.separator.key-value.html
pop: true
- match: '"'
captures:
0: punctuation.definition.string.begin.html
push:
- meta_scope: string.quoted.double.html
- meta_content_scope: meta.toc-list.id.html
- match: '"'
captures:
0: punctuation.definition.string.end.html
pop: true
- include: we-interpolations
- include: entities
- match: "'"
captures:
0: punctuation.definition.string.begin.html
push:
- meta_scope: string.quoted.single.html
- meta_content_scope: meta.toc-list.id.html
- match: "'"
captures:
0: punctuation.definition.string.end.html
pop: true
- include: we-interpolations
- include: entities
tag-stuff:
- include: we-directives
- include: tag-id-attribute
- include: tag-generic-attribute
- include: string-double-quoted
- include: string-single-quoted
we-directives:
- match: '(?:\b(v-)|(:|@))([a-zA-Z\-]+)(?:\:([a-zA-Z\-]+))?(?:\.([a-zA-Z\-]+))*\s*(=)'
captures:
1: entity.other.attribute-name.html
2: punctuation.separator.key-value.html
3: entity.other.attribute-name.html
4: entity.other.attribute-name.html
5: entity.other.attribute-name.html
6: punctuation.separator.key-value.html
push:
- meta_scope: meta.directive.we
- match: (?<='|")
captures:
1: entity.other.attribute-name.html
2: punctuation.separator.key-value.html
3: entity.other.attribute-name.html
4: entity.other.attribute-name.html
5: entity.other.attribute-name.html
6: punctuation.separator.key-value.html
pop: true
- match: '"'
captures:
0: punctuation.definition.string.begin.html
push:
- meta_scope: source.directive.we
- match: '"'
captures:
0: punctuation.definition.string.end.html
pop: true
- include: scope:source.js
- match: "'"
captures:
0: punctuation.definition.string.begin.html
push:
- meta_scope: source.directive.we
- match: "'"
captures:
0: punctuation.definition.string.end.html
pop: true
- include: scope:source.js
we-interpolations:
- match: '\{\{\{?'
captures:
0: punctuation.definition.tag.begin.html
push:
- meta_scope: expression.embbeded.we
- match: '\}\}\}?'
captures:
0: punctuation.definition.tag.end.html
pop: true
- include: scope:source.js
然后 按 coomand + s 保存,保存文件名称必须是:Plain we.sublime-syntax,否则不能使用
-
开启weex语法高亮,选择
view---->syntax---->最下面有个we Component
Paste_Image.png
-
然后就大功告成,测试一下效果:
新建一个文件,后缀名为.we,用subline 打开,粘贴以下代码
<template>
<div>
<text>The time is {{datetime}}</text>
<text>{{title}}</text>
<text>{{getTitle()}}</text>
</div>
</template>
<script>
module.exports = {
data: {
title: 'Alibaba',
datetime: null
},
methods: {
getTitle: function () {
return 'Weex Team'
}
},
created: function() {
this.datetime = new Date().toLocaleString()
this.title = '123'
}
}
</script>
如果颜色是五颜六色的那么基本就成功了.如下图所示:
Paste_Image.png
