Javascript/Typescript Extension Pack

This extension pack is a collection of JavaScript and TypeScript tools for Visual Studio Code.

✨ Generate configuration

🎮 Command

Javascript/Typescript: Generate configuration for workspace

🚀 Usage

Open the command palette ctrl+shift+p / cmd+shift+p or F1
Search for Javascript/Typescript: Generate configuration for workspace
Run the command and select the options you want to use

How to use

⚙️ Configurations

Javascript

{
  "abracadabra.ignoredPatterns": ["build/*", "compile/*", "coverage/*", "dist/*", "out/*", "output/*"],
  "auto-close-tag.activationOnLanguage": [
    "csv",
    "handlebars",
    "html",
    "jade",
    "javascript",
    "javascriptreact",
    "json",
    "json5",
    "jsonc",
    "jsonl",
    "markdown",
    "plaintext",
    "pug",
    "sql",
    "svelte",
    "svg",
    "vue",
    "vue-html",
    "xml",
    "xsl"
  ],
  "auto-rename-tag.activationOnLanguage": [
    "csv",
    "handlebars",
    "html",
    "jade",
    "javascript",
    "javascriptreact",
    "json",
    "json5",
    "jsonc",
    "jsonl",
    "markdown",
    "plaintext",
    "pug",
    "sql",
    "svelte",
    "svg",
    "vue",
    "vue-html",
    "xml",
    "xsl"
  ],
  "autoBarrel.files.includeExtensionOnExport": ["js", "jsx"],
  "autoBarrel.formatting.useSingleQuotes": "<option you chose>", // true or false
  "autoBarrel.language.defaultLanguage": "JavaScript",
  "colorize.colorized_variables": ["CSS", "LESS", "SASS", "STYLUS"],
  "colorize.enable_search_variables": true,
  "colorize.hide_current_line_decorations": false,
  "colorize.languages": [
    "css",
    "csv",
    "handlebars",
    "html",
    "jade",
    "javascript",
    "javascriptreact",
    "json",
    "json5",
    "jsonc",
    "jsonl",
    "less",
    "markdown",
    "plaintext",
    "pug",
    "sass",
    "scss",
    "stylus",
    "svelte",
    "svg",
    "vue",
    "vue-html",
    "xml",
    "xsl",
    "yaml"
  ],
  "cSpell.ignoreRegExpList": ["/[\\u0E00-\\u0E7F]/g"],
  "cSpell.language": "en-US",
  "cSpell.words": ["brotli", "filesize", "intellicode", "rcptumthta", "rgba", "vsintellicode"],
  "dotenv.cloakIcon": "*",
  "filesize.showBrotli": true,
  "filesize.showGzipInStatusBar": true,
  "intellicodeApiExamples.loggingLevel": "ALL",
  "intellicodeApiExamples.python.enabled": false,
  "javascript.inlayHints.enumMemberValues.enabled": true,
  "javascript.inlayHints.functionLikeReturnTypes.enabled": true,
  "javascript.inlayHints.parameterNames.enabled": "all",
  "javascript.inlayHints.parameterTypes.enabled": true,
  "javascript.inlayHints.propertyDeclarationTypes.enabled": true,
  "javascript.inlayHints.variableTypes.enabled": true,
  "search.exclude": {
    "build": true,
    "compile": true,
    "coverage": true,
    "dist": true,
    "node_modules": true,
    "out": true,
    "output": true
  },
  "template-string-converter.autoRemoveTemplateString": true,
  "template-string-converter.quoteType": "<option you chose>", // "single" or "double"
  "template-string-converter.validLanguages": ["javascript", "javascriptreact", "svelte", "vue"],
  "turboConsoleLog.addSemicolonInTheEnd": true,
  "turboConsoleLog.insertEmptyLineAfterLogMessage": true,
  "turboConsoleLog.quote": "<option you chose>", // "'" or "\""
  "vsintellicode.java.completionsEnabled": false,
  "vsintellicode.python.completionsEnabled": false
}

Typescript

