添加几个插件即可在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. C#获取二维数组的行数和列数及其多维。。。

    原文发布时间为:2008-11-26 -- 来源于本人的百度文章 [由搬家工具导入] 有一个二维数组sz[,] 怎样获取sz 的行数和列数呢? sz.GetLength(0) 返回第一维的长度(即行数 ...

  2. AtCoder Regular Contest 077 E - guruguru 线性函数 前缀和

    题目链接 题意 灯有\(m\)个亮度等级,\(1,2,...,m\),有两种按钮: 每次将亮度等级\(+1\),如\(1\rightarrow 2,2\rightarrow 3,...,m-1\rig ...

  3. 洛谷—— P2417 课程

    https://www.luogu.org/problemnew/show/2417 题目描述 n个学生去p个课堂,每一个学生都有自己的课堂,并且每个学生只能去一个课堂,题目要求能够安排每一个课堂都有 ...

  4. CodeForces - 258D Little Elephant and Broken Sorting

    Discription The Little Elephant loves permutations of integers from 1 to n very much. But most of al ...

  5. Flexible and Economical UTF-8 Decoder

    http://bjoern.hoehrmann.de/utf-8/decoder/dfa/

  6. 多线程一共就俩问题:1.线程安全(访问共享数据) 2.线程通信(wait(),notify())

    多线程一共就俩问题:1.线程安全(访问共享数据) 2.线程通信(wait(),notify()) 1.线程安全,无非就是加锁,访问共享资源时,synchronized 2.线程通信,就是控制各个线程之 ...

  7. ios大文件存储

    I am using Erica Sadun's method of Asynchronous Downloads (link here for the project file: download) ...

  8. iOS -- iOS11新特性,如何适配iOS11

    前言 这几天抽空把WWDC的Session看了一些,总结了一些iOS11新的特性,可能对我们的App有影响,需要我们进行适配.本文作为一个总结. 本文内容包括:集成了搜索的大标题栏.横向选项卡栏.Ma ...

  9. 如何简单去掉dede后台的验证码 dedecms5.7 验证码怎么去掉

    很多朋友都在找,如何去掉dede后台的验证码,每次登陆都很繁琐.        现在教大家一个dedecms5.7 验证码怎么去掉的最直接的方法: 在dedecms5.7[验证码安全设置]里,说修改后 ...

  10. 传输层:TCP 协议

    传输层:TCP 协议 一.概述 TCP 和 UDP 处在同一层——运输层,但是它们有很多的不同.TCP 是 TCP/IP 系列协议中最复杂的部分,它具有以下特点: (1) TCP 提供 可靠的 数据传 ...