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)