添加几个插件即可在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. [LeetCode] Repeated DNA Sequences hash map

    All DNA is composed of a series of nucleotides abbreviated as A, C, G, and T, for example: "ACG ...

  2. 模块(python的标准库)

    在python中叫做模块,其他语言中叫做类库.python中的模块有三种:内置模块,第三方模块,自定义模块. 模块的使用: 先导入,import+模块名,再使用,模块名+函数名() .py文件与.py ...

  3. uva 1442:Cave(贪心)

    题意:一个洞穴长n,告诉你每个位置的地面高度和顶部高度,让你往里灌水,要求水不能碰到天花板(但可以无限接近).求最多的水量.(洞穴两边视为封闭) 思路:如果知道一个位置向左看最高可以多高,向右看最高可 ...

  4. JavaScript正则表达

    Javascript 与正则表达式 一.正则表达式(regular expression简称res) 1.定义: 一个正则表达式就是由普通字符以及特殊字符(称为元字符)组成的文字模式.该模式描述在查找 ...

  5. Codeforces Round #451 (Div. 2) B. Proper Nutrition【枚举/扩展欧几里得/给你n问有没有两个非负整数x,y满足x·a + y·b = n】

    B. Proper Nutrition time limit per test 1 second memory limit per test 256 megabytes input standard ...

  6. Codeforces 482B Interesting Array(线段树区间更新)

    题目链接 Interesting Array 区间更新.然后对于每一个约数重新求一遍区间的&值,不符合就跳出. #include <bits/stdc++.h> using nam ...

  7. PHP如何在页面中原样输出HTML代码

    字符串与HTML之间的相互转换主要应用htmlentities()函数来完成. header("Content-Type: text/html; charset=utf-8"); ...

  8. Spring MVC通过Pageable对象和PageableDefault注解获取分页信息(MongoDB通过Pageable来操作分页)

    说明:Pageable同时也能用于操作MongoDB的分页. PageableSpring Data库中定义的一个接口,该接口是所有分页相关信息的一个抽象,通过该接口,我们可以得到和分页相关所有信息( ...

  9. Spring中使用集成MongoDB Client启动时报错:rc: 48

    一定是所在的服务器也装了MongoDB导致端口冲突,解决方法:kill掉全部MongoDB的进程. ps aux | grep mongod PID 参考: http://blog.csdn.net/ ...

  10. 【前端GUI】—— 前端设计稿切图通用性标准

    前言:公司在前端组和视觉组交接设计稿切图的时候,总会因为视觉组同事们对前端的实现原理不清楚而出现各种问题,在用的时候还得再次返工,前端组同事们一致觉得应该出一份<设计稿切图通用性标准文件> ...