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
• Visual Studio IntelliCode
• Inline Parameters for VSCode
• Color Highlight (Sergii Naumov)
• Highlight Matching Tag

Snippets:

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

Visual Studio Themes:

• Monokai Pro (Will ask money!)

Visual Studio:

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

Tailwind

• Tailwind CSS IntelliSense
• Headwind (Ryan Heybourn)

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