How I configure VSCode for Everything?

11 Awesome JavaScript Extensions for Visual Studio Code

11 Awesome JavaScript Extensions for Visual Studio Code

One of the most impressive parts of Visual Studio Code is customizability, especially via extensions. I won't cover framework specific extensions, but here are some of the best extensions in VS Code for writing JavaScript.

One of the most impressive parts of Visual Studio Code is customizability, especially via extensions. I won't cover framework specific extensions, but here are some of the best extensions in VS Code for writing JavaScript.

Table of Contents

  • JavaScript (ES6 Code Snippets)
  • Quokka
  • Prettier
  • Debugger for Chrome
  • ESLint
  • Import Cost
  • Path Intellisense
  • View Node Package
  • Better Comments
  • NPM Intellisense
  • Wallaby.js
  • Conclusion 
JavaScript (ES6 Code Snippets)

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

Snippet extensions are one of the most popular categories of extensions, and this one follows suit. It includes snippets for modern ES6 JavaScript, which is what you should be writing (or learning if you haven't already). Although this snippet is not specific to any framework, these snippets can be triggered from severl different file types.

  • JavaScript (ES6 Code Snippets)
  • Quokka
  • Prettier
  • Debugger for Chrome
  • ESLint
  • Import Cost
  • Path Intellisense
  • View Node Package
  • Better Comments
  • NPM Intellisense
  • Wallaby.js
  • Conclusion 

Here are a couple of my favorites that you should try out!

  • JavaScript (ES6 Code Snippets)
  • Quokka
  • Prettier
  • Debugger for Chrome
  • ESLint
  • Import Cost
  • Path Intellisense
  • View Node Package
  • Better Comments
  • NPM Intellisense
  • Wallaby.js
  • Conclusion 

There are many others, so go give them a try!

Quokka

https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

Have you ever wanted to test out a function or play around with some JavaScript code? Sometimes you can test right in the Chrome Dev Tools console, sometimes you'll open up a CodePen. With Quokka.js, you can create a scratchpad right inside VS Code!

Test out your JavaScript quickly and easily with Quokka.js.

Prettier

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

An opinionated code formatter that can format your JavaScript code automatically. By having Prettier installed, you never have to worry about formatting; just let the computer take care of it!

It can be a little hard to get used to having your formatting handled for you as I'm sure a lot of devs have their own style that they like. Having Prettier on a team ensures that everyone follows the same style of coding.

Debugger for Chrome

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Although console.log() has its place, it's not the best way to debug. Chrome has debugging tools built in, but did you know you can also debug directly in VS Code using this extension?

I personally prefer to debug using this extension. This means that I can stay inside of the editor that I'm used to, make changes on the fly, etc. You can do most of the things that you would expect when debugging.

  • JavaScript (ES6 Code Snippets)
  • Quokka
  • Prettier
  • Debugger for Chrome
  • ESLint
  • Import Cost
  • Path Intellisense
  • View Node Package
  • Better Comments
  • NPM Intellisense
  • Wallaby.js
  • Conclusion 
ESLint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

With so many amazing tools out there, you should not be stressing over formatting your code. ESLint is one of many that can auto-format your code (on save if you choose). Additionally, the linting aspect can "yell" at you (for lack of a better word) to encourage or require to follow certain guidelines.

ESLint or TSLint (for TypeScript) are often configured with many starter projects, so you may not even have to configure it yourself. Just by creating a new project and opening it up in VS Code, you'll have all the help you need to write consistent code!

Import Cost

https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

If you're worried about the size of the packages and modules that you import into your app, check out this extension! Next to your import statements you will see the size of the package you are importing. This is a great way to ensure the size of your app bundles is as small as possible!

Path Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

When trying to reference a file in your workspace, it can be tough to remember exact file paths and names. I try to keep my menu bar in VS Code closed most of the time (to maximize code real estate), so I hate having to open the file explorer just to double check where a file is located. That's where Path Intellisense comes in!

This extension will provide you intellisense when referencing file paths. All you have to is start typing a path inside of quotes and you'll get intellisense for folder and file names.

View Node Package

https://marketplace.visualstudio.com/items?itemName=dkundel.vscode-npm-source

Click on your require or import lines in your code and click straight to the GitHub repo.

Very helpful when you want to jump to GitHub to view some source code or look through docs/issues.

Better Comments

https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

This extension is probably the least popular of the bunch, but I personally find it incredibly useful. So, you know when you have a piece of code you need to implement or finish later? Or you you want to mark a piece of code as deprecated? Or you have a question for another developer about a piece of code?

This extension will provide color coded comments to solve all of the above. Here's a list of the available color codes.

  • JavaScript (ES6 Code Snippets)
  • Quokka
  • Prettier
  • Debugger for Chrome
  • ESLint
  • Import Cost
  • Path Intellisense
  • View Node Package
  • Better Comments
  • NPM Intellisense
  • Wallaby.js
  • Conclusion 
NPM Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

Ever gone to import a package and forgot exactly what the name is? Well, no more! This extension will provide package intellisense when importing based on the NPM packages that you have installed.

Wallaby.js

https://marketplace.visualstudio.com/items?itemName=WallabyJs.wallaby-vscode

Run your tests as you code! From the people that brought us Quokka.js, here's a cool tool to speed up your development.

Conclusion

Got any more awesome JavaScript extensions? Let us know down in the comments and we'll add it to this post as extra mentions.

Thanks for reading!

Visual Studio Code Settings and Extensions for Faster JavaScript Development

Visual Studio Code Settings and Extensions for Faster JavaScript Development

Visual Studio Code Settings and Extensions for Faster JavaScript Development

I have been using Visual Studio Code for more than two years, when I jumped on it from Sublime Text.

I spend about 5–6 hours every day inside VS Code so it’s imperative that it is tailored to my needs to make me as productive as possible. Over the years, I have tried many extensions and settings but now I feel settled with what I have so it’s worth talking about them.

Extensions

Prettier Code Formatter

I use Prettier for code formatting across all of my projects and I’ve set up this extension so that it automatically formats my HTML/CSS/JS when I hit ⌘ + S. This has allowed me to get rid of language-specific code formatters.

npm

I use this extension along with npm intellisense (below) to ensure that my package.json is up to date and not bloated with modules that I am not using.

npm Intellisense

This extension indexes my package.json and allows me to autocomplete my import statements when requiring modules.

Bracket Pair Colorizer

This extension color codes all of my brackets, allowing me to quickly see where each code block starts and ends.

React Refactor

This is the newest extension that I have added to my arsenal and I really like it. It lets you select some JSX and refactor it out into a custom React Class, function, or hook.

Auto Close Tag

Another simple extension that does one thing well: auto-closes my JSX tags.

GitLens

I recently moved from the native Source Control setting that VSCode has to Gitlens. I like this extension because it lets me:

  • Automatically see the git blame for the current line
  • View a more detailed history on hover
  • Reset changes via the gutter

Simple React Snippets

I write so much React code that I needed an extension to help me save some time. I now use this extension to fill in some of the boilerplate that comes along with writing React components.

Markdown All in One

This extension helps me a lot when writing READMEs, or other Markdown documents. I specifically enjoy how it deals with lists, tables, and table of contents.

User Settings

Apart from the extensions, the other aspect of customizing your VS Code experience are your User Settings. I have shared my complete Settings file below, but here are some of the important bits:

Font Settings

I really like fonts with ligatures. If you are unfamiliar with ligatures, they are special characters that parses and joins multiple characters. I primarily use Fira Code as my programming font. Here’s how it renders JavaScript:

My complete font stack is:

"editor.fontFamily": "'Fira Code', 'Operator Mono', 'iA Writer Duospace', 'Source Code Pro', Menlo, Monaco, monospace", "editor.fontLigatures": true,

To detect indentation, I also prefer these settings:

"editor.detectIndentation": true, 
"editor.renderIndentGuides": false,

To help manage my imports, I prefer these:

// Enable auto-updating of import paths when you rename a file. "javascript.updateImportsOnFileMove.enabled": "always",

Emmet

Emmet now comes included with VS Code now, but to make it work well with React, I had to update some of the settings.

"emmet.includeLanguages": { 
  "javascript": "javascriptreact", 
  "jsx-sublime-babel-tags": "javascriptreact"
}, 
"emmet.triggerExpansionOnTab": true, "emmet.showExpandedAbbreviation": "never",

Here’s my complete user-settings.json

{
  "editor.formatOnSave": true,
  // Enable per-language
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "[json]": {
    "editor.formatOnSave": true
  },
  "emmet.syntaxProfiles": {
    "javascript": "jsx",
    "xml": {
      "attr_quotes": "single"
    }
  },
  "editor.lineHeight": 22,
  "javascript.validate.enable": false,
  "workbench.editor.enablePreview": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "prettier.trailingComma": "all",
  "bracketPairColorizer.forceIterationColorCycle": true,
  "editor.fontWeight": "500",
  "editor.fontLigatures": true,
  "editor.letterSpacing": 0.5,
  "editor.cursorWidth": 5,
  "editor.renderWhitespace": "all",
  "editor.snippetSuggestions": "top",
  "editor.glyphMargin": true,
  "editor.minimap.enabled": false,
  "terminal.integrated.fontWeight": "400",
  "editor.fontFamily": "Fira Code, iA Writer Duospace, Menlo, Monaco, 'Courier New', monospace",
  "editor.fontSize": 14,
  "window.zoomLevel": -1,
  "files.trimTrailingWhitespace": true,
  "files.trimFinalNewlines": true,
  "workbench.fontAliasing": "auto",
  "terminal.integrated.macOptionIsMeta": true,

  "prettier.bracketSpacing": true,
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.fontWeightBold": "700",
  "terminal.integrated.lineHeight": 1.6,
  "workbench.colorTheme": "Shades of Purple",
  // SOP's Import Cost Extension Settings.
  "importCost.largePackageColor": "#EC3A37F5",
  "importCost.mediumPackageColor": "#B362FF",
  "importCost.smallPackageColor": "#B362FF"
}

For more tips and tricks about Visual Studio Code, I recommend checking out VSCode Can Do That.

*Originally published by Tilo at *tilomitra.com 

======================

Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter

Learn More

☞ Learn Visual Studio Code

☞ Visual Studio Code Crash Course 2019

☞ The Complete JavaScript Course 2019: Build Real Projects!

☞ The Complete 2019 Web Development Bootcamp

☞ Svelte.js - The Complete Guide

☞ The Complete JavaScript Course 2019: Build Real Projects!

☞ Become a JavaScript developer - Learn (React, Node,Angular)

☞ JavaScript: Understanding the Weird Parts

☞ Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

☞ The Full JavaScript & ES6 Tutorial - (including ES7 & React)

☞ JavaScript - Step By Step Guide For Beginners

☞ The Web Developer Bootcamp

Python in Visual Studio Code

Python in Visual Studio Code

Python in Visual Studio Code

This post was written by Luciana Abud, Program Manager for the Python Extension in Visual Studio Code

We are pleased to announce that the January 2019 release of the Python Extension for Visual Studio Code is now available. You can download the Python extension from the Marketplace, or install it directly from the extension gallery in Visual Studio Code. You can learn more about Python support in Visual Studio Code in the documentation.

In this release we have closed a total of 62 issues, including:

  • IPython console support in the Python Interactive window
  • Support for running an entire file in the Python Interactive window
  • Problems for failed tests when using pytest (thanks Chris NeJame)
  • Much faster outline when using the Python Language Server

Keep on reading to learn more!

IPython console support in the Python Interactive window

The data science experience was first introduced in the last October release, and one of the top feedback requests we’ve heard was to provide the ability to iterate rapidly by experimenting with code in an interactive console environment. In this update, we extended the Python Interactive window with IPython console support by allowing code to be typed in and executed directly in the window. You can now use the enhanced Interactive window standalone as an IPython console, or send code from the editor for execution.

Here’s how to use it in a nutshell:

  • IPython console support in the Python Interactive window
  • Support for running an entire file in the Python Interactive window
  • Problems for failed tests when using pytest (thanks Chris NeJame)
  • Much faster outline when using the Python Language Server

Run an entire file in the Python Interactive window without cells defined

Being able to run code in the Python Interactive window without having to define cells is no doubt one of the most requested features. This update enables running the entire files in the Interactive window without cell definitions.

To run the entire file, simply use the command Run Current File in Python Interactive window in the Command Palette. Your code will be executed with results displayed in the Python Interactive window.

We’ve also heard requests to run the current code selection / line in the editor, and this will be coming next in a future update.

Diagnostics for failed tests with pytest

This release also includes an enhancement to unit tests run with pytest: you can now see failed tests in the problems window. You can also double click lines to navigate to the failed test method and the exact failing line. The correspondent line in the editor will be selected, allowing you to easily identify and edit it.

As before, you can also see failed tests highlighted with pass/fail icons in the editor. You can hover these icons to see the errors navigate to the failing test method/line, just like in the problems window.

We’d like to thank community contributor Chris NeJame for implementing this new feature. Contributions to the Python extension are always welcome! If you’re interested, check our contributing guide to learn more.

Much faster outline view with the Python Language Server

We also made improvements to the outline view when using the Microsoft Python Language Server. The Outline view could often take a long time to load or even time out, and now with the Language Server It now loads consistently fast, and cases where symbols would appear duplicated were fixed.

As a reminder, the Language Server was released as a preview the last July release of the Python extension. To opt-in to the language server, change the python.jediEnabled setting to false in File > Preferences > User Settings. We are working towards making the language server the default in future releases.

Original source: https://blogs.msdn.microsoft.com

 ===================================================================

Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter

Learn More

☞ Complete Python Bootcamp: Go from zero to hero in Python 3

☞ Python for Time Series Data Analysis

☞ The complete beginner’s guide to JSON

☞ The Complete Guide to JSON Web Tokens

☞ Python Programming For Beginners From Scratch

☞ Python Network Programming | Network Apps & Hacking Tools

☞ Intro To SQLite Databases for Python Programming

☞ Ethical Hacking With Python, JavaScript and Kali Linux

☞ Beginner’s guide on Python: Learn python from scratch! (New)

☞ Python for Beginners: Complete Python Programming