Skip to content
| Marketplace
Sign in
Visual Studio Code>Extension Packs>NextJS & React Extensions pack | Tommy SauceyNew to Visual Studio Code? Get it now.
NextJS & React Extensions pack | Tommy Saucey

NextJS & React Extensions pack | Tommy Saucey

Tommy Saucey

|
364 installs
| (1) | Free
Custom package containing useful extensions to improve your Next JS & React development
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Informations

Configuration Visual Studio Code

🇫🇷 Ajouter le code suivant dans le paramétrage de votre Visual Studio Code afin d'assurer le bon fonctionnement des extensions installées.

🇺🇸 Add the following code in the settings of your Visual Studio Code to ensure the correct functioning of the installed extensions.

{
  "window.zoomLevel": -1,
  // Apparence
  // -- Editeur
  "workbench.startupEditor": "none",
  "editor.minimap.enabled": false,
  "breadcrumbs.enabled": true,
  // -- Sidebar
  "workbench.tree.indent": 15,
  "workbench.tree.renderIndentGuides": "always",
  // -- Code
  "editor.occurrencesHighlight": false, 
  "editor.renderWhitespace": "trailing", 
  // Thème
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', 'Operator Mono Lig', monospace",
  "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "editor.lineHeight": 28,
  "workbench.colorTheme": "Copilot Theme",
  "workbench.iconTheme": "material-icon-theme",
  "indentRainbow.indicatorStyle": "light",
  "indentRainbow.ignoreErrorLanguages": ["*"],
  "indentRainbow.lightIndicatorStyleLineWidth": 2,
  "indentRainbow.colors": [
    "rgba(255,255,64,0.2)",
    "rgba(127,255,127,0.2)",
    "rgba(255,127,255,0.2)",
    "rgba(79,236,236,0.2)"
  ],
  // Ergonomie
  "editor.wordWrap": "on",
  "editor.suggest.insertMode": "replace",
  "editor.acceptSuggestionOnCommitCharacter": false,
  "editor.formatOnSave": false,
  "editor.formatOnPaste": false,
  "editor.linkedEditing": true,
  "explorer.autoReveal": false,
  "explorer.confirmDragAndDrop": false,
  "explorer.compactFolders": false,
  "workbench.editor.enablePreview": false,
  "emmet.triggerExpansionOnTab": true, 
  // Fichiers
  "files.autoSave": "onFocusChange",
  "files.defaultLanguage": "markdown",
  "files.exclude": {
    "**/.idea": true
  },
  "search.exclude": {
    "**/dist*": true,
    "**/node_modules": true,
  },
  // Formatters
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "files.associations": {
    "*.html": "twig"
  },
  "emmet.includeLanguages": {
    "twig": "html"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // Extensions
  "editor.unicodeHighlight.nonBasicASCII": false,
  "audioCues.lineHasError": "off",
  "editor.accessibilitySupport": "off",
  "security.workspace.trust.untrustedFiles": "open",
  "editor.inlineSuggest.enabled": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "typescript.updateImportsOnFileMove.enabled": "always",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "git.autofetch": true,
  "git.confirmSync": false,
  // Copilot
  "github.copilot.enable": {
    "*": true,
    "plaintext": false,
    "markdown": false,
    "scminput": false
  }
}

🇫🇷 Ajouter le code suivant dans le paramétrage des raccourcis clavier de votre Visual Studio Code

🇺🇸 Add the following code in the keyboard shortcuts settings of your Visual Studio Code

[
    // Etend la sélection
    {
        "key": "ctrl+d",
        "command": "editor.action.smartSelect.expand",
        "when": "editorTextFocus"
    },
    // Trouve toutes les occurences du mot sélectionné
    {
        "key": "shift+ctrl+d",
        "command": "editor.action.selectHighlights",
        "when": "editorFocus"
    },
    // Ouvre un fichier
    {
        "key": "ctrl+o",
        "command": "workbench.action.quickOpen"
    },
    // Crée un nouveau fichier
    {
        "key": "ctrl+n",
        "command": "explorer.newFile"
    },
    // Commandes
    {
        "key": "ctrl+p",
        "command": "workbench.action.showCommands"
    },
    // Masque / Affiche l'explorateur de fichier
    {
        "key": "alt+1",
        "command": "workbench.view.explorer",
    },
    {
        "key": "alt+1",
        "command": "workbench.action.toggleSidebarVisibility",
        "when": "explorerViewletVisible"
    },
    // Masque / Affiche la vue git
    {
        "key": "ctrl+k",
        "command": "workbench.view.scm"
    },
    {
        "key": "ctrl+k",
        "command": "workbench.action.toggleSidebarVisibility",
        "when": "view.workbench.scm.visible"
    },
    {
        "key": "ctrl+k",
        "command": "-workbench.action.terminal.clear",
        "when": "terminalFocus"
    },
    // Masque / Affiche le terminal
    {
        "key": "ctrl+t",
        "command": "workbench.action.terminal.toggleTerminal"
    },
    // Nettoie le terminal
    {
        "key": "ctrl+l",
        "command": "workbench.action.terminal.clear",
        "when": "terminalFocus"
    },
    // Ouvre le fichier courant dans l'explorer de l'OS
    {
        "key": "shift+ctrl+o",
        "command": "revealFileInOS",
    },
    // Navigation par symbole
    {
        "key": "ctrl+r",
        "command": "workbench.action.gotoSymbol"
    },
    // Reformatte le document
    {
        "key": "alt+ctrl+l",
        "command": "editor.action.formatDocument"
    },
    {
        "key": "cmd+[Period]",
        "command": "editor.action.commentLine",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "shift+cmd+[Period]",
        "command": "-editor.action.commentLine",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "cmd+shift+i",
        "command": "editor.action.sourceAction",
        "args": {
            "kind": "source.addMissingImports",
            "apply": "first"
        }
    }
]
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft