VS Guide de configuration du code pour un développement de réaction efficace: Améliorez votre efficacité de codage
REACT Les développeurs ont besoin d'un éditeur de code qui peut rédiger efficacement le code React. Il existe des milliers d'extensions gratuites sur le marché pour le code VS qui peuvent vous aider à améliorer votre flux de travail de développement. Cet article se concentrera sur certaines extensions et paramètres qui entraîneront votre efficacité de codage de réaction au niveau professionnel.
certaines des extensions répertoriées dans l'article ne sont pas spécifiques à la réaction, mais elles peuvent toujours améliorer votre efficacité et votre vitesse d'encodage. En fait, il n'y a que quelques extensions qui sont vraiment utiles dans votre codage quotidien.
Les outils et technologies répertoriés dans cet article peuvent vous faire économiser des heures de travail - ce temps aurait été gaspillé pour résoudre de nombreux problèmes petits mais cruciaux. Ils peuvent également vous aider à réduire les erreurs de codage. La clé pour améliorer la productivité est d'automatiser autant de tâches que possible. Les extensions et paramètres suivants vous aideront à atteindre cet objectif.
Points clés
Prise en charge du langage
Lorsque vous installez pour la première fois le code vs, il vous fournira de nombreuses fonctionnalités prudentes, comme la syntaxe JavaScript et la prise en charge de TypeScript et le code JSX.
Ce qui suit est un instantané de l'onglet de bienvenue. Vous pouvez toujours le trouver dans le menu d'aide.
Vous devez effectuer la configuration initiale ici. Étant donné que notre objectif est réagi, nous commencerons par configurer des extensions de langage JavaScript, qui nous fourniront des fonctionnalités supplémentaires qui sont essentielles à notre flux de travail d'efficacité de codage.
Dans la section "Tools and Languages" de l'onglet Bienvenue, cliquez sur le lien JavaScript pour l'installer. Une invite de rechargement apparaîtra et vous devez cliquer dessus pour rendre la nouvelle fonctionnalité.
L'extension du langage JavaScript fournit une variété de fonctionnalités, notamment:
Une liste complète et une documentation de ces fonctionnalités se trouvent dans la documentation du code VS. Je vous recommande fortement de lire chaque fonctionnalité pour comprendre comment les utiliser dans votre flux de travail de développement.
Le chiffre suivant est un exemple d'intelligence et de fonctionnement automatique réel d'importation automatique.
Lorsque la touche de tabulation est enfoncée, le composant d'en-tête sera importé en haut. Le symbole de fin doit être entré et le code sera automatiquement terminé comme:.
Après avoir installé des fonctionnalités de langue JavaScript, VS Code peut vous inviter à fournir un fichier jsconfig.json dans le répertoire racine du projet. Ce n'est pas requis, mais la définition de ce fichier aidera IntelliSense à fournir des conseils plus précis. Voici un exemple de configuration:
<code>{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"baseUrl": ".",
"paths": {
"~/*": ["./*"],
"@/*": ["./src/*"],
"~~/*": ["./*"],
"@@/*": ["./*"]
}
},
"exclude": ["node_modules", ".cache", "dist"]
}</code>La configuration ci-dessus indique au serveur de langue JavaScript quels fichiers appartiennent à votre code source et quels fichiers n'appartiennent pas. Cela garantit que le service linguistique analyse uniquement votre code source, donc les performances sont rapides. La configuration complète est documentée ici, expliquant toutes les valeurs possibles qui peuvent être utilisées dans jsconfig.js.
Si vous prévoyez de créer de grands projets de réaction complexes, il est fortement recommandé d'utiliser TypeScript. En effet, TypeScript offre une sécurité de type, en réduisant la possibilité de fournir des codes d'erreur dans les applications frontales. VS Code fournit la prise en charge du langage de typeScript hors de la boîte en fournissant de nombreuses fonctionnalités (par exemple: :: :::
Veuillez noter que VS Code ne fournit pas de compilateur TypeScript. Vous devez en installer un dans l'environnement global Node.js comme suit:
<code>npm install -g typescript</code>
Flow
(La partie suivante est similaire au texte d'origine, mais le libellé et la structure de la phrase ont été ajustés pour atteindre le but de la pseudo-originalité.)
Paramètres de mappage des clés
Si vous migrez d'un autre éditeur de code vers VS Code, vous serez heureux de savoir que vous pouvez continuer à utiliser les mêmes raccourcis clavier à qui vous êtes déjà habitué. Si vous n'êtes pas familier avec l'éditeur de code, veuillez ignorer cette section. Cependant, si vous avez déjà utilisé un éditeur de code, vous savez peut-être que le recyclage de la mémoire musculaire est inefficace et prend du temps à s'adapter.
Dans la section "Paramètres et liaison des clés" de l'onglet de bienvenue, vous verrez des liens pour installer VIM, sublime, atome et autres raccourcis clavier. Si vous cliquez sur le lien "Autre", vous obtiendrez une liste complète des Keymaps qui peuvent être installés.
J'étais un utilisateur atome avant de passer à VS Code. La configuration du mappage des clés d'Atom dans le code vs est aussi simple que de cliquer sur le lien Atom. Cela installera l'extension atome keymap pour moi. La configuration suivante est requise dans Settings.json pour rendre le code vs plus comme "Atom":
<code>{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"baseUrl": ".",
"paths": {
"~/*": ["./*"],
"@/*": ["./src/*"],
"~~/*": ["./*"],
"@@/*": ["./*"]
}
},
"exclude": ["node_modules", ".cache", "dist"]
}</code>Veuillez lire les instructions fournies par votre extension de raccourci clavier pour savoir comment définir vos touches de raccourci. Les documents peuvent être trouvés en cliquant simplement sur l'extension Keymap dans la barre d'extension.
EMMET JSX Prise en charge
Emmet est une boîte à outils de développement Web qui vous permet d'écrire du code HTML plus efficacement. Si vous n'êtes pas familier avec Emmet, consultez la démo pour voir comment cela fonctionne.
VS Code a EMMET intégré et prend déjà en charge la syntaxe JSX. Malheureusement, la plupart des projets de démarrage React utilisent l'extension .js. Le problème est que VS Code ne reconnaît pas des fichiers tels que le code React, de sorte que la fonction JSX n'est pas activée. Il existe deux solutions:
<code>npm install -g typescript</code>
Pour accéder aux paramètres.json, accédez simplement à l'onglet Menu supérieur et cliquez sur "Affichage"> "Panneau de commande". Entrez "Paramètres" et sélectionnez l'option "Préférences: ouvrir les paramètres (JSON)". Alternativement, vous pouvez appuyer sur ctrl p et entrez "Settings.json" pour ouvrir rapidement le fichier. Vous pouvez également utiliser les touches de raccourci ctrl , pour ouvrir la version d'interface utilisateur set dans le nouvel onglet. Lorsque vous cliquez sur le bouton ICON dans le premier coin supérieur droit, il ouvrira les paramètres.
La deuxième option semble être le moyen le plus simple. Malheureusement, cela entraîne des problèmes avec d'autres outils de développement JavaScript tels que Eslint-Config-Airbnb , qui a un ensemble de règles qui force l'utilisation des extensions de fichiers .jsx pour le code React. La désactivation de cette règle plus tard peut causer d'autres problèmes.
L'équipe REACT officielle recommande d'utiliser l'extension .js pour le code React. D'après mon expérience personnelle, il est préférable de renommer tous les fichiers contenant du code de réaction à .jsx et d'utiliser l'extension .js pour les fichiers contenant du code JavaScript pur. De cette façon, vous pouvez utiliser tous les outils de développement plus facilement.
Format
L'écriture de code de haute qualité vous oblige à écrire code cohérent . En tant que développeurs, nous sommes des humains et il est facile d'oublier les normes que nous nous fixons. Dans cette section, nous découvrirons certains outils essentiels qui nous aideront à écrire automatiquement du code cohérent.
EditorConfig est un fichier de configuration simple qui ne contient que des règles de formatage. Vous devez installer une extension pour que le code vs lise ces règles et écrase leurs propres règles. Suivez simplement les étapes ci-dessous pour le configurer:
<code>{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"baseUrl": ".",
"paths": {
"~/*": ["./*"],
"@/*": ["./src/*"],
"~~/*": ["./*"],
"@@/*": ["./*"]
}
},
"exclude": ["node_modules", ".cache", "dist"]
}</code>VS Code suivra désormais ces règles pour formater votre code. Discutons rapidement des nouvelles lignes. Windows utilise CRLF pour indiquer la terminaison des lignes, tandis que les systèmes basés sur UNIX utilisent LF. S'il vous arrive d'utiliser un fichier avec des pauses à lignes mixtes, vous aurez de nombreux problèmes lors de la soumission du fichier. Vous pouvez configurer comment GIT gère les nouvelles lignes.
Ma méthode préférée consiste à forcer tous les fichiers de projet à utiliser LF Newlines sur n'importe quelle plate-forme. Notez que EditorConfig ne convertit pas les ruptures de ligne en fichiers existants. Il ne définira LF que pour le nouveau fichier. Pour convertir tous les fichiers existants, vous avez deux options:
Ensuite, jetons un coup d'œil à plus joli.
plus joli est le formateur de code le plus facile à configurer pour le code JavaScript. Il prend en charge JavaScript, TypeScript, JSX, CSS, SCSS, moins et GraphQL. Pour le configurer, suivez ces étapes:
<code>npm install -g typescript</code>
<code>// 控制提示是否显示 "atomKeymap.promptV3Features": true, // 更改多光标鼠标绑定 "editor.multiCursorModifier": "ctrlCmd", // 在新窗口中打开文件夹（项目），而不会替换当前窗口 "window.openFoldersInNewWindow": "on",</code>
<code> "emmet.includeLanguages": {
"javascript": "javascriptreact"
}</code>Pour les étapes 3-5, vous devez le faire pour chaque projet que vous voulez que plus jolis soutiennent. Vous pouvez maintenant cliquer sur la commande de format sous le panneau de script NPM sur le code vs, comme indiqué dans la capture d'écran ci-dessous.
Alternativement, vous pouvez exécuter le format d'exécution du NPM de commande pour exécuter plus joli.
Cela entraînera que tous les fichiers soient reformatés correctement et cohérente en fonction des règles par défaut de plus de jolies et des règles que vous remplacez dans les fichiers .prettierrc et .editorConfig. Les pauses de ligne resteront également cohérentes.
Vous avez peut-être remarqué que le formatage du code est maintenant dans trois endroits différents. Vous vous demandez peut-être ce qui se passerait si nous avions des règles contradictoires. Après l'activation de plus joli, il gérera ces règles en fonction des priorités suivantes:
En cas de conflit, la configuration plus jolie sera préférée.
Tout développeur réel sait qu'il est courant de copier le code HTML à partir de quelque part sur Internet et de le coller dans votre code de réaction. Cela vous oblige généralement à convertir les attributs HTML en syntaxe JSX valide. Heureusement, il y a une extension appelée HTML à JSX qui effectue la conversion pour vous. Après l'installation, il peut facilement:
Cela signifie que des propriétés telles que la classe seront converties en classe. Il s'agit d'une très bonne méthode de sauvetage.
(Le reste du contenu est similaire au texte d'origine, mais le libellé et la structure de la phrase sont ajustés pour atteindre l'objectif de la pseudo-originalité. Gardez le format d'image inchangé.)
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
