IDE Theme & Font

- Font

• Fira Code　GitHub
• # monospaced　# multi-character combinations
• 
  
  

- Theme (As Extensions)

• One Dark Pro　GitHub
• # based on Atom's default One Dark theme

• 
  
  

• Material Icon Theme　GitHub

• #Material folder icons & file icons
• 
  
  

Extensions

- Common

• DotENV　GitHub
• #.env syntax highlighting

• 
  
  

• Better Comments　GitHub

• #comments highlighting

• 
  
  

• SFTP　GitHub

• #Syncs local directory & remote server directory
  
  

- HTML&XML

• Auto Close Tag　GitHub
• #Automatically add HTML/XML close tag
  
  
• XML Tools　GitHub
• #XML Formatting / Tree View　#XPath Evaluation　#XQuery Linting / Execution / Code Completion
  
  

- JavaScript

• ESLint　GitHub
  
  
• Pretter　GitHub
• #Opinionated code formatter
  
  
• Lodash　GitHub
• #Lodash snippets
  
  

- CSS

• CSS Peek　GitHub
  
  
• language-stulus　GitHub
  
  

- Vue

• Vetur　GitHub
  
  
• Vue 2 Snippets　GitHub
  
  

- Php

• php cs fixer　GitHub
  
  
• PHP Intelephense　GitHub
  
  
• Lumen Smart Command　GitHub

- Git

• GitLens　GitHub
  
  

Settings

# settings.json
{
    // * EDITOR

        // THEME
        "workbench.iconTheme": "material-icon-theme",
        "workbench.colorTheme": "One Dark Pro",

        // FONT
        "editor.fontFamily": "Fira Code",
        "editor.fontLigatures": true,
        "editor.fontSize": 11,

        // FORMATTER
        "editor.formatOnSave": true,
        // "editor.formatOnPaste": true,
        "editor.codeActionsOnSave": {
            "source.fixAll": true,
            "source.fixAll.eslint": false
        },

        // OTHER
        "editor.multiCursorModifier": "ctrlCmd",
        "editor.snippetSuggestions": "top",


    // * FRONT-END

        // ES LINT
        "eslint.debug": true,
        "eslint.format.enable": true,

        // VETUR
        "vetur.format.defaultFormatter.css": "none",
        "vetur.format.defaultFormatter.html": "none",
        "vetur.format.defaultFormatter.js": "none",
        "vetur.format.defaultFormatter.less": "none",
        "vetur.format.defaultFormatter.postcss": "none",
        "vetur.format.defaultFormatter.pug": "none",
        "vetur.format.defaultFormatter.sass": "none",
        "vetur.format.defaultFormatter.scss": "none",
        "vetur.format.defaultFormatter.stylus": "none",
        "vetur.format.defaultFormatter.ts": "none",
        "vetur.format.enable": false,

        // PRETTIER
        "prettier.enableDebugLogs": true,
        "prettier.endOfLine": "crlf",
        "prettier.singleQuote": true,
        "prettier.vueIndentScriptAndStyle": true,


    // * BACKEND

        // PHP-CS
        "php-cs-fixer.executablePath": "${extensionPath}/php-cs-fixer.phar",
        "php-cs-fixer.lastDownload": 1619589313518,
        "php-cs-fixer.onsave": true,
        "php-cs-fixer.autoFixBySemicolon": true,


    // * CONFIGURE BY FILE TYPE

        // PHP
        "[php]": {
            "editor.defaultFormatter": "junstyle.php-cs-fixer"
        },

        // VUE
        "[vue]": {
            "editor.defaultFormatter": "esbenp.prettier-vscode"
        },

        // HTML
        "[html]": {
            "editor.defaultFormatter": "esbenp.prettier-vscode"
        },

        // JAVASCRIPT
        "[javascript]": {
            "editor.defaultFormatter": "esbenp.prettier-vscode"
        },

        // TYPESCRIPT
        "[typescript]": {
            "editor.defaultFormatter": "esbenp.prettier-vscode"
        },

        // JSON
        "[json]": {
            "editor.defaultFormatter": "vscode.json-language-features"
        },

}