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

next-dev-team/npack