Maison > outils de développement > VSCode > le corps du texte

Comment les développeurs efficaces personnalisent-ils les plugins et les configurations VS Code ?

青灯夜游
Libérer: 2019-11-20 11:20:27
avant
2533 Les gens l'ont consulté

Il y a 2 ans, j'ai abandonné Sublime Text et j'ai choisi Visual Studio Code comme éditeur de code.

Je passe jusqu'à 5 à 6 heures sur VS Code chaque jour, il est donc très nécessaire d'optimiser la configuration de VS Code en fonction de mes besoins. Au cours des 2 dernières années, j'ai essayé différents plug-ins et configurations, et maintenant je sens que tout est parfait. Il est temps de partager mes compétences d'utilisation avec vous !

Comment les développeurs efficaces personnalisent-ils les plugins et les configurations VS Code ?

Plug-ins

VS Code possède un ensemble très riche de plug-ins. Ici, je recommande quelques-uns de mes préférés. Plug-ins VSCode.

Prettier Code Formatter

Téléchargements : 1,67 million

J'utilise Prettier pour unifier mon code style, lorsque j'enregistre le fichier HTML/CSS/JavaScript, il formate automatiquement le code. De cette façon, je n'ai pas à me soucier du formatage du code. Étant donné que Prettier lui-même ne peut pas être personnalisé, cela peut parfois causer un inconfort, mais au moins cela garantit que les membres de l'équipe peuvent facilement unifier le style de codage.

Comment les développeurs efficaces personnalisent-ils les plugins et les configurations VS Code ?

npm

Téléchargements : 1,19 million

Le plug-in npm peut vérifier si le module npm défini dans package.json est cohérent avec le module npm réellement installé :

  • Il est défini dans package.json, mais ce n'est pas réellement le cas. installé

  • Il n'est pas défini dans package.json, mais il est réellement installé
  • La version définie dans package.json est incohérente avec la version réellement installée

Comment les développeurs efficaces personnalisent-ils les plugins et les configurations VS Code ?

npm Intellisense

Téléchargements : 1,05 million

Le plugin npm Intellisense indexera package.json afin que lorsque j'ai besoin d'un module, il puisse être complété automatiquement.

Comment les développeurs efficaces personnalisent-ils les plugins et les configurations VS Code ?

Coloriseur de paires de supports

Téléchargements : 950 000

Bracket Pair Colorizer peut automatiquement colorer les parenthèses correspondantes dans le code et les distinguer avec différentes couleurs, afin que nous puissions facilement identifier le début et la fin d'un certain bloc de code.

Comment les développeurs efficaces personnalisent-ils les plugins et les configurations VS Code ?

Balise de fermeture automatique

Téléchargements : 1,17 million

La fonction du plug-in Auto Close Tag est très simple, il peut compléter automatiquement la balise de fermeture du HTML/XML.

Comment les développeurs efficaces personnalisent-ils les plugins et les configurations VS Code ?

GitLens

Téléchargements : 1,64 million

J'aime beaucoup Gitlens car il m'aide à comprendre rapidement l'historique des modifications du code.

Blâme de la ligne actuelle : affichez la fin de la ligne de code actuelle et affichez le nom, l'heure et les informations du dernier commit

Comment les développeurs efficaces personnalisent-ils les plugins et les configurations VS Code ?

Survols de ligne actuelle  : affichez les dernières informations détaillées sur la validation dans la boîte flottante de la ligne de code actuelle.

Comment les développeurs efficaces personnalisent-ils les plugins et les configurations VS Code ?

Markdown tout en un

Téléchargements : 450 000

Le plug-in Markdown All in One m'aide à écrire des fichiers README et d'autres fichiers MarkDown. J'aime particulièrement la façon dont il gère les listes et les tableaux.

Ajuster automatiquement la séquence numérique de la liste

Comment les développeurs efficaces personnalisent-ils les plugins et les configurations VS Code ?

Formater automatiquement le tableau

Comment les développeurs efficaces personnalisent-ils les plugins et les configurations VS Code ?

Configuration utilisateur

En plus d'installer divers plug-ins, nous pouvons également personnaliser notre VS Code en configurant les paramètres utilisateur de VS Code.

Paramètres des polices

J'aime beaucoup les polices avec des ligatures (ligatures, ligatures, conjonctions ou caractères combinés). Les ligatures combinent plus d'une lettre en un seul glyphe. J'utilise principalement Fira Code comme police que j'utilise pour la programmation, comme le montre l'image ci-dessous : =>===

Comment les développeurs efficaces personnalisent-ils les plugins et les configurations VS Code ? Ma configuration de police Comme suit :

"editor.fontFamily": "'Fira Code', 'Operator Mono', 'iA Writer Duospace', 'Source Code Pro', 
                       Menlo, Monaco, monospace",
"editor.fontLigatures": true
Copier après la connexion

Concernant l'indentation, je l'ai configuré comme ceci :

 "editor.detectIndentation": true,
 "editor.renderIndentGuides": false,
Copier après la connexion

Lorsque le chemin d'import est déplacé ou renommé, il est automatiquement mis à jour :

"javascript.updateImportsOnFileMove.enabled": "always",
Copier après la connexion

user-settings .json

Ce qui suit est mon fichier de configuration VS Code

user-settings.json

:

{
    "workbench.colorCustomizations": {
        "activityBar.background": "#111111",
        "activityBarBadge.background": "#FFA000",
        "list.activeSelectionForeground": "#FFA000",
        "list.inactiveSelectionForeground": "#FFA000",
        "list.highlightForeground": "#FFA000",
        "scrollbarSlider.activeBackground": "#FFA00050",
        "editorSuggestWidget.highlightForeground": "#FFA000",
        "textLink.foreground": "#FFA000",
        "progressBar.background": "#FFA000",
        "pickerGroup.foreground": "#FFA000",
        "tab.activeBorder": "#FFA000",
        "notificationLink.foreground": "#FFA000",
        "editorWidget.resizeBorder": "#FFA000",
        "editorWidget.border": "#FFA000",
        "settings.modifiedItemIndicator": "#FFA000",
        "settings.headerForeground": "#FFA000",
        "panelTitle.activeBorder": "#FFA000",
        "breadcrumb.activeSelectionForeground": "#FFA000",
        "menu.selectionForeground": "#FFA000",
        "menubar.selectionForeground": "#FFA000"
    },
    "editor.fontSize": 14,
    "editor.lineHeight": 24,
    // These are for subliminal, check them out.
    "editor.hideCursorInOverviewRuler": true,
    "editor.lineNumbers": "on",
    "editor.overviewRulerBorder": false,
    "editor.renderIndentGuides": false,
    "editor.renderLineHighlight": "none",
    "editor.quickSuggestions": true,
    // end subliminal changes
    "editor.fontFamily": "'Fira Code', 'Operator Mono', 'iA Writer Duospace', 
                   'Source Code Pro', Menlo, Monaco, monospace",
    "vsicons.projectDetection.autoReload": true,
    "editor.formatOnPaste": false,
    "editor.formatOnSave": true,
    "editor.fontLigatures": true,
    "prettier.tabWidth": 4,
    "editor.wordWrap": "on",
    "editor.detectIndentation": true,
    "workbench.iconTheme": "eq-material-theme-icons-palenight",
    "editor.minimap.enabled": false,
    "editor.minimap.renderCharacters": false,
    "prettier.parser": "flow",
    "workbench.editor.enablePreview": false,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "jsx-sublime-babel-tags": "javascriptreact"
    },
    "emmet.triggerExpansionOnTab": true,
    "emmet.showExpandedAbbreviation": "never",
    "workbench.statusBar.visible": true,
    "workbench.activityBar.visible": true,
    "workbench.editor.showIcons": false,
    "editor.multiCursorModifier": "ctrlCmd",
    "explorer.confirmDelete": false,
    "window.zoomLevel": 0,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "materialTheme.accent": "Yellow",
    "editor.cursorBlinking": "smooth",
    "editor.fontWeight": "500"
}
Copier après la connexion
Si vous souhaitez en savoir plus sur les conseils d'utilisation de VS Code, vous pouvez le consulter

VSCode peut faire ça

. Adresse originale : http://tilomitra.com/vs-code-settings-and-extensions-for-faster-javascript-development/

Cet article est une traduction gratuite, et le le droit d'auteur appartient à l'auteur original

Tutoriel recommandé :

tutoriel vscode

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:fundebug.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