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)
• stylelint (vscode-stylelint)
• Prettier - Code formatter (ext install esbenp.prettier-vscode)
• GitLens
• Bracket Pair Colorizer
• Auto Rename Tag
• CSS Peek
• Code Spell Checker
• IntelliCode (Microsoft) (ext install VisualStudioExptTeam.vscodeintellicode)
• Inline Parameters for VSCode
• Color Highlight (Sergii Naumov)
• Highlight Matching Tag
• Trailing Spaces (Shardul Mahadik)

Snippets:

• ES7 React/Redux/GraphQL/React-Native snippets - dsznajder
• JavaScript (ES6) code snippets

Visual Studio Themes:

• Monokai Pro (Will ask money!)

Visual Studio:

CTRL + SHIFT + P

Preferences: Open User Settings (JSON)

{
    "explorer.compactFolders": false,
    "editor.fontSize": 22,
    "files.autoSave": "afterDelay",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.organizeImports": "explicit"
    },
    "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",
    "[prisma]": {
        "editor.defaultFormatter": "Prisma.prisma"
    },
    "[go]": {
        "editor.insertSpaces": true,
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "golang.go"
    },
    "editor.stickyScroll.enabled": false,
}

Also could be added:

"trailing-spaces.trimOnSave": true

TypeScript:

• JavaScript and TypeScript Nightly (microsoft)

Angular:

• Angular Language Service (From Angular Devs)

React:

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

Prisma

• Prisma (prisma.io)

Tailwind

• Tailwind CSS IntelliSense

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