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)

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

    "typescript.preferences.importModuleSpecifier": "non-relative",
    "javascript.preferences.importModuleSpecifier": "non-relative",
    "[html]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[prisma]": {
        "editor.defaultFormatter": "Prisma.prisma"
    },
    "[go]": {
        "editor.insertSpaces": true,
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "golang.go"
    },
    "editor.stickyScroll.enabled": false,
    "rust-analyzer.check.command": "clippy",
    "prisma.showPrismaDataPlatformNotification": false,
    "docker.extension.enableComposeLanguageServer": false,
}

ProxySettings if needed

{
    "http.proxySupport": "on",
    "http.proxy": "http://proxy.my-proxy-host.ru:3128",
    "http.proxyStrictSSL": false,
    "http.noProxy": [
        "*.my-proxy-host.ru",
        "10.*"
    ],
    "http.proxyAuthorization": "Negotiate"
}

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