添加几个插件即可在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. 图表插件echars的使用案例

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...

  2. PMI8940 PON (power on) trigger

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

  3. 用Python和Pygame写游戏-从入门到精通(py2exe篇)

    这次不是直接讲解下去,而是谈一下如何把我们写的游戏做成一个exe文件,这样一来,用户不需要安装python就可以玩了.扫清了游戏发布一大障碍啊! perl,python,java等编程语言,非常好用, ...

  4. 关于getSystemResource, getResource 的总结

    项目中, 有时候要读取当前classpath下的一些配置文件. 之前用的读取配置文件的代码如下 public static Properties loadPropertiesFile(String f ...

  5. Codeforces Round #451 (Div. 2) A. Rounding【分类讨论/易错】

    A. Rounding time limit per test 1 second memory limit per test 256 megabytes input standard input ou ...

  6. Android学习--持久化(一) 文件存储

    持久化之   文件存储 这里把Android持久化全都整理一下,这一篇文章先简单的说一下文件的存储,通过下面一个简单的Demo,理解一下这个文件存储,先说说下面Demo的思路: 1.创建EditTex ...

  7. Java死锁及解决

    Java线程死锁如何避免这一悲剧  Java线程死锁需要如何解决,这个问题一直在我们不断的使用中需要只有不断的关键.不幸的是,使用上锁会带来其他问题.让我们来看一些常见问题以及相应的解决方法: Jav ...

  8. ORACLE SQL*PLUS环境变量设置及说明

    1:查看当前用户的环境设置: SQL> define DEFINE _DATE " (CHAR) DEFINE _CONNECT_IDENTIFIER = "updb&quo ...

  9. git常用命令,制作缩写命令

    目录 基础命令 常用命令列表 查看状态 添加到本地仓库 推送到远程仓库 创建分支 更新分支, 合并分支 查看分支的差异 回滚 其它 缩写命令 基础命令 # 生成SSH key ssh-keygen - ...

  10. 列表pagesize修改每页显示的数量失效

    ◇系统错误修复工具 >> 检测微表正确性 原因是删除一些数据导致记录与实际数据不符 转自:http://bbs.dedecms.com/269491.html