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. kettle的系列教程

    kettle--window开发环境和linux运行环境的迁移 kettle的输入输出组件和脚本组件 kettle--变量的使用 kettle的资源库 kettle的job kettle的hello ...

  2. Airtest Project的探索和使用

    Airtest使用参考博文: https://testerhome.com/topics/12391 1. 安装Python 3 2. 安装pip: 安装方法参考另外一篇随笔 pip3部署: C:\U ...

  3. adb command

  4. 论 微服务 和 Entity Framework 对 数据 的 割裂

    微服务 的 本质 是 面向对象, 微服务 是 面向对象 对 数据中心 发起的挑战, 在 微服务 架构下, “数据为中心” 的 传统架构 被 严重 割裂, 微服务 的 先天矛盾, 是 对象 和 数据 的 ...

  5. 3d tech

    product Company    3D "smart cameras" such as the Gocator LMI Technologies (Delta, BC Cana ...

  6. gaea-editor 项目使用

    项目地址:https://github.com/ascoders/gaea-editor 打开编辑器界面:运行npm run docs 下载gaea-editor项目,进行调试,注意点: gaea-e ...

  7. 关于TP5的一对一、一对多同时存在的关联查询

    主表SQL(tp_member) CREATE TABLE `tp_member` ( `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键id', `us ...

  8. “word无法发布此文章”解决

    之前用的好好的word发布文章到cnblogs,但是最近不好用了:报错如题. 解决方案: 选择设置tab,然后拉到最下面: 会看到有一个"MetaWeblog访问地址":拷贝下来: ...

  9. Iris花逻辑回归与实现

    Iris花的分类是经典的逻辑回归的代表:但是其代码中包含了大量的python库的核心处理模式,这篇文章就是剖析python代码的文章. #取用下标为2,3的两个feture,分别是花的宽度和长度: # ...

  10. JS判断字符串是否为空或是否全为空格

    var test = " "; //为空或全部为空格 if (test.match(/^[ ]*$/)) { console.log("all space or empt ...