Visual Studio Code (Microsoft)

code.visualstudio.com

Add ESLint & Prettier to VS Code for a Create React App
https://www.youtube.com/watch?v=bfyI9yl3qfE


Visual Studio Code Settings:


Visual Studio Code Plugins:

  • ESLint (Dirk Baeumer)
  • Prettier - Code formatter (ext install esbenp.prettier-vscode)
  • GitLens
  • Bracket Pair Colorizer
  • Rest Client (Huachao Mao)


Visual Studio Themes:

  • Monokai Pro (Will ask money!)



Visual Studio Themes:

CTRL + P

Preferences: Open Settings (JSON)

{
    "explorer.compactFolders": false,
    "editor.fontSize": 22,
    "files.autoSave": "afterDelay",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.organizeImports": true
    },
    "prettier.requireConfig": true,
    "editor.tabSize": 2,
    "workbench.iconTheme": "Monokai Pro (Filter Spectrum) Icons",
    "workbench.colorTheme": "Monokai Pro (Filter Spectrum)",
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "typescript.preferences.importModuleSpecifier": "non-relative",
    "javascript.preferences.importModuleSpecifier": "non-relative"
}


React:

  • Reactjs code snippets (publisher:”charalampos karypidis” (My Favourite))

or

  • Simple React Snippets

or

  • ES7 React/Redux/GraphQL/React-Native snippets


Vue:

  • Vetur


GraphQL:

  • GraphQL for VSCode (Kumar)
  • Apollo GraphQL


Docker:

  • docker (MicroSoft)


Format on save document (same in the JSON config file)

VSCode –> Preverences –> Extensions –> install –> Prettier - Code formatter esbenp.prettier-vscode

VSCode –> File –> Preverences –> Settings:

  • Format on Save (checked)
  • Prettier Require Config –> require a prettier configuration file to foramt (checked)

Prettier