{
  "abracadabra.ignoredPatterns": ["build/*", "compile/*", "coverage/*", "dist/*", "out/*", "output/*"],
  "auto-close-tag.activationOnLanguage": [
    "csv",
    "handlebars",
    "html",
    "jade",
    "javascript",
    "javascriptreact",
    "json",
    "json5",
    "jsonc",
    "jsonl",
    "markdown",
    "plaintext",
    "pug",
    "sql",
    "svelte",
    "svg",
    "typescript",
    "typescriptreact",
    "vue",
    "vue-html",
    "xml",
    "xsl"
  ],
  "auto-rename-tag.activationOnLanguage": [
    "csv",
    "handlebars",
    "html",
    "jade",
    "javascript",
    "javascriptreact",
    "json",
    "json5",
    "jsonc",
    "jsonl",
    "markdown",
    "plaintext",
    "pug",
    "sql",
    "svelte",
    "svg",
    "typescript",
    "typescriptreact",
    "vue",
    "vue-html",
    "xml",
    "xsl"
  ],
  "autoBarrel.files.includeExtensionOnExport": ["ts", "tsx"],
  "autoBarrel.formatting.useSingleQuotes": "<option you chose>", // true or false
  "autoBarrel.language.defaultLanguage": "TypeScript",
  "colorize.colorized_variables": ["CSS", "LESS", "SASS", "STYLUS"],
  "colorize.enable_search_variables": true,
  "colorize.hide_current_line_decorations": false,
  "colorize.languages": [
    "css",
    "csv",
    "handlebars",
    "html",
    "jade",
    "javascript",
    "javascriptreact",
    "json",
    "json5",
    "jsonc",
    "jsonl",
    "less",
    "markdown",
    "plaintext",
    "pug",
    "sass",
    "scss",
    "stylus",
    "svelte",
    "svg",
    "typescript",
    "typescriptreact",
    "vue",
    "vue-html",
    "xml",
    "xsl",
    "yaml"
  ],
  "cSpell.ignoreRegExpList": ["/[\\u0E00-\\u0E7F]/g"],
  "cSpell.language": "en-US",
  "cSpell.words": ["brotli", "filesize", "intellicode", "rcptumthta", "rgba", "vsintellicode"],
  "dotenv.cloakIcon": "*",
  "filesize.showBrotli": true,
  "filesize.showGzipInStatusBar": true,
  "intellicodeApiExamples.loggingLevel": "ALL",
  "intellicodeApiExamples.python.enabled": false,
  "javascript.inlayHints.enumMemberValues.enabled": true,
  "javascript.inlayHints.functionLikeReturnTypes.enabled": true,
  "javascript.inlayHints.parameterNames.enabled": "all",
  "javascript.inlayHints.parameterTypes.enabled": true,
  "javascript.inlayHints.propertyDeclarationTypes.enabled": true,
  "javascript.inlayHints.variableTypes.enabled": true,
  "search.exclude": {
    "build": true,
    "compile": true,
    "coverage": true,
    "dist": true,
    "node_modules": true,
    "out": true,
    "output": true
  },
  "template-string-converter.autoRemoveTemplateString": true,
  "template-string-converter.quoteType": "<option you chose>", // "single" or "double"
  "template-string-converter.validLanguages": [
    "javascript",
    "javascriptreact",
    "svelte",
    "typescript",
    "typescriptreact",
    "vue"
  ],
  "turboConsoleLog.addSemicolonInTheEnd": true,
  "turboConsoleLog.insertEmptyLineAfterLogMessage": true,
  "turboConsoleLog.quote": "<option you chose>", // "'" or "\""
  "typescript.inlayHints.enumMemberValues.enabled": true,
  "typescript.inlayHints.functionLikeReturnTypes.enabled": true,
  "typescript.inlayHints.parameterNames.enabled": "all",
  "typescript.inlayHints.parameterTypes.enabled": true,
  "typescript.inlayHints.propertyDeclarationTypes.enabled": true,
  "typescript.inlayHints.variableTypes.enabled": true,
  "typescript.tsdk": "node_modules\\typescript\\lib",
  "vsintellicode.java.completionsEnabled": false,
  "vsintellicode.python.completionsEnabled": false
}

📦 Extensions Included

🤖 Artificial Intelligence

Extension Name	Description
IntelliCode	AI assisted developer productivity

🔡 Grammar

Extension Name	Description
Pretty TypeScript Errors	Make TypeScript errors prettier and more human-readable in VSCode

Productivity

Extension Name	Description
Abracadabra, refactor this!	Automated refactorings for VS Code, in JavaScript and TypeScript

🔗 Code Snippets

Extension Name	Description
JavaScript (ES6) code snippets	Code snippets for JavaScript in ES6 syntax

🔬 Code Generator

Extension Name	Description
TypeScript constructor generator	Auto generate constructor for TypeScript object in VS code
TypeScript GetSet	TypeScript getter / setter generator based on AST
TS Env Typings	Automatically generate typings for process.env from your env file on save
Auto Barrel for VSCode	Automatically generate index files for your project
Turbo Console Log	Automating the process of writing meaningful log messages

📝 Template Productivity

Extension Name	Description
Auto Complete Tag	Extension Packs to add close tag and rename paired tag automatically
Template String Converter	Converts a string to a template string

✅ Code Analysis

Extension Name	Description
ESLint	Integrates ESLint into VS Code
markdownlint	Markdown linting and style checking for Visual Studio Code

💻 Workbench

Extension Name	Description
Dotenv Official +Vault	Official Dotenv. Syntax highlighting, auto-cloaking, auto-completion, in-code secret peeking, and optionally dotenv-vault
grepc: Regex Highlighting	An approachable regular expression highlighter with advanced customization for VS Code
filesize	Show the current file size in the status bar
Image preview	Shows image preview in the gutter and on hover
JSON Crack	Seamlessly visualize your JSON data instantly into graphs
colorize	A vscode extension to help visualize css colors in files
Highlight Matching Tag	Highlights matching closing and opening tags
EditorConfig for VS Code	EditorConfig Support for Visual Studio Code
Code Spell Checker	This extension provides a basic spell checker that works well with code and documents

📄 Credits

All credits goes to original authors of the above mentioned extensions.

Happy Coding!

Javascript/Typescript Extension Pack

Ratchapol Thongta

Javascript/Typescript Extension Pack

✨ Generate configuration

🎮 Command

🚀 Usage

⚙️ Configurations

📦 Extensions Included

🤖 Artificial Intelligence

🔡 Grammar

Productivity

🔗 Code Snippets

🔬 Code Generator

📝 Template Productivity

✅ Code Analysis

💻 Workbench

📄 Credits