Configuração do VSCode para usar o React

[lupy100]

Galera, qual a configuração do VSCode de vocês para o React ?
Escrevam ai seus temas, icones, snippets, fontes, extensão para indentação etc...
Valeu 👍

[tcodes0]

config.json

{
  //
  // - - - - - - - - THEME - - - - - - - - -
  //
  "workbench.colorTheme": "Shuriken",
  "workbench.iconTheme": "eq-material-theme-icons-ocean",
  "workbench.colorCustomizations": {
    "activityBarBadge.background": "#c76cb2",
    "list.activeSelectionForeground": "#c76cb2",
    "list.inactiveSelectionForeground": "#c76cb2",
    "list.highlightForeground": "#c76cb2",
    "scrollbarSlider.activeBackground": "#c76cb2",
    "editorSuggestWidget.highlightForeground": "#c76cb2",
    "textLink.foreground": "#c76cb2",
    "progressBar.background": "#c76cb2",
    "pickerGroup.foreground": "#c76cb2",
    "tab.activeBorder": "#c76cb2",
    "notificationLink.foreground": "#c76cb2",
    "[Shuriken]": {
      "editor.background": "#1b161b",
      "activityBar.background": "#1b161b",
      "statusBar.background": "#1b161b",
      "panel.background": "#1b161b",
      "sideBar.background": "#1b161b",
      "activityBarBadge.background": "#1b161b",
      "badge.background": "#1b161b",
      "editorPane.background": "#1b161b",
      "editorWidget.background": "#1b161b",
      "tab.activeBackground": "#1b161b",
      "tab.inactiveBackground": "#1b161b",
      "titleBar.activeBackground": "#1b161b",
      "editorGutter.background": "#1b161b",
    }
  },
  "editor.tokenColorCustomizations": {
    "[Material Theme Ocean]": {
      "comments": "#474747",
      "functions": "#7576be",
      "strings": "#6b705f",
      "keywords": "#c5ad97",
      "types": "#6abe7f"
    }
  },
  //
  // - - - - - - - - MACROS  - - - - - - - - -
  //
  "macros": {
    "commentDown": [
      "editor.action.copyLinesDownAction",
      "editor.action.commentLine"
    ],
    "trueCtrlK": ["cursorEndSelect", "editor.action.clipboardCutAction"],
    "findAndReplace": [
      "actions.find",
      "editor.action.startFindReplaceAction",
      "actions.find"
    ]
  },
  //
  // - - - - - - - - FONT - - - - - - - - -
  //
  "markdown.preview.fontSize": 12,
  "editor.fontLigatures": true,
  "terminal.integrated.fontWeightBold": "300",
  "terminal.integrated.fontFamily": "Furacode nerd font",
  "terminal.integrated.lineHeight": 1.35,
  "terminal.integrated.fontSize": 12,
  // = = = = = = = = PragmataPro = = = = = = = =
  "editor.fontFamily": "PragmataPro",
  "editor.fontWeight": "normal",
  "editor.lineHeight": 25,
  "editor.fontSize": 14,
  //
  // - - - - - - - - FORMATTER & LINTER - - - - - - - - -
  //
  "prettier.eslintIntegration": true,
  "eslint.packageManager": "yarn",
  "eslint.run": "onType",
  "eslint.alwaysShowStatus": true,
  "eslint.autoFixOnSave": true,
  //
  // - - - - - - - - Python - - - - - - - - -
  //
  "python.formatting.autopep8Args": ["-a", "-a", "-a"],
  "python.pythonPath": "python3",
  "python.linting.enabled": true,
  "python.formatting.provider": "autopep8",
  //
  // - - - - - - - - GIT - - - - - - - - -
  //
  "git.enableSmartCommit": true,
  "git.confirmSync": false,
  "git.autofetch": true,
  //
  // - - - - - - - - BASH - - - - - - - - -
  //
  "shellformat.path": "/usr/local/bin/shfmt",
  "shellformat.runOnSave": true,
  "shellformat.flag": "-i 2 -ln bash",
  "shellcheck.customArgs": ["-x"],
  //
  // - - - - - - - - JAVASCRIPT - - - - - - - - -
  //
  "javascript.validate.enable": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  // "javascript.referencesCodeLens.enabled": true,
  "typescript.implementationsCodeLens.enabled": true,
  // "typescript.referencesCodeLens.enabled": true,
  //
  // - - - - - - - - TERMINAL - - - - - - - - -
  //
  "terminal.integrated.macOptionIsMeta": true,
  "terminal.external.osxExec": "iTerm2.app",
  "terminal.integrated.cursorStyle": "line",
  "terminal.integrated.env.osx": {
    "VSCODE_OVERRIDES": "/Users/vamac/.vscode_overrides"
  },
  //
  // - - - - - - - - GENERAL - - - - - - - - -
  //
  "colorize.files_extensions": [".js", ".jsx"],
  "colorize.languages": [
    "css",
    "sass",
    "scss",
    "less",
    "postcss",
    "sss",
    "stylus",
    "xml",
    "svg",
    "javascript",
    "html"
  ],
  "workbench.statusBar.feedback.visible": false,
  "workbench.activityBar.visible": false,
  "workbench.statusBar.visible": true,
  "debug.allowBreakpointsEverywhere": true,
  "atomKeymap.promptV3Features": true,
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.renderWhitespace": "all",
  "editor.tabSize": 2,
  "editor.wordBasedSuggestions": true,
  "editor.formatOnSave": true,
  "editor.renderControlCharacters": true,
  "editor.minimap.enabled": false,
  "editor.formatOnType": true,
  "editor.formatOnPaste": true,
  "editor.snippetSuggestions": "top",
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1500,
  "files.trimTrailingWhitespace": true,
  "files.hotExit": "onExitAndWindowClose",
  "emmet.showAbbreviationSuggestions": false,
  "colorHelper.pickerForm": "compact",
  "explorer.confirmDragAndDrop": false,
  "breadcrumbs.enabled": true,
  "breadcrumbs.filePath": "on",
  "breadcrumbs.symbolPath": "on",
  "github.hosts": [
    {
      "host": "https://github.com",
      "username": "oauth",
      "token": "system"
    }
  ]
}

