Maison > outils de développement > sublime > Partagez un plug-in pour Sublime Text3 qui prend en charge le formatage du code JSX et es201x

Partagez un plug-in pour Sublime Text3 qui prend en charge le formatage du code JSX et es201x

藏色散人
Libérer: 2021-04-28 16:54:03
avant
2489 Les gens l'ont consulté

La colonne tutorielle suivante de sublime recommande un plug-in pour sublime text 3 qui prend en charge le formatage du code JSX et es201x. J'espère qu'il sera utile aux amis dans le besoin !

Partagez un plug-in pour Sublime Text3 qui prend en charge le formatage du code JSX et es201x

Recommander un plug-in pour Sublime Text 3 qui prend en charge le formatage de code JSX et es201x

Quand j'ai commencé à jouer React récemment, je Je l'utilise Sublime Text3 me fait vraiment souffrir de trouble obsessionnel-compulsif. Il ne prend pas en charge la mise en évidence de JSX. Après l'installation de Babel, un nouveau problème est survenu. . .

J'ai essayé deux ou trois plug-ins (jsfmt etc.) l'un après l'autre, mais aucun d'entre eux n'était idéal.
esformatter-jsx peut être utilisé, mais l'indentation de JSX et l'étrange indentation d'énoncés tels que switch sont terribles.
Enfin, alors que j'étais sur le point de changer d'IDE, j'ai vu que l'un des éléments de configuration du plug-in de formatage VSCode était esformatter-jsx, et vous pouviez également choisir prettier.

plus joli site officiel (Science Internet) : https://prettier.io/docs/en/install.html
Vous pouvez voir que Facebook l'utilise pour optimiser le code du React projet , mais je n'y suis pas allé.

Exécuter npm i -g prettier
Le package téléchargé contient un bin-prettier.js, qui est l'ontologie.

sublime text3 recherchez directement package control dans prettier pour télécharger, ouvrez son User élément de configuration, ajoutez-le comme suit et enregistrez-le.

Attention à modifier vos chemins locaux node et node_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"
  }
}
Copier après la connexion

et ajoutez

{
  "keys": ["super+shift+c"],
  "command": "format_javascript"
}
Copier après la connexion

à la configuration des touches de raccourci. Pour plus de détails, vous pouvez aller sur github. pour voir le Readme de l'auteur du plug-in

Les fonctions du plug-in ne sont pas toutes des fonctions Vous pouvez utiliser des instructions sur la ligne de commande pour formater le code (peut-il aussi être cité directement dans le projet ?)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:segmentfault.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal