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

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 !

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.

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

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.

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.

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.

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

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.

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

Formater automatiquement le tableau

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 : =>===

Ma configuration de police Comme suit :

"editor.fontFamily": "'Fira Code', 'Operator Mono', 'iA Writer Duospace', 'Source Code Pro', 
                       Menlo, Monaco, monospace",
"editor.fontLigatures": true

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

 "editor.detectIndentation": true,
 "editor.renderIndentGuides": false,

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

"javascript.updateImportsOnFileMove.enabled": "always",

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"
}

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!