Atom Snippets

Code snippets for Atom in order to let you develop faster.

为以下开发提供代码片段自补全功能:

• Atom
• AtomEngine
• NextPage

Features

• 支持Atom、Smarty语法高亮
• 提供Atom、AtomEngine常用组件、属性等自动补全功能
• 提供smarty、php预处理文件Ala全部API的自动补全功能
• 提供变量、模块等代码智能提示
• 提供函数、组件等定义跳转功能
• 提供按钮调起终端及快速同步到测试机
• 快捷键（⌘+.）跳转到索引平台(暂定)
• 提供触发Atom组件补全后自动添加组件引用

Detail

Atom组件补全及引用自动添加

输入触发词的一部分后 tab/enter键触发补全

触发组件补全后自动向components下添加引用，目前仅支持search-ui组件的引用

若不想使用引用自动添加功能，可在setting.json中设置

"AtomSnippets.autoAddRef": false

PHP片段补全

智能提示

目前对this./this.$refs./引入模块/声明变量等提供代码智能提示功能

跳转定义

定义处cmd+鼠标左键触发跳转

tip:跳转组件文档需要本地路径与远程一致

• atom组件引用跳转到search-ui下对应组件readme
• nextpage组件跳转到app_components下对应文件
• 其他跳转到对应文件

调起终端

点击同步按钮后同时会在控制台Atom/log中输出日志

• atom执行 ala sync [template] -w
• nextpage执行 make watch
• atom-engine执行 atom-engine build -d

Snippets available

Atom

提供开发模板

prefix:

• ll
  • 开发模板: template/script/style标签组
• config
• script
• script-php
• style
• style-less

Atom组件

目前支持c-aladdin等78个atom组件

atom/prefix:

• ll
  • {{ }} 文本插值
• component
• template
• c-aladdin
• c-title
• c-line
• c-line-2
• c-img-content
• c-img-content-s
• ......

atom-engine/prefix:

• view
• text
• image
• webview
• viewpager
• scrollview
• h-scrollview
• photo
• video

组件属性/事件

各组件属性/事件已实现智能提示，其他通用属性如下

prefix:

• ref
• class
• style
• data-module

指令

prefix:

• a-once
• a-if
• a-else-if
• a-else
• a-for
• a-for-i
• a-model
• a-pre
• a-nossr

常用class

prefix:

• c-container
• c-container-tight
• c-color   颜色相关
• c-gap-top   间距相关
• c-font-normal   字体相关
• WA_LOG_TAB   埋点相关
• ......

注释

prefix:

• htmlcs-disable
• htmlcs-enable

filter

支持filter拼sf/mip..

prefix:

• |sf
• |mip
• |vsearch

config

支持目前所有atom组件引用

prefix:

• c-aladdin
• c-title
• c-line
• ......

Smarty

支持Ala全部Smarty API，常用Smarty语法及变量、代码块

prefix:

• ll
  • {% %} 定界符
• data
  • $tplData
• cprint
  • 打印数据, 用于文件末
• if
• ifelse
• foreach
• break
• ifempty
• ifisset
• empty
• isset
• tclink
• sflink
• miplink
• vsearchlink
• timglink
• tplinfo
• formatdate
• timespan
• highlight
• httpshost

PHP

支持Ala全部PHP API，常用PHP变量、代码块

p.s. 删除了部分语法, 建议使用内置vscode-php代码补充

prefix:

• data
  • $tplData
• datall
  • $tplData[' ']
• ll
  • [' ']
• cprint
  • 打印数据, 用于文件末
• ifempty
• ifisset
• tclink
• sflink
• miplink
• vsearchlink
• timglink
• httpshost
• highlight
• tplinfo
• searchlink
• formatdate
• timespan
• templatevars

JS

支持少量js语法、生命周期函数、库引用

p.s. 删除了部分语法, 建议使用内置vscode-javascript代码补充

prefix:

• clog
• cfunc
• computed
• beforeCreate
• created
• beforeMount
• preMounted
• mounted
• beforeUpdated
• updated
• beforeDestroy
• destroyed
• import alaUtil
• require swan
• require atomengine

Plans

• 补全优化
• 组件跳转定义
• 迁入语言服务器
• Atom所有组件片段补全
• PSMD常用class智能提示
• 组件补全后自动向config中添加组件引用
• 模板内使用组件未引用/引入组件未使用等提示处理

Common Issues

配置修改setting.json用户设置

• atom中无法使用vscode内置插件emmet语法

  修改emmet语言映射

  "emmet.includeLanguages": {
      "atom-html": "html",
      "atom": "html"
  }
  

• nextpage 代码自补全功能不生效

  配置语言文件关联

  "files.associations": {
      "*.atom.html": "atom"
  }
  

• vscode自带单词提示优先级高于sinppets

  

  设置取消文本提示, 或将snippets优先级设置最高

  "editor.wordBasedSuggestions": false,
  "editor.snippetSuggestions": "top"  // 该行配置不建议使用
  

• 双击组件无法选中组件整体

  设置编辑器单词导航分隔符

  "editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?"
  

• 字符串内无法使用自动补全功能

  设置编辑器键入

  "editor.quickSuggestions": {
      "other": true,
      "comments": false,
      "strings": true
  }