extensions

Tyriar.lorem-ipsum
Zignd.html-css-class-completion
akamud.vscode-theme-onedark
anseki.vscode-color
bierner.markdown-preview-github-styles
dbaeumer.vscode-eslint
Dennitz.vscode-generact
dhershman.Theme-Dusty-Dark
donjayamanne.githistory
eamodio.remotehub
Equinusocio.vsc-material-theme
esbenp.prettier-vscode
Everspace.rightclick-git
formulahendry.auto-close-tag
foxundermoon.shell-format
geddski.macros
GitHub.vscode-pull-request-github
gluons.vscode-atom-sass-snippet
howardzuo.vscode-git-tags
jackytsu.text-transformer
jetmartin.bats
joshpeng.theme-charcoal-oceanicnext
jpoissonnier.vscode-styled-components
kamikillerto.vscode-colorize
lamartire.git-indicators
mgmcdermott.vscode-language-babel
ms-python.python
ms-vscode.atom-keybindings
ms-vscode.cpptools
msjsdiag.debugger-for-chrome
PKief.material-icon-theme
rebornix.ruby
robinbentley.sass-indented
rokoroku.vscode-theme-darcula
shakram02.bash-beautify
steoates.autoimport
timonwong.shellcheck
TobiasTimm.shuriken
truman.autocomplate-shell
xabikos.JavaScriptSnippets
xabikos.ReactSnippets

[matheusrod92]

Tema: Drácula

Plugins:

• Dracula Official (dracula-theme.theme-dracula)
• EditorConfig for VS Code (editorconfig.editorconfig)
• ES7 React/Redux/GraphQL/React-Native snippets (dsznajder.es7-react-js-snippets)
• ESLint (dbaeumer.vscode-eslint)
• Prettier - Code formatter (esbenp.prettier-vscode)

User settings:

{
    "workbench.colorTheme": "Dracula",
    "editor.tabSize": 2,
    "editor.rulers": [
        110,
        120
    ],
    "eslint.autoFixOnSave": true,
    "prettier.trailingComma": "all",
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
    "emmet.triggerExpansionOnTab": true,
    "editor.renderWhitespace": "all"
}

Fonte: padrão

Icones: padrão

[thismarcoantonio]

Theme

Palenight Italic

Icon Theme

Vscode Great Icons

Font

Courier Prime Code

Configs

2 espaços de indent
Sem snippets pra js

[linconkusunoki]

eu não mexo muito nas configs do VSCode, o que eu geralmente adiciono no projeto referente ao React é o ESLint + Prettier, dai ativo no VSCode para ele formatar o código no sabe com essas configs:

.eslintrc
https://gist.github.com/linconkusunoki/e3c832a7f068f9d668a0928cbe9a5f17

settings.json
https://gist.github.com/linconkusunoki/24955d69329e7111711c26885f199916

também adiciono o .editorconfig :)