Know about VS Code
Visual Studio Code is a lightweight well-done code editor which runs on your desktop and is available for Windows, macOS, and Linux. It’s also free and it is developed and maintained by Microsoft with a modern approach using Electron.
Extensions
Visual studio code has that great feature of extensions API. Visual studio code as a code editor supports most languages. Extension API is helpful in making customizable development workflow. And extension adding is a straightforward process, just need to install it. Changing the color of the file icons, changing different themes, and many more.
1. ES7 React/Redux/GraphQL/React-Native snippets
This extension provides you with JavaScript and React/Redux keyboard shortcuts in ES7 with Babel plugin features for VS Code.
Some great shortcuts:
// rcc
import React, {Component} from ‘react’
export default class index extends Component {
render() {
return (
<div>
</div>
)
}
}
// rce
import React, {Component} from ‘react’
export class index extends Component {
render() {
return (
<div>
</div>
)
}
}
export default index
// rfc
import React from ‘react’
export default function index () {
return (
<div>
</div>
)
}
// rfce
import React from ‘react’
function index () {
return (
<div>
</div>
)
}
export default index
// rafc
import React from ‘react’
const index = () => {
return (
<div>
</div>
)
}
export default index// rnc
import React, {Component} from ‘react’
import {View,Text} from ‘react-native’
export default class index extends Component {
render() {
return (
<View>
<Text>textInComponent<Text>
</View>
)
}
}// rnce
import React, {Component} from ‘react’
import {View,Text} from ‘react-native’
export class index extends Component {
render() {
return (
<View>
<Text>textInComponent<Text>
</View>
)
}
}
export default index// rncs
import React, {Component} from ‘react’
import {View, StyleSheet, Text} from ‘react-native’
export default class index extends Component {
render() {
return (
<View>
<Text>textInComponent<Text>
</View>
)
}
}
const styles = StyleSheet.create({})2. Prettier – Code formatter
An opinionated code formatter is prettier. By analyzing your code and reprinting it according to its own standards, which take the maximum line length into consideration and wrap code as appropriate, it maintains a consistent style. Once you have integrated the Prettier – Code formatter in VS code, you can configure it to format your files when saving them or committing them to any version control system (e.g. Git). This way you never worried about your source code formatting, because Prettier is there for consistent formatting. It works for personal projects but also for projects where working with a team of developers.
Once you have installed it in your VS code, you can use it with CTRL + Shift + P (Windows) or CTRL + CMD + P (macOS) to manually format a file.
If you want to use this formatter over the others which you may have installed, be sure to set it as the default formatter in your VS code settings. Open the settings it opens settings.json where enter the following configuration:
// default for all the languages
“editor.defaultFormatter”: “esbenp.prettier-vscode”// default for the specific language
“[javascript]”:{
“editor.defaultFormatter”: “esbenp.prettier-vscode”
}
If you don’t want to format it manually every time, you can configure it as a format on save. Therefore you need to open your VS code and open the settings it opens settings.json where enter the following configuration:
// enable globally
“editor.formatOnSave”: trueAdditionally, when you working on a project with a team, you can maintain a .prettierrc file for consistent formatting for everyone.
// .prettierrc.js
Module.exports = {
singleQuote: true,
….
}3. TODO Highlight
Sometimes you forget to review the TODOs you have added while you are coding before publishing your code to the production or pushing your code to any version control system (e.g. Git). So TODO Highlight is a handy extension in VS code for developers to highlight sections in code comments.
Customization settings are quite extensive in this extension. You can customize it by configuring the settings.json file as your setup looks like.
TODO: FIXME:
are built-in keywords. You can override the look by customizing in settings.
Examples of customizing comments
// enable TODO Highlight
“todohighlight.isEnable”: true// enable case sensitive
“todohighlight.isCaseSensitive”: true// configure keywords
“todohighlight.keywords”: [
{
“text”: “NOTE:”,
“color”: “f00000”,
“backgroundColor”: “yellow”,
“overviewRulerColor”: “grey”
},
{
“text”: “TODO:”,
“color”: “f00000”,
“backgroundColor”: “yellow”,
“border”: “1px solid red”,
“borderRadius”: “2px”
},
]// style default-style
“todohighlight.defaultStyle”: {
“color”: “f00000”,
“backgroundColor”: “yellow”,
}4. Live Server
Live Server is a very useful extension for web developers. When made some changes to your web page to see them you need to refresh your page every time. Here this extension comes with a refresh on saving your changes. It launches the development local server with a live reload feature for static or dynamic pages.
Shortcuts to Start/Stop Server
- To start the server open a project and directly click on Go Live from StatusBar.
- To stop the server open a project and directly click on PORT <Number> from StatusBar.
- To start the server Right click on the HTML file from the Explorer window and click on Open with Live Server.
- To start the server open an HTML and right click on the editor and click on Open with Live Server.
5. Rapid API Client
If you’ve ever used a third-party program like Postman to test your API or another, you know how difficult it can be. We frequently have to exit VSCode and switch to various API Clients when testing APIs (e.g. Postman). This project switching consumes time and productivity. You can quickly test APIs with the new RapidAPI Extension without leaving VSCode. The addon is well-designed and covers all of the fundamentals of API testing.
Features
- Use the specific tab to call APIs.
- Test APIs both locally and online using VSCode.
- It works with and modifies its design to match your VSCode theme.
- Environmental variables.
- Create code snippets for different languages.
- Types and interfaces can be generated automatically in Python, TypeScript, Swift, and other languages.
Testing an API
To make a new request, click the “+” button. For this fast test, we’ll use the JSON Placeholder API. So, in the URL column, enter https://jsonplaceholder.typicode.com/users/1 and select GET as the method. Press the Send button. It will make an API request and display the results. The results will appear in the response tab as follows:
Conclusion
Visual Studio Code is a text editor with extensive features and innumerable extensions to choose from to make coding a better experience. Downloading extensions as per the stack we are working on helps to boost our productivity level and save time.
Author Editor
