Type a keyword and hit enter to start searching. Press Esc to cancel.

Currently Reading | 正在閱讀

如何在brackets實現code hinting GSAP – How to code hinting for GSAP in brackets

GSAP是一個很方便的JavaScript animation library.
在使用IDE如Sublime Text時,有不少國外的人為此建立了snippets方便快速typing

而在brackets則較少有人做這件事情

要實現這個有兩個方法

一是用TypeScript definition, 並用npm安裝tsd去加入相關json檔, 有興趣的人可參照這篇文章安裝,我實驗的結果是失敗的,顯示zero results. ><

( Option 1: Use TypeScript to accomplish the goal. If you are interested in this method, click the link above. )

二是將Sublime Text的snippet轉移到brackets中使用

( Option 2: Use the mimic-version of Sublime Text snippet plugin in brackets, which we will use in this article. )

下面就來說明如何安裝和定義變數

首先

先去brackets extension manager安裝 Brackets Snippets (by edc)

( Install “Brackets Snippets by edc” in your brackets extension manager )

安裝完之後在畫面右邊會出現一個bulb icon, 如下圖

點擊後會出現snippets manager

點擊new+ icon新增新的snippet

如下圖

如圖所示

( Define new snippets with following settings for your use as the instructions shown in the extension )

Trigger:

定義tab鍵觸發的關鍵字, 例如set

Description:

在出現code hint時會出現的說明文字, 例如輸入set後會出現”GSAP set”讓你清楚要從dropdown menu選哪一個trigger

Scope:

在file中可以應用的範圍, GSAP是JavaScript API, 所以當然選JavaScript

Text:

輸入的方式為變數variable: ${number:string}

例如我要觸發set的話, 就輸入set(${1:elem}, {${2:vars}})

這樣當在brackets中輸入set後,

會自動生成 set(elem, {vars})

而cursor會自動按照number順序從elem跳到vars

上面就可以生成如下面的程式碼

set(header, {autoAlpha:0});

 

下面是目前整理會用到的snippet

( The snippets I created for GSAP as follows )

from

from(${1:elem},  ${2:1}, {${3:vars}}${4})

fromTo

fromTo(${1:elem}, ${2:1}, {${4:fromVars}}, {${5:toVars}}${6})

set

set(${1:elem}, {${2:vars}})

stagger

stagger${1:To}(${2:elem}, ${3:1}, {${4:vars}}, ${5:0})

staggerFromTo

staggerFromTo(${1:elem}, ${2:1}, {${3:fromVars}}, {${4:toVars}}, ${5:0})

staggerTo

stagger${1:To}(${2:elem}, ${3:1}, {${4:vars}}, ${5:0})

to

to(${1:elem}, ${2:1}, {${3:vars}}${4})

Tween

Tween${1:Lite}.${2:to}(${3:elem}, ${4:1}, {${5:vars}});

 

UPDATE: 補充其他snippets

nunjucks

block – Define a section on the template

{% block ${1:block-name} %}
${2}
{% endblock %}

extend – Inherit parent template

{% extends "${1:base}.nunjucks" %}
${2}

for – Iterates over arrays and dictionaries

{% for ${1} in ${2} %}
${3}
{% endfor %}

import – Loads a different template

{% import "${1}" as ${2} %}

include – Pulls in other templates in place

{% include "${1:template-name}.nunjucks" %}
${2}

 

希望我的文章對你有幫助 ^^

Did you learn something from my article? I do hope so.:)

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *