Html5/Javascript: Emmet / code snippets

[hhstore]

related:

#37 : pycharm 设置
#112 : cheat sheet
#259 : Android Studio 设置

[hhstore]

前端代码: Emmet 简写 Snippet

• 手写 HTML, 真 TM 是个体力活. 受不了.
• Emmet: 是个通用的 code snippet 标准.
  • 各种 IDE/编辑器(webstorm/vscode)都支持.
  • 内置各种前端代码段的简写方法.

Emmet:

• cheat-sheet: https://yanxyz.github.io/emmet-docs/cheat-sheet/
  • 只用看这个, 就 OK 了.
• https://yanxyz.github.io/emmet-docs/
• https://emmet.io/

示例规则:

• 各种快捷简写: 极大提升手写 HTML 的速度.
• 缩写: div+div>p>span+em^bq + Tab 键

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

• 缩写: div+div>p>span+em^^bq + Tab 键

<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

IDE 自定义 snippet:

Webstorm 自定义 snippet 模板:

• live template:

  • https://www.jetbrains.com/help/webstorm/using-live-templates.html
  • https://www.jetbrains.com/help/webstorm/creating-and-editing-live-templates.html

• 讨论: https://cnodejs.org/topic/590c34e7cfb837012a59b3f2

[hhstore]

WebStorm:

• 关于写前端代码的自定义配置.

live template: 自定义 snippet 模板

github 一些模板:

• https://gist.github.com/ngryman/4760153
• https://github.com/blakedietz/js-live-template
• https://github.com/Pencroff/WebStorm-Live-Template

添加 ES6 箭头函数 简写

• 打开设置, 找到 live template, 然后找到 JavaScript 分类, 右侧 +, 添加一个新的模板.

• 添加新的 模板:

• type1: es6 箭头函数模板: fn (缩写词)

($MODULE_VAR$) => {
    $END$
}

• type2: 单行箭头函数: fn2(缩写词). 注意: 不要勾选Reformat 选项, 会干扰格式.

($MODULE_VAR$) => $MODULE_VAR$

• 保存之后, 在编辑器中, 输入: fn, 然后 Tab 键, 就会自动补全 es6 箭头函数.