NextDev Pack - Theme, font and useful Extension

VSCode Icon/Theme/Font pack

Final Step

When the Font Directory appears, install fonts if you haven't already, and restart VSCODE once you have.

Note: this is because of OS limitations, the fonts must be installed manually.

Available Commands

• Activate NextDev Pack Config
• Deactivate NextDev Pack Config
• Reset NextDev Pack Config

Note: to run commands, press ctrl+shift+p to open the command palette, and then type each one and click on it.

Here are the configurations this plugin will use

{
  "editor.fontLigatures": true,
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "One Dark Pro",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.inlineSuggest.enabled": true,
  "editor.fontFamily": "'fira code'",
  "editor.fontLigatures": "true",
  "editor.fontWeight": "normal",
  "editor.fontSize": 12,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "always",
    "source.fixAll": "always"
  },
  "tailwindCSS.experimental.classRegex": [
    // obj with prefix cls, Styles const sizesCls ={ sm: 'text-sm'}
    [
      "Styles|Cls\\s*(?::\\s*[^=]+)?\\s*=\\s*([^;]*);",
      "['\"`]([^'\"`]*)['\"`]"
    ],
    // JavaScript string variable   const css = `bg-red-300 ${a}`; or const css = "bg-red-300"
    [
      "(?:\\b(?:const|let)\\s+)?[\\w$_]*(?:[Ss]tyles|[Cc]lasses|[Cc]lassnames|[Cc]ls|[Cc]lx|[Cc]lass|[Cc]ss)[\\w\\d]*\\s*(?:=|\\+=)\\s*['`\"]([^'\"]*)['`\"]"
    ],
    // fn
    ["(?:tw|cn)\\(([^)]*)\\)", "(?:'|\"|`)([^\"'`]*)(?:'|\"|`)"],
    // dom
    ["classList.(?:add|remove)\\(([^)]*)\\)", "(?:'|\"|`)([^\"'`]*)(?:'|\"|`)"],
    // data class
    ["data-.*-class=['\"]([^'\"]*)"]
  ]
}

Extensions Included

• 1- One Dark Pro - Atom's iconic One Dark theme for Visual Studio Code
• 2- Material Icon Theme - Material Design Icons for Visual Studio Code
• 3- FiraCode Font - Professional Font for Developers
• 4- Prettier - Code formatter
• 5- Sublime Text Keymap - Sublime Text keybindings
• 6- Tailwind CSS IntelliSense - Tailwind CSS IntelliSense
• 7- Material Theme - Material Design theme for Visual Studio Code
• 8- Material Product Icons - Product Icons for Visual Studio Code
• 9- Codeium AI - AI-powered code autocomplete
• 10- EditorConfig - EditorConfig Support
• 11- ESLint - Integrates ESLint into VS Code
• 12- Code Spell Checker - Spelling checker for your code
• 13- I18n Ally - Internationalization support
• 14- Shell Format - Format shell scripts
• 15- Path Intellisense - Autocomplete filenames
• 16- Genlen Supercharge Git within VS Code

One Click Install

Currently it's support only local install

Go to left side menu click on extention then click install from VSIX from HERE

Tips

• Tailwind CSS IntelliSense to make it working like this you need to config like my config VS Code settings

  

Todo

• Option Pack for backend and front-end
• Check list before install
• Publish to vscode store

Any Issue or feedback

Feedback or Issue

Template from tpack

• Github