Skip to content

Instantly share code, notes, and snippets.

@viktorbezdek
Last active March 8, 2018 13:23
Show Gist options
  • Save viktorbezdek/5f5374a71e043bded1d58f6304c57d12 to your computer and use it in GitHub Desktop.
Save viktorbezdek/5f5374a71e043bded1d58f6304c57d12 to your computer and use it in GitHub Desktop.
Useful VSCode extensions/settings for React Development

Useful VSCode extensions/settings for React Development

Extensions

  • CoenraadS.bracket-pair-colorizer
  • DavidAnson.vscode-markdownlint
  • DeepScan.vscode-deepscan
  • Dennitz.vscode-generact
  • EditorConfig.EditorConfig
  • GregorBiswanger.package-watcher
  • PeterJausovec.vscode-docker
  • TomiTurtiainen.js-complexity-analysis
  • WallabyJs.quokka-vscode
  • Zignd.html-css-class-completion
  • aaron-bond.better-comments
  • akamud.vscode-caniuse
  • alefragnani.Bookmarks
  • andys8.jest-snippets
  • anthony-y.package-to-readme
  • christian-kohler.npm-intellisense
  • christian-kohler.path-intellisense
  • clinyong.vscode-css-modules
  • cmstead.jsrefactor
  • codezombiech.gitignore
  • cssho.vscode-svgviewer
  • cvarisco.vs-component-app
  • dakara.transformer
  • dbaeumer.vscode-eslint
  • dsznajder.es7-react-js-snippets
  • eamodio.gitlens
  • ecmel.vscode-html-css
  • eg2.vscode-npm-script
  • esbenp.prettier-vscode
  • formulahendry.auto-close-tag
  • formulahendry.auto-rename-tag
  • hedinne.popping-and-locking-vscode
  • idleberg.hopscotch
  • ionutvmi.path-autocomplete
  • jalisimo.react-jest-vscode-snippets
  • jingkaizhao.vscode-redux-devtools
  • joelday.docthis
  • jonkwheeler.styled-components-snippets
  • jpoissonnier.vscode-styled-components
  • kisstkondoros.vscode-codemetrics
  • kumar-harsh.graphql-for-vscode
  • leizongmin.node-module-intellisense
  • mgmcdermott.vscode-language-babel
  • mikestead.dotenv
  • miramac.vscode-exec-node
  • mrmlnc.vscode-lebab
  • msjsdiag.debugger-for-chrome
  • naumovs.color-highlight
  • pflannery.vscode-versionlens
  • spywhere.guides
  • stpn.vscode-graphql
  • stubailo.ignore-gitignore
  • teabyii.ayu
  • waderyan.babelrc
  • wangtao0101.vscode-js-import
  • wayou.vscode-todo-highlight
  • wix.extractor
  • wix.vscode-import-cost
  • xabikos.ReactSnippets
  • yzhang.markdown-all-in-one

Install all with one terminal command

# Regular VSCode
$ code --install-extension CoenraadS.bracket-pair-colorizer DavidAnson.vscode-markdownlint DeepScan.vscode-deepscan Dennitz.vscode-generact EditorConfig.EditorConfig GregorBiswanger.package-watcher PeterJausovec.vscode-docker TomiTurtiainen.js-complexity-analysis WallabyJs.quokka-vscode Zignd.html-css-class-completion aaron-bond.better-comments akamud.vscode-caniuse alefragnani.Bookmarks andys8.jest-snippets anthony-y.package-to-readme christian-kohler.npm-intellisense christian-kohler.path-intellisense clinyong.vscode-css-modules cmstead.jsrefactor codezombiech.gitignore cssho.vscode-svgviewer cvarisco.vs-component-app dakara.transformer dbaeumer.vscode-eslint dsznajder.es7-react-js-snippets eamodio.gitlens ecmel.vscode-html-css eg2.vscode-npm-script esbenp.prettier-vscode formulahendry.auto-close-tag formulahendry.auto-rename-tag hedinne.popping-and-locking-vscode idleberg.hopscotch ionutvmi.path-autocomplete jalisimo.react-jest-vscode-snippets jingkaizhao.vscode-redux-devtools joelday.docthis jonkwheeler.styled-components-snippets jpoissonnier.vscode-styled-components kisstkondoros.vscode-codemetrics kumar-harsh.graphql-for-vscode leizongmin.node-module-intellisense mgmcdermott.vscode-language-babel mikestead.dotenv miramac.vscode-exec-node mrmlnc.vscode-lebab msjsdiag.debugger-for-chrome naumovs.color-highlight pflannery.vscode-versionlens spywhere.guides stpn.vscode-graphql stubailo.ignore-gitignore teabyii.ayu waderyan.babelrc wangtao0101.vscode-js-import wayou.vscode-todo-highlight wix.extractor wix.vscode-import-cost xabikos.ReactSnippets yzhang.markdown-all-in-one

# If you use nightly builds 
$ code-insiders --install-extension CoenraadS.bracket-pair-colorizer DavidAnson.vscode-markdownlint DeepScan.vscode-deepscan Dennitz.vscode-generact EditorConfig.EditorConfig GregorBiswanger.package-watcher PeterJausovec.vscode-docker TomiTurtiainen.js-complexity-analysis WallabyJs.quokka-vscode Zignd.html-css-class-completion aaron-bond.better-comments akamud.vscode-caniuse alefragnani.Bookmarks andys8.jest-snippets anthony-y.package-to-readme christian-kohler.npm-intellisense christian-kohler.path-intellisense clinyong.vscode-css-modules cmstead.jsrefactor codezombiech.gitignore cssho.vscode-svgviewer cvarisco.vs-component-app dakara.transformer dbaeumer.vscode-eslint dsznajder.es7-react-js-snippets eamodio.gitlens ecmel.vscode-html-css eg2.vscode-npm-script esbenp.prettier-vscode formulahendry.auto-close-tag formulahendry.auto-rename-tag hedinne.popping-and-locking-vscode idleberg.hopscotch ionutvmi.path-autocomplete jalisimo.react-jest-vscode-snippets jingkaizhao.vscode-redux-devtools joelday.docthis jonkwheeler.styled-components-snippets jpoissonnier.vscode-styled-components kisstkondoros.vscode-codemetrics kumar-harsh.graphql-for-vscode leizongmin.node-module-intellisense mgmcdermott.vscode-language-babel mikestead.dotenv miramac.vscode-exec-node mrmlnc.vscode-lebab msjsdiag.debugger-for-chrome naumovs.color-highlight pflannery.vscode-versionlens spywhere.guides stpn.vscode-graphql stubailo.ignore-gitignore teabyii.ayu waderyan.babelrc wangtao0101.vscode-js-import wayou.vscode-todo-highlight wix.extractor wix.vscode-import-cost xabikos.ReactSnippets yzhang.markdown-all-in-one

Settings

{
    "editor.renderIndentGuides": false,
    "prettier.semi": false,
    "prettier.trailingComma": "es5",
    "prettier.eslintIntegration": false,
    "prettier.parser": "flow",
    "prettier.singleQuote": true,
    "window.zoomLevel": 0,
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 30000,
    "editor.fontFamily": "Consolas, Fira Mono, Monaco, monospace",
    "editor.renderWhitespace": "boundary",
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/dist": true,
        "**/flow-typed": true,
        "**/build": true,
        "**/vendor": true,
        "**/.vscode": true,
        "**/node_modules": true,
        "**/.DS_Store": true
    },
    "editor.find.autoFindInSelection": true,
    "editor.formatOnType": true,
    "editor.letterSpacing": 0.25,
    "emmet.preferences": {
        "javascript": "javascriptreact"
    },
    "importCost.mediumPackageColor": "#fcc000",
    "html.format.wrapLineLength": 80,
    "eslint.alwaysShowStatus": true,
    "eslint.workingDirectories": [
        "frack",
        "src"
    ],
    "workbench.colorTheme": "Popping and Locking",
    "workbench.iconTheme": "ayu",
    "node-module-intellisense.modulePaths": [
        "${workspaceRoot}/src/"
    ],
    "javascript.format.enable": false,
    "javascript.validate.enable": false,
    "typescript.validate.enable": false,
    "graphql.useLanguageServer": true,
    "javascript.implicitProjectConfig.checkJs": true,
    "eslint.packageManager": "yarn",
    "npm-intellisense.showBuildInLibs": true,
    "npm-intellisense.importLinebreak": "\r\n",
    "js-import.semicolon": false,
    "js-import.alias": {
        "@constants": "src/constants",
        "@components": "src/components",
        "@features": "src/features",
        "@styles": "src/styles",
        "@views": "src/views",
        "@utils": "src/utils",
        "@types": "src/types",
        "@lib": "src/lib",
        "@frack": "frack"
    },
    "deepscan.enable": true,
    "eslint.autoFixOnSave": true,
    "eslint.provideLintTask": true,
    "guides.active.style": 2
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment