首页 开发工具 sublime 分享一款sublime text3支持JSX和es201x代码格式化的插件

分享一款sublime text3支持JSX和es201x代码格式化的插件

Apr 28, 2021 pm 04:54 PM
jsx prettier react.js

下面由sublime教程栏目给大家推荐一款sublime text 3 支持JSX和es201x 代码格式化的插件,希望对需要的朋友有所帮助!

分享一款sublime text3支持JSX和es201x代码格式化的插件

推荐一款sublime text 3 支持JSX和es201x 代码格式化的插件

最近开始撸React的时候,一直使用的sublime text3着实让强迫症的我难受至极,本身不支持JSX的高亮,安装完Babel之后新的问题来了,格式化插件挂了。。。

前前后后尝试了两三个插件(jsfmt etc.),都不太理想。
esformatter-jsx可以使用,但是那个对JSX的缩进,还有对诸如switch语句的诡异缩进,糟心。
终于在准备换IDE的时候看到了VSCode格式化插件的一个配置项有esformatter-jsx,还可以选择prettier

prettier官网(科学上网):https://prettier.io/docs/en/install.html
可以看到Facebook在用它优化React项目的代码,没深究。

执行npm i -g prettier
下载到的包里有个bin-prettier.js,这就是本体了。

sublime text3 直接在package control搜索prettier下载,打开它的User配置项加入如下保存即可。

注意修改你本地的nodenode_modules路径
{
  "debug": false,
  "prettier_cli_path": "/usr/local/lib/node_modules/prettier/bin-prettier.js",
  "node_path": "/usr/local/bin/node",
  "auto_format_on_save": false,
  "auto_format_on_save_excludes": [],
  "allow_inline_formatting": false,
  "custom_file_extensions": [],
  "max_file_size_limit": -1,
  "additional_cli_args": {},
  "prettier_options": {
    "printWidth": 80,
    "singleQuote": false,
    "trailingComma": "none",
    "bracketSpacing": true,
    "jsxBracketSameLine": false,
    "parser": "babylon",
    "semi": true,
    "requirePragma": false,
    "proseWrap": "preserve",
    "arrowParens": "avoid"
  }
}
登录后复制

在快捷键配置中加入

{
  "keys": ["super+shift+c"],
  "command": "format_javascript"
}
登录后复制

具体可以去github看插件作者的Readme

插件的功能不是全部功能,可以在命令行使用指令格式化代码,(也可以直接在项目中引用?)

以上是分享一款sublime text3支持JSX和es201x代码格式化的插件的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

React父组件怎么调用子组件的方法 React父组件怎么调用子组件的方法 Dec 27, 2022 pm 07:01 PM

调用方法:1、类组件中的调用可以利用React.createRef()、ref的函数式声明或props自定义onRef属性来实现;2、函数组件、Hook组件中的调用可以利用useImperativeHandle或forwardRef抛出子组件ref来实现。

聊聊Vue怎么通过JSX动态渲染组件 聊聊Vue怎么通过JSX动态渲染组件 Dec 05, 2022 pm 06:52 PM

Vue怎么通过JSX动态渲染组件?下面本篇文章给大家介绍一下Vue高效通过JSX动态渲染组件的方法,希望对大家有所帮助!

Vscode中prettier插件怎么使用_Vscode中prettier插件使用方法 Vscode中prettier插件怎么使用_Vscode中prettier插件使用方法 Apr 02, 2024 pm 02:49 PM

1、首先打开Vscode,如果没有安装prettier插件,请先安装,安装方法是点击【Extension】图标,然后搜索【prettier】,找到官方插件并安装。2、然后准备一段示例代码,如下图是一段格式比较混乱的html代码。3、在打开示例代码的vscode窗口中,使用快捷键【CTRL+Shift+P】打开vscode命令框,在框中输入【format】关键字,可以看到有2个选项:1.FormatDocument(快捷键Shift+Alt+F)对整个文档做格式化2.FormatSelection

Vue中什么是JSX?什么时候用?怎么用? Vue中什么是JSX?什么时候用?怎么用? Jan 16, 2023 pm 08:23 PM

Vue中什么是JSX?下面本篇文章给大家了解一下Vue中的JSX,介绍一下什么时候使用JSX、在Vue2中的基本使用,希望对大家有所帮助!

Vue中如何使用Prettier格式化代码 Vue中如何使用Prettier格式化代码 Jun 11, 2023 pm 04:48 PM

Vue是一款流行的JavaScript框架,广泛应用于Web开发中。在日常开发中,我们需要对代码进行格式化以保持代码风格的统一。在Vue中,我们可以使用Prettier插件来方便地进行代码格式化。Prettier是一款代码格式化工具,它可以帮助我们自动对代码进行格式化。相比手动修改代码格式,使用Prettier可以大大提高我们的工作效率,同时也能保证代码风格

详解Vue3+Vite中怎么使用JSX 详解Vue3+Vite中怎么使用JSX Dec 09, 2022 pm 08:27 PM

Vue+Vite中怎么使用JSX?下面本篇文章给大家介绍一下Vue3+Vite 中 JSX 的使用方式,希望对大家有所帮助!

怎么在vue3中使用jsx语法 怎么在vue3中使用jsx语法 May 12, 2023 pm 12:46 PM

背景vue3项目中推进使用composition-api+setup形式配合jsx+hooks形式,按业务分离,逻辑更清晰,维护更方便。语法下面主要通过对比jsx和template不同语法,来实现同样的功能一丶普通内容普通内容常量,写法是一样的//jsx写法setup(){return()=>hello}//tempalte写法hello二丶动态变量jsx统一使用大括号包裹变量,没有引号,比如{age}tempalte内容使用双大括号包裹,属性变量使用冒号开头如{{age}}{}是jsx的

怎么调试React源码?多种工具下的调试方法介绍 怎么调试React源码?多种工具下的调试方法介绍 Mar 31, 2023 pm 06:54 PM

怎么调试React源码?下面本篇文章带大家聊聊多种工具下的调试React源码的方法,介绍一下在贡献者、create-react-app、vite项目中如何debugger React的真实源码,希望对大家有所帮助!

See all articles