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. 使用InternalsVisibleToAttribute给assembly添加“友元assembly”特性遭遇"强签名"

    一.如何让Intenal成员暴露给另一个程序集 我们知道Modifier为Internal的类型成员仅限于当前程序集能够访问,但是在某些情况下,我们希望将它们暴露给另一个程序集.比较典型的应用场景包括 ...

  2. fork和exec

    fork pid_t fork(void); 它在调用进程(成为父进程)中返回一次,返回值为新派生进程(成为子进程)的进程ID号 在子进程中又返回一次,返回值为0.因此,返回值本身告知当前进程是子进程 ...

  3. redis quick start

    软件: redis server https://github.com/MicrosoftArchive/redis/releases redis python client, install usi ...

  4. mongodb之 非正常关闭启动报错处理

    Mongodb如果非正常关闭,直接启动会报错.查看日志文件. 处理: 需要做的是删除mongod.lock和WiredTiger.lock这两个lock文件,然后执行--repair,这里的mongo ...

  5. 共用体union

    union共用体名 { 类型名 成员名1: 类型名 成员名2: …… 类型名 成员名n; } 由于各个成员变量在内存中都使用同一段存储空间,因此共用体变量的长度等于最长的成员长度,共用体的访问方式和结 ...

  6. Android Monkey测试入门

    第一步:搭建环境:主要是安装和搭建java和sdk环境,说白了,对我们安卓开发来说,只要搭建好了Android开发环境,Monkey测试环境基本就是OK的了.可以参考:http://www.cnblo ...

  7. 反转链表 II

    反转从位置 m 到 n 的链表.请使用一趟扫描完成反转. 说明:1 ≤ m ≤ n ≤ 链表长度. 示例: 输入: 1->2->3->4->5->NULL, m = 2, ...

  8. secureCRT关闭连接自动关闭tomcat服务

    下午遇到一个神奇的问题: secureCRT登陆某个服务器,用shell脚本启动./catalina.sh start,打开日志tail -f catalina.out,此时 手动关闭连接窗口,导致t ...

  9. 读DataSnap源代码(六)

    具体分析一下DataSanp App与Rest, WebBroker App的不同,先看TDSHTTPService. **************************************** ...

  10. 【转】CSR蓝牙驱动程序引起的Win7奇怪问题

    https://www.yanning.wang/archives/299.html @echo off title 恢复系统 REM 变量初始化 rem CSR路径 set CSRPath=&quo ...