添加几个插件即可在js中快速写html

babel

可以识别React,并高亮显示ES6

command+shift+p -> install package -> babel

使用

在打开js、jsx文件时,右下角选择babel JavaScript(Babel)

Emmet

command+shift+p -> install package -> emmet

配置

打开菜单Preferences -> Package Settings -> Emmet -> Key Bindings - User

粘贴以下代码

[{
"keys": ["tab"],
"command": "expand_abbreviation_by_tab", // put comma-separated syntax selectors for which
// you want to expandEmmet abbreviations into "operand" key
// instead of SCOPE_SELECTOR.
// Examples: source.js, text.html - source
"context": [{
"operand": "source.js",
"operator": "equal",
"match_all": true,
"key": "selector"
}, // run only if there's no selected text
{
"match_all": true,
"key": "selection_empty"
}, // don't work if there are active tabstops
{
"operator": "equal",
"operand": false,
"match_all": true,
"key": "has_next_field"
}, // don't work if completion popup is visible and you
// want to insert completion with Tab. If you want to
// expand Emmet with Tab even if popup is visible --
// remove this section
{
"operand": false,
"operator": "equal",
"match_all": true,
"key": "auto_complete_visible"
}, {
"match_all": true,
"key": "is_abbreviation"
}
]
}]

jsformat

command+shift+p -> install package -> jsformat

配置

打开菜单Preferences -> Package Settings -> JsFormat -> Settings - User,将下面代码贴进去保存。

{
"e4x": true,
// jsformat options
"format_on_save": true,
}

该配置会在每次保存js文件时,自动格式化

sublime3 支持 jsx 语法的更多相关文章

  1. Webstorm 不识别es6 import React from ‘react’——webstorm不支持jsx语法怎么办

    2016-10-31更新 webstorm不支持es6语法怎么办? webstorm不支持jsx语法怎么办? 参考:webstorm不支持jsx语法怎么办 I spent ages trying to ...

  2. vuejs使用jsx语法

    想要vuejs项目支持jsx语法,需要一些插件 babel-plugin-transform-vue-jsx Babel plugin for Vue 2.0 JSX 使用方法: 安装 npm ins ...

  3. 【JAVASCRIPT】React学习-JSX 语法

    摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 JSX 语法 1. 定义 JSX 是javascript + xml 的合集,我们可以将javascript 与 ht ...

  4. react实战项目开发(2) react几个重要概念以及JSX语法

    前言 前面我们已经学习了利用官方脚手架搭建一套可以应用在生产环境下的React开发环境.那么今天这篇文章主要先了解几个react重要的概念,以及讲解本文的重要知识JSX语法 React重要概念 [思想 ...

  5. [转] ReactJS之JSX语法

    JSX 语法的本质目的是为了使用基于 xml 的方式表达组件的嵌套,保持和 HTML 一致的结构,语法上除了在描述组件上比较特别以外,其它和普通的 Javascript 没有区别. 并且最终所有的 J ...

  6. python 全栈开发,Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)

    一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...

  7. React之JSX语法

    1. JSX的介绍   JSX(JavaScript XML)——一种在React组件内部构建标签的类XML语法.react在不使用JSX的情况下一样可以工作,然而使用JSX可以提高组件的可读性,因此 ...

  8. React中最基础的jsx语法

    import React, { Component } from 'react'; class App extends Component { render() { return ( <div ...

  9. react脚手架和深入理解jsx语法

    react的mvc和vue的mvvm vue的mvvm属于双向绑定,view层,model数据层,vm实现双向绑定的控制层 此种模式,再某一类项目种很有优势:管理系统 ( OA, ERP , CRM ...

随机推荐

  1. Eclipse下搭建Maven框架

    内容中包含 base64string 图片造成字符过多,拒绝显示

  2. html table 使用总结

    html中的table是一个历史相当悠久的标签,它能够很方便的实现数据的表格展示.虽然table是个很基础的标签,但是想用好还是对css相关知识有要求的. 由于table标签中自带的属性操作起来略为麻 ...

  3. Thinkphp3.2.3的主从分离事务问题(坑!!!)

    情景:使用Thinkphp3.2.3在项目开发中发现开启主从分离后,一旦事务体内,同时存在写入再读出,再写入这样的操作,TP在识别数据库的时候把读操作和写操作识别到了两个库..实际上希望事务开启后,所 ...

  4. 分布式定时任务调度系统技术解决方案(xxl-job、Elastic-job、Saturn)

    1.业务场景 保险人管系统每月工资结算,平安有150万代理人,如何快速的进行工资结算(数据运算型) 保险短信开门红/电商双十一 1000w+短信发送(短时汇聚型) 工作中业务场景非常多,所涉及到的场景 ...

  5. SecureCRT发送键盘按键对应表(转义字符)

    \r 发送回车(CR) \n 发送换行符(LF) \b 发送退格 \e 发送一个转义 \t 发送一个标签 \\ 发送一个反斜杠字符 \v 将剪贴板的内容粘贴到活动状态会话窗口 \p 暂停一秒钟

  6. 安卓Webview缓存网页数据(无网络正常显示)

    热度 1已有 52 次阅读2016-8-26 17:53 |个人分类:常见问题|系统分类:移动开发 一.需求经历 最近的项目是一个原生 +webview 显示的 APP,一开始的时候,网站那边要求我们 ...

  7. Android 网络编程 记录

    简单介绍 看了深入理解Android网络编程感觉不错.今天对Android网络编程进行了要点记录. 内容 Android基于网络技术和编程实践 要点 定义 描写叙述 IP协议 用于报文交换网络的一种面 ...

  8. pymongo的基本使用

    #!/usr/bin/env python # -*- coding:utf-8 -*- """ MongoDB存储 在这里我们来看一下Python3下MongoDB的存 ...

  9. 【AngularJS】【02】AngularJS应用骨架

    ※文件引自OneDrive,有些人可能看不到

  10. java命令行

    Launches a Java application. Synopsis java [options] classname [args] java [options] -jar filename [ ...