Customizing VScode editor 👀

As we have covered before, we can customize the behavior of VScode (with the extensions). We can go to the setting tab VScode by pressing ctrl +,. In the setting tab, we can select Workspace section and press the file icon as demonstrate in the image below:

or simply, create a file at the root of your project .vscode/settings.json. This we have already done in the previous section.

Now, paste the below code in the .vscode/settings.json file. You can also find the VScode setting code from this gist or in the attachment of the purchase.

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.detectIndentation": true,
    "editor.fontFamily": "'Dank Mono', Menlo, Monaco, 'Courier New', monospace",
    "editor.fontLigatures": false,
    "editor.rulers": [80],
    "editor.snippetSuggestions": "top",
    "editor.wordBasedSuggestions": false,
    "editor.suggest.localityBonus": true,
    "editor.acceptSuggestionOnCommitCharacter": false,
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "editor.suggestSelection": "recentlyUsed",
      "editor.suggest.showKeywords": false
    },
    "editor.renderWhitespace": "boundary",
    "files.exclude": {
      "USE_GITIGNORE": true
    },
    "files.defaultLanguage": "{activeEditorLanguage}",
    "javascript.validate.enable": false,
    "search.exclude": {
      "**/node_modules": true,
      "**/bower_components": true,
      "**/coverage": true,
      "**/dist": true,
      "**/build": true,
      "**/.build": true,
      "**/.gh-pages": true
    },
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": false,
      "source.fixAll": true
    },
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      "typescript",
      "typescriptreact"
    ],
    "eslint.options": {
      "env": {
        "browser": true,
        "jest/globals": true,
        "es6": true
      },
      "parserOptions": {
        "ecmaVersion": 2019,
        "sourceType": "module",
        "ecmaFeatures": {
          "jsx": true
        }
      },
      "rules": {
        "no-debugger": "off"
      }
    },
    "workbench.colorTheme": "Night Owl",
    "workbench.iconTheme": "material-icon-theme",
    "breadcrumbs.enabled": true,
    "grunt.autoDetect": "off",
    "gulp.autoDetect": "off",
    "npm.runSilent": true,
    "explorer.confirmDragAndDrop": false,
    "editor.formatOnPaste": false,
    "editor.cursorSmoothCaretAnimation": true,
    "editor.smoothScrolling": true,
    "php.suggest.basic": false,
    "editor.formatOnSave": true,
    "eslint.alwaysShowStatus": true,
    "eslint.probe": [
      "javascript",
      "javascriptreact",
      "typescript",
      "typescriptreact",
      "html",
      "vue"
    ]
  }

The above code customizes the font and style of the editor but it make it fully functional, you have to download the VScode extensions for theme and plugins. The two extensions you need to install is:

Night Owl / A Visual Studio Code theme
material-icon-theme / icons for files preview

After downloading the required extensions; your editor will preview them as below:

To make your developing experience smoother, you can download some extra VScode extensions. There are thousands of extensions in the VScode marketplace. But we will talk about the extension that is most popular or could help you to make your developing experience smoother. Some of the vscode extensions are mentioned below: