Rumah alat pembangunan 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"
  }
}
Salin selepas log masuk

在快捷键配置中加入

{
  "keys": ["super+shift+c"],
  "command": "format_javascript"
}
Salin selepas log masuk

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

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

Atas ialah kandungan terperinci 分享一款sublime text3支持JSX和es201x代码格式化的插件. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara memanggil kaedah komponen anak dalam komponen induk React Cara memanggil kaedah komponen anak dalam komponen induk React Dec 27, 2022 pm 07:01 PM

Kaedah panggilan: 1. Panggilan dalam komponen kelas boleh dilaksanakan dengan menggunakan React.createRef(), pengisytiharan fungsi ref atau props atribut onRef tersuai 2. Panggilan dalam komponen fungsi dan komponen Hook boleh dilaksanakan dengan menggunakan useImperativeHandle atau forwardRef untuk membuang a; Rujuk Komponen kanak-kanak dilaksanakan.

Mari kita bincangkan tentang cara Vue memaparkan komponen secara dinamik melalui JSX Mari kita bincangkan tentang cara Vue memaparkan komponen secara dinamik melalui JSX Dec 05, 2022 pm 06:52 PM

Bagaimanakah Vue memaparkan komponen secara dinamik melalui JSX? Artikel berikut akan memperkenalkan kepada anda bagaimana Vue boleh menghasilkan komponen secara dinamik melalui JSX dengan cekap, saya harap ia akan membantu anda!

Cara menggunakan pemalam yang lebih cantik dalam Vscode_Cara menggunakan pemalam yang lebih cantik dalam Vscode Cara menggunakan pemalam yang lebih cantik dalam Vscode_Cara menggunakan pemalam yang lebih cantik dalam Vscode Apr 02, 2024 pm 02:49 PM

1. Mula-mula buka Vscode Jika pemalam yang lebih cantik tidak dipasang, sila pasangkannya dahulu. Kaedah pemasangan adalah dengan mengklik ikon [Sambungan], kemudian cari [prettier], cari pemalam rasmi dan pasangkannya. 2. Kemudian sediakan contoh kod Gambar berikut adalah sekeping kod HTML dengan format yang agak mengelirukan. 3. Dalam tetingkap vscode yang membuka kod sampel, gunakan kekunci pintasan [CTRL+Shift+P] untuk membuka kotak arahan vscode, masukkan kata kunci [format] dalam kotak dan anda boleh melihat bahawa terdapat 2 pilihan: 1. FormatDocument (kekunci pintasan Shift+Alt+F) Formatkan keseluruhan dokumen 2.FormatSelection

Apakah JSX dalam Vue? Bila nak guna? Bagaimana cara menggunakannya? Apakah JSX dalam Vue? Bila nak guna? Bagaimana cara menggunakannya? Jan 16, 2023 pm 08:23 PM

Apakah JSX dalam Vue? Artikel berikut akan memperkenalkan anda kepada JSX dalam Vue, memperkenalkan masa untuk menggunakan JSX, dan penggunaan asasnya dalam Vue2 saya harap ia akan membantu anda!

Cara menggunakan Prettier untuk memformat kod dalam Vue Cara menggunakan Prettier untuk memformat kod dalam Vue Jun 11, 2023 pm 04:48 PM

Vue ialah rangka kerja JavaScript popular yang digunakan secara meluas dalam pembangunan web. Dalam pembangunan harian, kita perlu memformat kod untuk mengekalkan gaya kod bersatu. Dalam Vue, kami boleh menggunakan pemalam Prettier untuk memformat kod dengan mudah. Prettier ialah alat pemformatan kod yang boleh membantu kami memformat kod secara automatik. Berbanding dengan mengubah suai format kod secara manual, menggunakan Prettier boleh meningkatkan kecekapan kerja kami dan juga memastikan gaya kod.

Penjelasan terperinci tentang cara menggunakan JSX dalam Vue3+Vite Penjelasan terperinci tentang cara menggunakan JSX dalam Vue3+Vite Dec 09, 2022 pm 08:27 PM

Bagaimana untuk menggunakan JSX dalam Vue+Vite? Artikel berikut akan memperkenalkan kepada anda cara menggunakan JSX dalam Vue3+Vite saya harap ia akan membantu anda!

Bagaimana untuk menggunakan sintaks jsx dalam vue3 Bagaimana untuk menggunakan sintaks jsx dalam vue3 May 12, 2023 pm 12:46 PM

Latar Belakang: Projek vue3 menggalakkan penggunaan format komposisi-api+setup yang digabungkan dengan format jsx+hooks, dipisahkan oleh perniagaan, dengan logik yang lebih jelas dan penyelenggaraan yang lebih mudah. Sintaks berikut dicapai terutamanya dengan membandingkan sintaks yang berbeza bagi jsx dan templat untuk mencapai fungsi yang sama 1. Pemalar kandungan biasa Kaedah penulisan adalah sama >hello}//kaedah penulisan tempalte hello 2. Pembolehubah dinamik jsx secara seragam menggunakan kurungan kerinting untuk membalut pembolehubah tanpa tanda petikan Contohnya, kandungan {age}tempalte dibalut dengan kurungan kerinting berganda, dan pembolehubah atribut bermula dengan titik bertindih. Contohnya, {{umur}}{} adalah daripada jsx.

Bagaimana untuk menyahpepijat kod sumber React? Pengenalan kepada kaedah penyahpepijatan menggunakan pelbagai alatan Bagaimana untuk menyahpepijat kod sumber React? Pengenalan kepada kaedah penyahpepijatan menggunakan pelbagai alatan Mar 31, 2023 pm 06:54 PM

Bagaimana untuk menyahpepijat kod sumber React? Artikel berikut akan membincangkan cara untuk menyahpepijat kod sumber React di bawah pelbagai alat, dan memperkenalkan cara untuk menyahpepijat kod sumber sebenar React dalam projek penyumbang, create-react-app, dan vite.

See all articles