👾 Auto Close Tag
- Automatically add HTML/XML close tag
👾 Auto Rename Tag
- Auto rename paired HTML/XML tag
👾 Brackets Extension Pack
- 👾 Brackets Keymap: Popular keybindings for VS Code
- 👾 Live Server: Launch a development local Server with live reload feature for static & dynamic pages
- 👾 CSS Peek: Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto defination
- 👾 IntelliSense for CSS class names in HTML: CSS class name completion for the HTML class attribute based on the definitions found in your workspace ✔
👾 HTML CSS Support ❌
- CSS Intellisense for HTML
👾 HTML to CSS autocompletion ❌
- Provides completion suggetions for classes and ids from markup documents to stylesheets.
👾 innerHTML Syntax Highlighting ✔
- Syntax highlighting for HTML inside of JavaScript innerHTML template literals
👾 Tailwind CSS IntelliSense ✔
- Intelligent Tailwind CSS tool for VS Code
👾 Live Sass Compiler
- Compile Sass or Scss to CSS at realtime.
👾 Material Icon Theme ✔
- Material Design Icons for Visual Studio Code
👾 Prettier - Code Formatter ✔
- Code formatter using prettier
👾 TODO Highlight ✔
- highlight TODOs. FIXMEs, and any keywords, annotations
👾 Quokka.js ✔
- JavaScript and TypeScript playground in your editor
- Perfect for practicing mode
👾 React Extension Pack ✔✔✔ Popular VS Code extensions for React Development
- 👾 Reactjs Code Snippets: Adds code snippets for React development in ES6
- 👾 ESLint: Integrates ESLint JavaScript into VS Code.
- 👾 JavaScript (ES6) Code Snippets: Adds code snippets for JavaScript development in ES6 syntax.
- 👾 Search node_modules: Quickly search for node modules in your project.
- 👾 npm Intellisense: Visual Studio Code plugin that autocompletes npm modules in import statements
- 👾 Path Intellisense: Visual Studio Code plugin that autocompletes filenames
👾 Settings Sync ✔
- Synchronize Settings, Snippets, Theme, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist
👾 Tokyo Night ✔✔✔
- A clean Visual Studio Code theme that celebrates the lights of Downtown Tokyo at night.
👾 Code Spell Checker
- Spelling checker for source code
{
// Live Server Settings
"liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome",
"liveServer.settings.donotVerifyTags": true,
"explorer.confirmDelete": false,
"liveServer.settings.donotShowInfoMsg": true,
// Format Settings
"editor.defaultFormatter": "esbenp.prettier-vscode",
"files.autoSave": "afterDelay",
"prettier.embeddedLanguageFormatting": "off",
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
// JavaScript Format Settings
"[javascript]": {
// "editor.defaultFormatter": "esbenp.prettier-vscode",
// IntelliSense
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true,
"methods": true
}
},
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
"javascript.updateImportsOnFileMove.enabled": "always",
// Editor Settings
"editor.quickSuggestionsDelay": 10,
"editor.suggestOnTriggerCharacters": true,
"editor.parameterHints.enabled": true,
"editor.snippetSuggestions": "top",
"editor.wordWrap": "on",
"editor.formatOnSave": true,
"editor.fontSize": 15.5,
"editor.fontLigatures": true,
"editor.minimap.enabled": false,
"diffEditor.wordWrap": "on",
"diffEditor.maxComputationTime": 0,
// Terminal Settings
"terminal.integrated.enableMultiLinePasteWarning": false,
"terminal.integrated.cursorBlinking": true,
// My Custom Theme
"workbench.colorTheme": "Tokyo Night",
"workbench.iconTheme": "material-icon-theme",
"workbench.startupEditor": "none",
"workbench.colorCustomizations": {
"[Tokyo Night]": {
"editor.background": "#222233",
"descriptionForeground": "#F7F7F7",
// inner color theme
// "titleBar.activeBackground": "#ffffff",
// "activityBar.background": "#14b197", // < Sidebar
"titleBar.activeForeground": "#78E8C6",
"sideBar.foreground": "#00B3BD",
"sideBarTitle.foreground": "#00B3BD",
"activityBar.foreground": "#00B3BD", // < Sidebar
"statusBar.foreground": "#00B3BD",
"panelTitle.activeForeground": "#00B3BD",
"panelTitle.inactiveForeground": "#FFFFFFCC",
"tab.activeForeground": "#00B3BD",
"editorIndentGuide.background": "#072F2C",
"editorLineNumber.foreground": "#78E8C6",
// controls the color of the terminal
"terminal.foreground": "#ffD866",
"terminal.ansiBlack": "#171C2A",
"terminal.ansiRed": "#E35535",
"terminal.ansiGreen": "#52AB62",
"terminal.ansiYellow": "#ffD866",
"terminal.ansiBlue": "#00B3BD",
"terminal.ansiMagenta": "#E991E3",
"terminal.ansiCyan": "#78E8C6",
"terminal.ansiWhite": "#FFFFFFCC",
"terminal.ansiBrightBlack": "#00B3BD",
"terminal.ansiBrightRed": "#E35535",
"terminal.ansiBrightGreen": "#52AB62",
"terminal.ansiBrightYellow": "#ffd866",
"terminal.ansiBrightBlue": "#00B3BD",
"terminal.ansiBrightMagenta": "#E991E3",
"terminal.ansiBrightCyan": "#78E8C6",
"terminal.ansiBrightWhite": "#00B3BD",
"terminal.background": "#171C2A",
"terminalCursor.background": "#FFD866",
"terminalCursor.foreground": "#FFD866"
}
},
"editor.tokenColorCustomizations": {
"[Tokyo Night]": {
"comments": "#9AA5CE",
"strings": "#7DCFFF",
"textMateRules": [
{
"scope": "text.html.derivative",
"settings": {
"foreground": "#FFF"
}
},
{
"scope": "variable.other.readwrite",
"settings": {
"foreground": "#D7E9E3"
}
},
{
"scope": "meta.var.expr storage.type",
"settings": {
"foreground": "#E1EC04"
}
},
{
"scope": "comment.block.documentation",
"settings": {
"foreground": "#969696"
}
},
{
"scope": "variable.parameter",
"settings": {
"foreground": "#FCD600"
}
}
]
}
},
// Live Sass Compiler
// https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md
"liveSassCompile.settings.formats": [
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "/css"
},
],
"liveSassCompile.settings.excludeList": ["**/node_modules/**", ".vscode/**"],
"liveSassCompile.settings.autoprefix": [],
}