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)

.prettierrc

{
  "tabWidth": 2,
  "printWidth": 80,
  "semi": true,
  "singleQuote": true,
  "bracketSpacing": true
}

**If needed to always use brackets for function with single argument (x) **

"arrowParens": "always",

.prettierignore

node_modules
*.test.js
*.spec.js