1.下载如下插件:

https://github.com/ionutvmi/sublime-jsfmt#installation

这个插件是jsfmt,可以直接在package里搜索到;

2.user setting里放入如下配置:

{
"autoformat": true,
"extensions":
[
"js",
"jsx",
"sublime-settings"
],
"options":
{
"jsx":
{
"alignWithFirstAttribute": true,
"attrsOnSameLineAsTag": false,
"firstAttributeOnSameLine": false,
"formatJSX": true,
"maxAttrsOnTag": 1
},
"plugins":
[
"esformatter-jsx"
]
}
}

3.打开package文件:

如上,jsfmt中安装npm插件:

npm i esformatter@latest esformatter-jsx@latest

这个插件可以实现jsx的代码格式化,如果不安装,不能正常格式化jsx,只能格式化js

4.最后设置快捷键:

如图,这个在github中有教程,只要是本身插件没设置快捷键,如要本人自己设置快捷键

sublime 格式化react插件配置教程 jsfmt配置的更多相关文章

  1. Sublime Text 3 插件、主题、配置

    换电脑,Sublime Text 3 重新配置一遍,做个记录 1. 下载:http://www.sublimetext.com/3 2. 插件管理器 Package Control (Ctrl + ` ...

  2. sublime text 3插件下载教程

    Sublime官网下载地址:http://www.sublimetext.com/ 安装插件:(插件包管理Preferences Browse Packages) 插件官网:http://www.fe ...

  3. 2018超详细sublime text3+python3.x安装配置教程(附常用插件安装教程)

    导读 本文是关于2018年7月最新版sublime text3+pythin3.x下载及安装配置教程,sublime text3版本为3176,python版本为3.7,安装环境是基于windows1 ...

  4. Lua IDE工具-Intellij IDEA+lua插件配置教程(Chianr出品)

    Lua 编译工具IDE-Intellij IDEA 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Ch ...

  5. Sublime Text3下的markdown插件的安装及配置

    Sublime Text3下的markdown插件的安装及配置 安装准备--安装Package Control 安装MarkdownEditing 安装Markdown Preview或OmniMar ...

  6. Sublime 插件安装、常用配置

    安装:sublime + 插件 安装Sublime: 官网:http://www.sublimetext.com/ 安装package control组件,之后我们会使用该组件给Sublime安装常用 ...

  7. phpstorm通过FileWatchers配置自动格式化代码插件

    在自动格式代码的插件中, prettier一直是挺不错的, 这个插件在不同的IDE里有不同的配置地方, 但是配置参数基本上是差不多的. 下面就说明下在phpstorm(版本2019.2)中如何配置的吧 ...

  8. 手把手教你webpack、react和node.js环境配置(上篇)

    很多人刚学习react的时候,往往因为繁琐的配置而头疼,这里我将手把手教大家怎么用webpack配置react和redux的环境,这篇教程包括前端react和后台node整个网站的环境配置,对node ...

  9. webpack4 中的最新 React全家桶实战使用配置指南!

    最新React全家桶实战使用配置指南 这篇文档 是吕小明老师结合以往的项目经验 加上自己本身对react webpack redux理解写下的总结文档,总共耗时一周总结下来的,希望能对读者能够有收获, ...

随机推荐

  1. caller

    caller返回调用了当前函数的那个对象(谁call了当前函数,即当前函数的caller) 对于函数来说,caller 属性只有在函数执行时才有定义 假如函数是由顶层(window)调用的,那么 ca ...

  2. ~ # himm -sh: himm: not found的解决方法

    ls /bin发现没有himm 海思根文件默认没有把himm工具集成在bin里,但是在sdk中 /home/swann/Hi3516CV300_SDK_V1.0.3.0/osdrv/tools/boa ...

  3. centos7离线安装rpm包自动解决依赖

    离线安装rpm包自动解决依赖参照https://blog.csdn.net/u011396718/article/details/80153515当生产环境由于安全原因处于断网状态的时候.通过本地源的 ...

  4. 关于TF-IDF的解释

    TF:term frequency ,词频 .指的是 term 出现的评率.词频和 2 个因数有关,在一个文档中出现这个词条次数越多,词频越高,文档总词条总数越多这个值被稀释. 所以  一般 TF = ...

  5. instanceof isInstance isAssignableFrom 比较

    instanceof  :  java 的关键字 判断一个 实例对象 是不是 可以赋值 给一个 class(  实例对象是不是 class 或者 subClass 的实现 ),表示的类和对象之间的关系 ...

  6. beautifulSoup使用

  7. Linux下使用Quagga(Zebra)搭建路由器记录(转)

    写在前面 从22号中午开始琢磨zebra/quagga的用法,一直到晚上11点多都没有什么头绪.各种Google,百度,几近崩溃.由于网上关于zebra/quagga的配置方法都是在真实的若干台电脑上 ...

  8. mysql的变量信息详解

    mysql的变量详解 执行show variables命令可以查看MySQL服务器的变量 变量名 默认值 说明 对应的配置文件参数 auto_increment_increment 1 自增长类型的初 ...

  9. mysql程序之mysqladmin详解

    mysqladmin命令 mysqladmin是执行管理操作的客户端.您可以使用它来检查服务器的配置和当前状态,以创建和删除数据库等 用法: mysqladmin [OPTIONS] command ...

  10. MS DSVM、DLVM

    DSVM(Data Science Virtual Machine 数据科学虚拟机)  是专为研究数据科学生成的 Microsoft Azure 云上的自定义 VM 映像.它预装并预配了许多热门数据科 ...