Skip to content

Instantly share code, notes, and snippets.

@mustafaslk

mustafaslk/settings.json

Created December 9, 2024 09:44
Show Gist options
  • Save mustafaslk/f08f95b4b07ca2f8814d3976812b4c74 to your computer and use it in GitHub Desktop.
Save mustafaslk/f08f95b4b07ca2f8814d3976812b4c74 to your computer and use it in GitHub Desktop.
Download ZIP
Optimized VSCode settings for web development with comprehensive configurations for PHP (WordPress standards), JavaScript/TypeScript, HTML/CSS. Includes code formatting, linting, Git integration, and enhanced editor features for improved productivity.
Raw
settings.json
{
"editor.guides.bracketPairs": "active",
"editor.bracketPairColorization.enabled": true,
"editor.suggestSelection": "first",
"editor.wordWrap": "on",
"editor.linkedEditing": true,
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
"comment"
],
"settings": {
"fontStyle": "italic"
}
}
]
},
"editor.quickSuggestions": {
"strings": "on"
},
"editor.accessibilitySupport": "off",
"editor.inlineSuggest.enabled": true,
"editor.inlayHints.enabled": "onUnlessPressed",
"editor.codeLens": true,
"editor.formatOnPaste": true,
"editor.showFoldingControls": "always",
"editor.codeActionsOnSave": {
"source.organizeImports": "explicit"
},
"editor.stickyScroll.enabled": true,
"editor.formatOnType": true,
"editor.formatOnSave": true,
"editor.cursorBlinking": "phase",
"editor.cursorWidth": 3,
"editor.cursorSmoothCaretAnimation": "on",
"files.insertFinalNewline": true,
"files.trimFinalNewlines": true,
"files.trimTrailingWhitespace": true,
"files.associations": {
"*.css": "css"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2
},
"javascript.suggest.paths": false,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": true,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": true,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": true,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true,
"javascript.format.semicolons": "insert",
"javascript.inlayHints.propertyDeclarationTypes.enabled": true,
"javascript.inlayHints.enumMemberValues.enabled": true,
"javascript.referencesCodeLens.enabled": true,
"javascript.referencesCodeLens.showOnAllFunctions": true,
"typescript.suggest.paths": false,
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": true,
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": true,
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": true,
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true,
"typescript.format.semicolons": "insert",
"typescript.inlayHints.parameterNames.enabled": "all",
"typescript.inlayHints.variableTypes.enabled": true,
"typescript.inlayHints.propertyDeclarationTypes.enabled": true,
"typescript.inlayHints.parameterTypes.enabled": true,
"typescript.inlayHints.functionLikeReturnTypes.enabled": true,
"typescript.referencesCodeLens.enabled": true,
"typescript.implementationsCodeLens.enabled": true,
"[html]": {
"editor.tabSize": 2,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"html.format.indentInnerHtml": true,
"html.format.templating": true,
"[css]": {
"editor.tabSize": 2,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"css.format.spaceAroundSelectorSeparator": true,
"css.lint.compatibleVendorPrefixes": "warning",
"css.lint.zeroUnits": "warning",
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[php]": {
"editor.tabSize": 4,
"editor.defaultFormatter": "persoderlind.vscode-phpcbf"
},
"phpcs.enable": true,
"phpcs.executablePath": "/Users/mustafa/.composer/vendor/bin/phpcs",
"phpcs.standard": "WordPress",
"phpcs.showWarnings": true,
"phpcs.lintOnOpen": true,
"phpcs.lintOnType": true,
"phpcs.lintOnSave": true,
"phpcbf.enable": true,
"phpcbf.executablePath": "/Users/mustafa/.composer/vendor/bin/phpcbf",
"phpcbf.documentFormattingProvider": true,
"phpcbf.standard": "WordPress",
"phpcs.showSources": true,
"phpcbf.onsave": true,
"workbench.iconTheme": "vscode-icons",
"vsicons.dontShowNewVersionMessage": true,
"typescript.updateImportsOnFileMove.enabled": "always",
"gitlens.ai.model": "github:gpt-4o",
"gitlens.ai.generateCommitMessage.customInstructions": "Generate a concise git commit message that summarizes the key changes. Stay high-level and combine smaller changes to overarching topics. Skip describing any reformatting changes. commit messages should: - follow conventional commits - message format should be: <type>[scope]: <description> examples: - fix(authentication): add password regex pattern - feat(storage): add new test cases",
"git.autofetch": true,
"git.enableSmartCommit": true,
"git.confirmSync": false
}
@mustafaslk
Copy link
Author

VSCode Settings for Web Development

A carefully curated VSCode settings.json configuration optimized for web development, with special focus on PHP/WordPress, JavaScript/TypeScript, and frontend technologies.

Key Features

Editor Enhancements

  • Active bracket pair colorization and guides
  • Smooth cursor animations
  • Sticky scroll enabled
  • Inline suggestions and hints
  • Format on save, paste, and type
  • Custom cursor styling
  • Linked editing support

Language-Specific Configurations

PHP/WordPress

  • WordPress coding standards integration
  • PHPCS and PHPCBF configuration
  • 4-space tab indentation
  • Automatic linting and formatting

JavaScript/TypeScript

  • Prettier formatting
  • 2-space tab indentation
  • Enhanced IntelliSense features
  • Comprehensive inlay hints
  • Reference CodeLens enabled

HTML/CSS

  • 2-space tab indentation
  • Inner HTML indentation
  • CSS vendor prefix warnings
  • Format templating support

Git Integration

  • Smart commit enabled
  • Auto-fetch enabled
  • GitLens AI integration with GPT-4
  • Conventional commits support

Installation

  1. Copy this settings.json to your VSCode user settings
  2. Install required extensions:
    • Prettier
    • PHP_CodeSniffer
    • PHPCBF
    • VSCode Icons
    • GitLens

Required Extensions

  • esbenp.prettier-vscode
  • persoderlind.vscode-phpcbf
  • vscode-icons
  • gitlens

Prerequisites

  • PHP_CodeSniffer (phpcs and phpcbf) installed globally via Composer
  • Node.js/npm for JavaScript tooling
  • Git for version control features

Notes

  • PHP paths may need adjustment based on your system configuration
  • WordPress coding standards must be installed for PHP_CodeSniffer

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment