UserSettings.json

{
    "editor.snippetSuggestions": "top",
    "editor.fontFamily": "Victor Mono",
    "workbench.iconTheme": "material-icon-theme",
    "workbench.colorTheme": "One Dark Pro",
    "editor.multiCursorModifier": "ctrlCmd",
    "files.autoSave": "onFocusChange",
    "editor.tabSize": 2,
    "editor.fontSize": 14,
    "editor.fontWeight": 500,
    "editor.formatOnPaste": false,
    "editor.minimap.enabled": false,
    "editor.fontLigatures": false,
    "editor.lineHeight": 0,
    "editor.wordWrap": "on",
    "terminal.integrated.fontSize": 15,
    "explorer.openEditors.visible": 0,
    "emmet.showAbbreviationSuggestions": false,
    "workbench.colorCustomizations": {},
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
    },
    "eslint.format.enable": true,
    "eslint.workingDirectories": [
        "./src"
    ],
    "workbench.startupEditor": "newUntitledFile",
    "liveServer.settings.donotShowInfoMsg": true,
    "editor.suggestSelection": "first",
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "todohighlight.isEnable": true,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "prettier.singleQuote": true,
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "settingsSync.ignoredExtensions": [],
    "terminal.integrated.fontFamily": "monospace",
    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "vscode.css-language-features"
    },
    "[markdown]": {
        "editor.defaultFormatter": "yzhang.markdown-all-in-one"
    },
    "editor.inlineSuggest.enabled": true,
    "github.copilot.enable": {
        "*": false,
        "yaml": false,
        "plaintext": false,
        "markdown": false,
        "javascript": true,
        "javascriptreact": true,
        "typescript": true,
        "typescriptreact": true,
        "json": true,
        "css": true,
    },
    "editor.autoClosingBrackets": "always",
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "diffEditor.ignoreTrimWhitespace": false,
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": true,
    "gitlens.gitCommands.skipConfirmations": [
        "fetch:command",
        "stash-push:command",
        "switch:command",
        "push:command"
    ],
    "files.exclude": {
        "**/.classpath": true,
        "**/.project": true,
        "**/.settings": true,
        "**/.factorypath": true
    },
    "editor.linkedEditing": true,
}

---

Extensions

• Auto Import
  • ID: steoates.autoimport
  • Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX
• Autoprefixer
  • ID: mrmlnc.vscode-autoprefixer
  • Parse CSS and add vendor prefixes automatically.
• Better Comments
  • ID: aaron-bond.better-comments
  • Improve your code commenting by annotating with alert, informational, TODOs, and more!
• Color Picker
  • ID: anseki.vscode-color
  • Helper with GUI to generate color codes such as CSS color notations.
• CSS Peek
  • ID: pranaygp.vscode-css-peek
  • Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto definition.
• DotENV
  • ID: mikestead.dotenv
  • Support for dotenv file syntax
• Error Lens
  • ID: usernamehw.errorlens
  • Improve highlighting of errors, warnings and other language diagnostics.
• ES7 React/Redux/GraphQL/React-Native snippets
  • ID: dsznajder.es7-react-js-snippets
  • Simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax.
• ESLint
  • ID: dbaeumer.vscode-eslint
  • Integrates ESLint into VS Code
• Git History
  • ID: donjayamanne.githistory
  • View git log, file history, compare branches or commits
• GitHub Copilot
  • GitHub.copilot
  • Your AI pair programmer
• GitHub Pull Requests and Issues
  • ID: GitHub.vscode-pull-request-github
  • https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github
• GitLens
  • ID: eamodio.gitlens
  • Supercharge Git within VS Code — Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more
• Import Cost
  • ID: wix.vscode-import-cost
  • Display import/require package size in the editor
• IntelliSense for CSS
  • ID: Zignd.html-css-class-completion
  • CSS class name completion for the HTML class attribute based on the definitions found in your workspace.
• JavaScript (ES6) code snippets
  • ID: xabikos.JavaScriptSnippets
  • Code snippets for JavaScript in ES6 syntax
• Live Server
  • ID: ritwickdey.LiveServer
  • Launch a development local Server with live reload feature for static & dynamic pages
• Live Share
  • ID: ms-vsliveshare.vsliveshare
  • Real-time collaborative development from the comfort of your favorite tools.
• Markdown All in One
  • ID: yzhang.markdown-all-in-one
  • All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more)
• Markdown Preview enhanced
  • ID: shd101wyy.markdown-preview-enhanced
  • Markdown Preview Enhanced ported to vscode
• markdownlint
  • ID: DavidAnson.vscode-markdownlint
  • Markdown linting and style checking for Visual Studio Code
• Material Icon Theme
  • ID: PKief.material-icon-theme
  • Material Design Icons for Visual Studio Code
• npm Intellisense
  • ID: christian-kohler.npm-intellisense
  • Visual Studio Code plugin that autocompletes npm modules in import statements
• One Dark Pro
  • ID: zhuangtongfa.material-theme
  • Atom's iconic One Dark theme for Visual Studio Code
• Path Intellisense
  • ID: christian-kohler.path-intellisense
  • Visual Studio Code plugin that autocompletes filenames
• Prettier
  • ID: esbenp.prettier-vscode
  • Code formatter using prettier.
• Quokka.js
  • ID: WallabyJs.quokka-vscode
  • Live Scratchpad for JavaScript.
• Thunder Client
  • ID: rangav.vscode-thunder-client
  • Lightweight Rest API Client for VS Code
• TODO Highlight
  • ID: wayou.vscode-todo-highlight
  • highlight TODOs, FIXMEs, and any keywords, annotations...

For fast instalation create a vscode-extensions.txt and paste all the following extensions in it.

steoates.autoimport
mrmlnc.vscode-autoprefixer
aaron-bond.better-comments
anseki.vscode-color
pranaygp.vscode-css-peek
mikestead.dotenv
usernamehw.errorlens
dsznajder.es7-react-js-snippets
dbaeumer.vscode-eslint
donjayamanne.githistory
GitHub.copilot
GitHub.vscode-pull-request-github
eamodio.gitlens
wix.vscode-import-cost
Zignd.html-css-class-completion
xabikos.JavaScriptSnippets
ritwickdey.LiveServer
ms-vsliveshare.vsliveshare
yzhang.markdown-all-in-one
shd101wyy.markdown-preview-enhanced
DavidAnson.vscode-markdownlint
PKief.material-icon-theme
christian-kohler.npm-intellisense
zhuangtongfa.material-theme
christian-kohler.path-intellisense
esbenp.prettier-vscode
WallabyJs.quokka-vscode
rangav.vscode-thunder-client
wayou.vscode-todo-highlight

and then run :

while read line; do code --install-extension "$line"; done < vscode-extensions.txt