变速箱 Sublime Sencha

恭喜！你即将大幅度提升你的 Ext JS 开发。Gearbox Sublime Sencha 插件通过代码片段、快捷键以及一点魔法来辅助开发。

• 先决条件
• 安装
• 相关文件
• 命令
• 代码片段
  • Ext JS 专用代码片段
  • 变速箱代码片段
  • 便捷代码片段
  • 测试代码片段
• 配置
  • 属性模板
  • 函数模板
  • 高级
    • 自动更新
    • 应用路径
    • jsduck 路径
    • jsduck 构建路径
    • jsduck 参数
    • 相关文件模式
      • 一般查找位置
      • 查找相关文件的位置。

先决条件

为了充分利用此软件包，您应首先安装

• ruby 2.0+
• Sencha CMD
• JsDuck
• Sublime Text

安装

安装此软件包的最简单方法是通过 sublime 软件包控制，如果您还没有安装，我们建议您：安装它。然后从您的 Sublime Text 编辑器打开命令行（默认：Ctrl + ⇧ + P 或 ⌘ + ⇧ + P），输入“package control install package”。按回车开始包控制（可能需要几秒钟才能加载），然后搜索“GearboxSencha”。

安装此 sublime 软件包后，唯一的操作步骤是配置软件包并告诉 JsDuck 首次构建文档。一旦配置完成，从您的项目中的文件运行 Rebuild jsDuck 命令，一切就绪！

相关文件

相关文件插件可帮助您快速切换到强烈相关的文件，如同一类型的模型、视图和控制器。

命令

列出的快捷键是默认值。您可以在 配置中更改它们。

相关文件

命令: related_files
Linux 快捷键: alt+shift+p
Mac OS X 快捷键: alt+shift+p

相关文件幸运儿

命令：related_files_lucky
Linux 快捷键：ctrl+shift+alt+p
Mac OSX 快捷键：ctrl+shift+⌘+p

相关类

命令：class_related_classes
Linux 快捷键：super+alt+p
Mac OSX 快捷键：⌘+alt+p

类函数

命令：class_functions
Linux 快捷键：super+alt+r
Mac OSX 快捷键：⌘+alt+r

类属性

命令：class_properties
Linux 快捷键：super+alt+ctrl+r
Mac OSX 快捷键：⌘+alt+y

重启 Sublime（仅限开发者）

命令：restart_sublime
Linux 快捷键：f5
Mac OSX 快捷键：f5

重新构建 jsDuck

命令：rebuild_jsduck
Linux 快捷键：super+alt+j
Mac OSX 快捷键：⌘+alt+j

代码片段

代码片段可以加快您开发的速度，因为它可以缩短您经常书写的代码。例如，类定义。Gearbox Sublime Sencha Gear 提供四种类型的代码片段

• Ext JS 专用代码片段
• 定义代码片段
• 便捷代码片段
• 测试代码片段

Ext JS 专用代码片段

afterRender

tab触发器：afterRender
选择：添加到函数体中
向您的类中添加一个 afterRender 方法，并调用父类。

afterRender: function() {
    this.debug(arguments);

    this.callParent(arguments);
},

callParent

tab触发器：callParent
使用参数调用父类。

return this.callParent(arguments);

constructor

tab触发器：constructor
添加一个带有 ApplyIf 和调用父类的构造函数。

constructor: function(config) {
    this.debug(arguments);

    Ext.applyIf(config || {}, {

    });

    return this.callParent(arguments);
},

create

tab触发器：create
after：Ext.Component, config
创建一个 Ext.create 语句。

Ext.create('', {

});

define

tab触发器：define
after：name, parent, xtype, body
选择：添加到体中
创建一个 Ext.define 语句。

Ext.define('', {
    extend: 'Ext.',
    xtype: '',

    //

    mixins: [
        'Gearbox.mixin.ModelInfo',
        'Gearbox.mixin.Logger'
    ],

    logLevel: 'debug',

    //


});e

requires

tab触发器：requires
添加一个空的 requires 数组。

requires: [
    ''
],

initComponent

tab触发器：initComponent
插入 Ext JS 的 initComponent 函数，并调用父类。

initComponent: function() {
    this.debug(arguments);

    this.callParent(arguments);
},

items

tab触发器：items
插入对象数组。

items: [{

}],

mixins

tab触发器：mixins
添加一个带有一些默认 Gearbox mixins 的 mixins 残块。

mixins: [
    'Gearbox.mixin.ModelInfo',
    'Gearbox.mixin.Logger'
],

logLevel: 'debug',

//

###定义代码片段

tab触发器：f
添加一个新的匿名函数。

function() {

}

fn

tab触发器：fn
插入一个新的匿名方法。

