/

Configuring Visual Studio Code for JavaScript Development

Configuring Visual Studio Code for JavaScript Development

In this blog post, I will guide you through the process of setting up Visual Studio Code (VS Code) for JavaScript development. Whether you are starting fresh or migrating to a new system, these steps will help you create the perfect coding environment.

Before we begin, make sure you also check out my VS Code introduction post for more useful information.

So, let’s get started! Here are the steps I followed to customize my VS Code setup:

  1. Install Fira Code font and set it as your Font Family.
  2. Set Tab Size to 2 spaces (my personal preference).
  3. Exclude **/node_modules directory to prevent it from showing up in the file list.
  4. Enable Format on Paste and Format on Save options.
  5. Enable font ligatures for a better coding experience.
  6. Disable the Minimap for a distraction-free view.
  7. Enable Trim Trailing Whitespace to remove unnecessary spaces at the end of lines.
  8. Install the Sublime Text Keymap plugin for handy shortcuts like cmd-K cmd-B to show/hide the sidebar and cmd-W to close a file.

After customizing the settings, I recommend installing some themes to personalize your coding environment. Here are a few popular choices:

  • Palenight Theme
  • Nostromo
  • Night Owl
  • Ayu

Now, let’s install some essential extensions for JavaScript development:

  • Prettier: Automated code formatter.
  • IntelliSense for CSS class names: Enhances CSS class name suggestions.
  • Intent 4-to-2: Converts 4-space indents to 2 spaces with a simple keyboard shortcut.
  • ESLint: JavaScript linter.
  • Duplicate action: Quickly duplicate lines of code.
  • Bracket Pair Colorizer 2: Matches brackets with colors for better code readability.
  • Babel ES6/ES7: JavaScript compiler for modern syntax.
  • ES7 React/Redux/GraphQL/React-Native snippets: Code snippets for various frameworks.
  • TODO Highlight: Highlights TODO comments in your code.

This combination of themes and extensions provides a great starting point for JavaScript and React development.

Once you have installed the extensions and customized all the settings, make sure to update your user settings JSON file with your preferences. Here is an example of how mine looks:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
 "editor.fontFamily": "Fira Code",
 "editor.tabSize": 2,
 "editor.wordWrap": "bounded",
 "files.exclude": {
 "**/node_modules": true
 },
 "editor.formatOnPaste": true,
 "editor.formatOnSave": true,
 "editor.minimap.enabled": false,
 "workbench.colorTheme": "Tomorrow Night Blue",
 "files.trimTrailingWhitespace": true,
 "workbench.activityBar.visible": false,
 "window.zoomLevel": 2,
 "editor.cursorBlinking": "smooth",
 "editor.fontLigatures": true,
 "prettier.jsxBracketSameLine": true,
 "prettier.jsxSingleQuote": true,
 "prettier.singleQuote": true,
 "prettier.semi": false,
 "[markdown]": {
 "editor.renderWhitespace": "all",
 "editor.acceptSuggestionOnEnter": "off",
 "editor.parameterHints.enabled": false,
 "editor.quickSuggestions": false,
 "editor.snippetSuggestions": "none"
 }
}

The [markdown] section includes Markdown-specific configuration. In my case, I disable popups that may distract me while writing, which are not necessary for coding.

That’s it! Now you have a perfectly configured VS Code setup for JavaScript development. If you’re interested in React development, don’t forget to check out my VS Code setup for React development blog post too!

Happy coding!

Tags: Visual Studio Code, JavaScript development, VS Code setup, JavaScript IDE, coding environment