添加几个插件即可在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. PMI8940 PON (power on) trigger

    PMI8940 唯一的 PON input pin 是 SHDN_N, PM8937 的 VREG_L5 會接到 PMI8940 的 SHDN_N, PM8937 負責整個系統的 power on s ...

  2. jdk、maven、tomcat环境变量配置

    1.jdk 新建环境变量: JAVA_HOME:C:\Program Files\Java\jdk1.8.0_91 CLASSPATH:.;%JAVA_HOME%\lib;%JAVA_HOME%\li ...

  3. hdu 3061 hdu 3996 最大权闭合图 最后一斩

    hdu 3061 Battle :一看就是明显的最大权闭合图了,水提......SB题也不说边数多少....因为开始时候数组开小了,WA....后来一气之下,开到100W,A了.. hdu3996. ...

  4. LeetCode OJ--4Sum *

    https://oj.leetcode.com/problems/4sum/ 在一个数列中,找出所有的4个数,它们的和是target. class Solution { public: vector& ...

  5. NieR:Automata中的一段文字

    还没开始玩这个游戏,但在网易云音乐上听到一首歌,很好听 http://music.163.com/#/m/song?id=468490570 搜了一下相关视频,发现这首歌是在与一个叫做歌姬的boss战 ...

  6. 【Kafka】《Kafka权威指南》——分区partition

    在上篇的例子里([Kafka]<Kafka权威指南>--写数据), ProducerRecord 对象包含了目标主题.键和值. Kafka 的消息是 一个个 键值对, ProducerRe ...

  7. JAVA基础之Set接口

    个人理解: Set接口是Collection接口的子类,其继承了所有方法,HashSet集合则实现了Set接口,其内部存储数据时依靠哈希表,一个类似数组和链表的结合体.设置空集合时,存在默认的容量和加 ...

  8. Ubuntu 16.04下使用Wine安装Notepad++

    说明: 1.使用的Wine版本是深度出品(Deepin),已经精简了很多没用的配置,使启动能非常快,占用资源小. 2.关于没有.wine文件夹的解决方法:在命令行上运行winecfg: 下载: (链接 ...

  9. Unity3D开发基础组件提取总结

    在游戏开发过程中,除了逻辑功能的开发之外,还有非常多基础的模块.这些模块,对大部分手机网络游戏来说都是一样的.所以,在上个游戏已经上线运营大半年之际,我认为有必要将这些模块整理出来.让后面其它游戏的开 ...

  10. Android API Guides---Layouts

    布局定义了视觉结构的用户界面.如活动或应用程序插件的用户界面. 您能够通过两种方式申报的布局: 声明在XML UI元素. Android提供了相应视图类和子类,如那些部件和布局一个简单的XML词汇表. ...