NodeJS Dev Pack
Version: 1.5.0
Publisher: AndrewSai
📜 License
The source code for this extension is licensed under the MIT license.
🔍 Overview
NodeJS Dev Pack is a comprehensive toolkit designed to enhance the Node.js development experience within Visual Studio Code. This extension pack includes essential extensions and custom configurations tailored for Node.js developers, helping streamline workflows, improve code quality, and enforce consistent standards.
🌟 Key Features
📝 Enhanced Code Commenting:
- [x] Better Comments helps format and categorize comments efficiently.
💬 Commit Message Assistance:
- [x] Commit Message Editor aids in structuring commit messages, adhering to the best practices for Git history clarity.
📂 Project and Dependency Management:
- [x] Project Manager organizes project workspaces, while NPM Intellisense simplifies Node package imports.
⚙️ Linting and Formatting:
- [x] ESLint and Prettier provide real-time linting and formatting to ensure code quality and style consistency.
📄 Markdown and Documentation Support:
- [x] Markdownlint and Markdown All in One enforce standards and assist in Markdown documentation writing.
🔀 Git Workflow Enhancements:
- [x] GitLens and Git Graph offer an improved Git experience, with visual Git history, blame annotations, and more.
🎨 Theming and Iconography:
- [x] The Andromeda Colorizer theme and Helium Icon Theme provide a sleek visual appearance, enhancing the readability of code and directories.
🛠️ Utilities:
- [x] Includes a set of extensions like Backticks for template strings, Code Spell Checker, Sort Lines, Error Lens, and Pretty TypeScript Errors for a streamlined development environment.
🔌 Extensions Included
📝 Better Comments (aaron-bond.better-comments)
Helps create more readable and organized comments by categorizing them with different colors, allowing for better collaboration and code clarity.
💬 Commit Message Editor (adam-bender.commit-message-editor)
Simplifies commit message writing by providing a structured format, making it easier to create descriptive and consistent commit logs that adhere to best practices.
📂 Project Manager (alefragnani.project-manager)
Organizes multiple projects within VSCode by providing quick access to frequently used folders, enhancing project navigation and management.
📦 NPM Intellisense (christian-kohler.npm-intellisense)
Offers autocompletion for Node modules, speeding up imports and reducing errors when working with dependencies in JavaScript or TypeScript files.
📄 Markdownlint (DavidAnson.vscode-markdownlint)
Lints Markdown files, ensuring consistent formatting and adherence to standards, which helps maintain clean documentation.
⚙️ ESLint (dbaeumer.vscode-eslint)
Enforces coding standards by providing real-time JavaScript and TypeScript linting, helping to catch errors early and maintain code quality.
🔒 Dotenv (dotenv.dotenv-vscode)
Provides support for .env files by enabling syntax highlighting and autocompletion, which simplifies the management of environment variables.
🔍 GitLens (eamodio.gitlens)
Enhances Git functionality in VSCode by offering blame annotations, history exploration, code reviews, and more, making it easier to track changes.
🎨 Andromeda (EliverLara.andromeda)
A visually pleasing color theme with high contrast, designed to reduce eye strain during long coding sessions and improve focus.
✨ Prettier (esbenp.prettier-vscode)
Automatically formats code according to a predefined style, promoting consistency and readability across codebases.
` Backticks (fractalbrew.backticks)
Converts double or single quotes into backticks, making it convenient to use template strings in JavaScript and TypeScript.
📝 Todo Tree (Gruntfuggly.todo-tree)
Tracks TODO, FIXME, and other comment tags across files, enabling you to manage tasks and to-do items within your project effectively.
📁 Helium Icon Theme (helgardrichard.helium-icon-theme)
Provides a set of stylish icons for files and folders, improving project structure visibility and organization at a glance.
📊 Git Graph (mhutchie.git-graph)
A graphical representation of Git commits and branches, making it easy to visualize repository history and perform common Git actions.
📏 Filesize (mkxml.vscode-filesize)
Displays the size of the currently open file in the status bar, helping you keep track of file sizes, especially useful in projects where size constraints matter.
🔠 Select Part of Word (mlewand.select-part-of-word)
Enhances word selection by allowing partial selection of camelCase, snake_case, and other compound words, making editing more precise.
🐋 Docker (ms-azuretools.vscode-docker)
Provides comprehensive Docker support, including container management, Dockerfile authoring, and integration with Docker Compose.
🔥 JavaScript Profiling (Flame) (ms-vscode.vscode-js-profile-flame)
Profiles JavaScript performance with flame graphs, helping you identify performance bottlenecks in Node.js applications.
🦠 Gremlins (nhoizey.gremlins)
Detects and highlights "gremlins" or invisible characters in code that can cause hard-to-find errors, such as non-breaking spaces and zero-width spaces.
📸 Polacode (pnp.polacode)
Creates beautiful screenshots of code snippets for documentation or sharing, with customizable settings for enhanced presentation.
🔍 Code Spell Checker (streetsidesoftware.code-spell-checker)
Checks spelling in code comments, strings, and documentation to prevent typos, with support for multiple programming languages.
🔄 Sort Lines (Tyriar.sort-lines)
Provides a quick way to sort lines alphabetically or by other criteria, useful for organizing lists or data within code.
🚨 Error Lens (usernamehw.errorlens)
Highlights errors and warnings directly in the editor, making it easier to identify issues without needing to look at the Problems panel.
💡 Pretty TypeScript Errors (YoavBls.pretty-ts-errors)
Improves TypeScript error messages, making them more readable and helpful for debugging.
📘 Markdown All in One (yzhang.markdown-all-in-one)
A comprehensive Markdown support extension that provides preview, formatting, shortcuts, and enhanced syntax for a seamless documentation experience.
🛠️ Configuration Customizations
This pack includes custom configurations that align with Node.js development needs. Here are some highlights:
🖊️ Editor Settings:
- [x] Enable bracket pair colorization for readability.
- [x] Disable minimap and word-based suggestions to reduce visual clutter.
- [x] Enable whitespace and control character rendering.
- [x] Set word wrapping to always wrap long lines for easier readability.
🔀 Git Settings:
- [x] Enable auto-fetch and disable sync confirmations to streamline Git operations.
📁 File Associations:
- [x] Custom file and folder icons with Helium Icon Theme, along with specific associations for
.ejs, .env, .eta, and Node.js-specific files.
🎨 Icon Customizations:
- [x] Adjusted icon saturation to 0.9 for optimal visibility, and the "Nest" icon pack for consistency.
⚠️ Disclaimer on Configuration Preferences
This extension pack provides a set of recommended configurations tailored to optimize the Node.js development experience within Visual Studio Code. These preferences are added to improve readability, streamline workflows, and maintain consistency.
Please Note:
- These configurations are not enforced automatically and may need to be manually applied in your
settings.json.
- Feel free to adjust these settings to better suit your personal workflow or project requirements.
To apply the recommended settings, copy the following configuration block into your settings.json:
{
"commit-message-editor.dynamicTemplate": [
"{type} {scope} {description} {breaking_change}{wip}",
"",
"{body}",
"",
"{footer}"
],
"commit-message-editor.tokens": [
{
"label": "Type",
"name": "type",
"type": "enum",
"options": [
{
"label": "---",
"value": ""
},
{
"label": "accessability",
"description": "Improve accessibility",
"value": "♿️"
},
{
"label": "analytics",
"description": "Add or update analytics or track code",
"value": "📈"
},
{
"label": "assets",
"description": "Add or update assets",
"value": "🍱"
},
{
"label": "build",
"description": "Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)",
"value": "🏗️"
},
{
"label": "ci",
"description": "Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)",
"value": "👷"
},
{
"label": "config",
"description": "Add or update configuration files",
"value": "🔧"
},
{
"label": "db",
"description": "Perform database related changes",
"value": "🗃️"
},
{
"label": "dependencies",
"description": "Add or update compiled files or packages",
"value": "📦️"
},
{
"label": "deployment",
"description": "Deploy stuff",
"value": "🚀"
},
{
"label": "docs",
"description": "Documentation only changes",
"value": "📝"
},
{
"label": "dx",
"description": "Improve developer experience",
"value": "🧑💻"
},
{
"label": "feat",
"description": "A new feature",
"value": "✨"
},
{
"label": "feat-flag",
"description": "Add, update, or remove feature flags",
"value": "🚩"
},
{
"label": "fix",
"description": "Simple fix for a non-critical issue",
"value": "🩹"
},
{
"label": "format",
"description": "Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)",
"value": "🎨"
},
{
"label": "hotfix",
"description": "Critical issue hotfix",
"value": "🚑️"
},
{
"label": "i18n",
"description": "Internationalization and localization",
"value": "🌐"
},
{
"label": "lint",
"description": "Fix compiler / linter warnings.",
"value": "🚨"
},
{
"label": "merge",
"description": "Merge branches",
"value": "🔀"
},
{
"label": "perf",
"description": "A code change that improves performance",
"value": "⚡️"
},
{
"label": "refactor",
"description": "A code change that neither fixes a bug nor adds a feature",
"value": "♻️"
},
{
"label": "revert",
"description": "Revert changes",
"value": "⏪️"
},
{
"label": "script",
"description": "Add or update development scripts",
"value": "🔨"
},
{
"label": "secrets",
"description": "Add or update secrets",
"value": "🔐"
},
{
"label": "security",
"description": "Fix security issues",
"value": "🔒️"
},
{
"label": "seo",
"description": "Improve SEO",
"value": "🔍️"
},
{
"label": "style",
"description": "Add or update the UI and style files.",
"value": "💄"
},
{
"label": "test",
"description": "Adding missing tests or correcting existing tests",
"value": "🧪"
},
{
"label": "types",
"description": "Add or update types.",
"value": "🏷️"
},
{
"label": "typo",
"description": "Fix typos",
"value": "✏️"
},
{
"label": "validation",
"description": "Add or update code related to validation",
"value": "🦺"
}
]
},
{
"label": "Scope",
"name": "scope",
"description": "A scope may be provided to a commit's type, to provide additional contextual information and is contained within parenthesis, e.g., \"✨(parser): add ability to parse arrays\".",
"type": "text",
"multiline": false,
"prefix": "(",
"suffix": "):"
},
{
"label": "Short description",
"name": "description",
"description": "Short description in the subject line.",
"type": "text",
"multiline": false
},
{
"label": "Body",
"name": "body",
"description": "Optional body",
"type": "text",
"multiline": true,
"lines": 5,
"maxLines": 10
},
{
"label": "Breaking change",
"name": "breaking_change",
"type": "boolean",
"value": "💥",
"prefix": "| ",
"suffix": " ",
"default": false
},
{
"label": "Work in progress",
"name": "wip",
"type": "boolean",
"value": "🚧",
"prefix": "| ",
"default": false
},
{
"label": "Footer",
"name": "footer",
"description": "Optional footer",
"type": "text",
"multiline": true
}
],
"debug.toolBarLocation": "docked",
"dotenv.enableAutocloaking": false,
"editor.bracketPairColorization.enabled": true,
"editor.fontLigatures": true,
"editor.guides.bracketPairs": "active",
"editor.minimap.enabled": false,
"editor.renderControlCharacters": true,
"editor.renderWhitespace": "all",
"editor.rulers": [
{
"column": 100,
"color": "#FFFFaa"
}
],
"editor.stickyScroll.enabled": true,
"editor.unicodeHighlight.ambiguousCharacters": false,
"editor.wordBasedSuggestions": "off",
"editor.wordWrap": "on",
"explorer.fileNesting.enabled": true,
"files.associations": {
"*.ejs": "html",
"*.eta": "html",
"*.css": "postcss",
"*.env.?*": "dotenv",
"*.env": "dotenv"
},
"git.autofetch": true,
"git.confirmSync": false,
"git.suggestSmartCommit": false,
"helium-icon-theme.activeIconPack": "nest",
"helium-icon-theme.files.associations": {
"*.eta": "ejs",
"*.schema.js": "Raml",
"*.schema.ejs": "xaml",
"*.repo.js": "database",
"*.assets.js": "aurelia",
"*.router.js": "routing",
"*.dto.js": "purescript",
"*.config.js": "settings",
"*.model.js": "sequelize",
"**.webpack.js": "webpack",
"*.scheme.js": "purescript",
"*.provider.js": "database",
"*.repository.js": "database",
"*.mapper.js": "Nest-gateway"
},
"helium-icon-theme.folders.associations": {
"DTO": "Ci",
"_dev": "mock",
".pm2": "hook",
"ejs": "stack",
"eta": "stack",
"build": "core",
"schema": "less",
"schemas": "less",
"router": "routes",
"local": "private",
"modules": "layout",
"amp": "serverless",
"backend": "server",
"common": "resource",
"repos": "database",
"queries": "template",
"adapters": "generator",
"providers": "database",
"sitemaps": "components",
"repository": "database"
},
"helium-icon-theme.saturation": 0.9,
"javascript.inlayHints.functionLikeReturnTypes.enabled": true,
"javascript.inlayHints.parameterNames.enabled": "literals",
"javascript.inlayHints.parameterTypes.enabled": true,
"js/ts.implicitProjectConfig.checkJs": true,
"js/ts.implicitProjectConfig.strictNullChecks": false,
"search.useGlobalIgnoreFiles": true,
"search.useIgnoreFiles": true,
"telemetry.telemetryLevel": "off",
"workbench.colorTheme": "Andromeda Colorizer",
"workbench.iconTheme": "helium-icon-theme"
}
Custom Keybindings
To make workflow more efficient, the following keybindings are included:
- [x]
Ctrl+W for deleteWordLeft, replacing Ctrl+Backspace.
- [x]
Ctrl+Shift+W for deleteWordRight, replacing Ctrl+Delete.
- [x]
Shift+Delete to editor.action.deleteLines when text input is focused.
- [x]
Ctrl+Shift+U to transform selected text to uppercase.
- [x]
Ctrl+Shift+L to transform selected text to lowercase.
- [x]
Ctrl+D for editor.action.copyLinesDownAction, disabling default multi-cursor behavior.
Snippets
Pre-configured JavaScript snippets include:
- [x] Logging Helpers: Quick commands to log information to the console (
trlg, trlgesc).
- [x] Destructuring and Imports: Snippets for Node.js imports (
rqr, rqrd) and destructuring assignments.
- [x] Loops and Functions: For-of key-value pairs iteration, self-executing async functions, and more.
P.S.
This extension pack equips Node.js developers with tools for code quality, project management, Git integration, and visual enhancements, creating a robust environment for efficient and organized development in Visual Studio Code.
Enjoy!
| |