: function() {
    this.debug(arguments);


},

function

tab触发器：function
添加一个新的匿名函数，包含一个调试行。

function() {
    this.debug(arguments);


},

变速箱代码片段

log

tab触发器：log
选择：作为日志记录器的参数。
添加一个调用局部记录器的调用：this.log。

this.log(arguments);

log变量

tab触发器：logv
添加一个显示变量值的日志。

this.log('', '=', );

log注解

tab触发器：loga
与 logv 相同，但是带有注解。

this.log(':', ' =', );

便捷代码片段

console.log 变量：tab触发器：clogv
添加一个 console.log 语句来输出变量及其值。

console.log('', '=', );

debug

tab触发器：debug
after：要调试的对象
使用默认参数添加对 this.debug 的调用。

this.debug(arguments);

each

tab触发器：each
添加一个 lodash each 残块。

_.each(arr, function(item, key) {
    console.log('item:', key, '=', item);

});

eachPush

tab触发器：eachPush
与 each 相同，但将每个项推送到数组中。

var items = [];
_.each(arr, function(item, key) {
    console.log('arr:', key, '=', item);

    items.push(item);
});

line

tab触发器：dashes
添加一行的破折号。

////////////////////////////////////////////////////////////////////////////

map

tab触发器：map
添加一个 lodash map 残块。

var items = _.map(arr, function(item, key) {
    this.log('arr:', key, '=', item);

    return item;
}, this);

next

tab触发器：next
创建一个带有 next 函数作为参数的新函数。

function(next) {

    next();
}

promise

tab触发器：Promise
添加一个返回 Promise 的块。

return new Promise(function(resolve, reject) {

});

测试代码片段

describe

tab触发器：describe
插入 t.describe 块。

t.describe('', function(t) {

});

it

tab触发器：it
插入 t.it 块。

t.it('should ', function(t) {

});

requireOK

tab触发器：requireOK
插入一个 requireOK 块。

t.requireOk([
    ''
]);

startTest

tabTrigger: startTest
插入一个startTest组件。

startTest(function(t) {

});

配置

所有配置选项的解释。

propertyTemplates

用于将属性插入到文件 < 名称 > 的代码片段模板。这个格式每行使用1个数组条目，并且支持Sublime Snippet特性。

"String": [
    "<name>: '$1'"
],
"Boolean": [
    "<name>: ${1:false}"
],
"Object": [
    "<name>: {",
    "    '$1': '$1'",
    "}"
],
"Array": [
    "<name>: [",
    "    ${1:''}",
    "]"
],
"Number": [
    "<name>: ${1:0}"
]

“functionTemplate”

用于将函数插入到文件的代码片段模板。这个格式每行使用1个数组条目，并且支持Sublime Snippet特性。

"<name>: function(config) {",
    "    this.callParent(arguments);",
    "    $1",
"}"

高级

这些设置仅适用于高级用户。对于普通项目，您不需要编辑任何内容。

“autoUpdate”

这是一个仍在开发中的**实验性**功能，将在后台尝试更新类信息。

"enabled": false,
"interval": 300

“applicationPaths”

插件将在工作目录根目录相对于查询有效应用程序文件夹的路径。

[
    "/desktop",
    "/"
]

“jsduckPaths”

插件将在应用程序文件夹相对路径中查找有效jsduck格式化的数据，用于提供相关函数/属性/类。

[
    "jsduck",
    "docs"
]

“jsduckbuildpaths”

在构建jsduck信息时包含的文件夹，相对于应用程序文件夹。

[
    "app",
    "ext/src"
]

jsduckargs

只有当你真的了解jsduck和此插件的工作方式时，才编辑。

relatedFilesPatterns

这是使用正则表达式完成的，但请放心，您不需要配置任何内容。

一般查找位置

该文件包含一个大的注释正则表达式和一些较小的正则表达式，其中较大的一个告诉插件在哪里查找您的js文件，较小的那些告诉它在哪里查找相关文件。

这就是最大的一个

^.+?\/(?:app|src|tests)(?:\/\\w*)?(.*\/?)?\/(\\w*)(?:\\.t)?\\.js$

看起来很吓人，别担心，对于一个普通项目，你不需要进行任何编辑。这个正则表达式描述了你项目的总体结构。

查找相关文件的位置。

搜索符合以下结构的任何文件（$1=当前模块名称，$2=当前文件名称）

"*/model/$2.js",
"*/model/*/$2.js",
"*/model/*/*/$2.js",

"*/$1/$2.*js",
"*/*/$1/$2.*js",
"*/*/*/$1/$2.*js",

"*/packages/gearbox/*/$1/$2.*js",
"*/packages/gearbox/*/*/$1/$2.*js",

"*/ext/src/$1/$2.js"