Most experienced developers would tell you that the best practice as a beginner is to always write your codes from start to finish and only use extensions when you’re very conversant with the codes. They are correct! but, it is also advisable to use some VScode features/extensions as these would save you time and make the coding process a tad bit easier.
For beginners learning HTML, CSS, JavaScript, and/or React, here are some features/extensions that would aid your coding journey;
- Live Server
- IntelliSense for CSS class names
- Auto rename Tag
- Prettier
- Reactjs code snippets
- Emmet
- Stylelint
- JavaScript (ES6) code snippets
- npm IntelliSense
- Path IntelliSense
Live Server
The very first extension you should have especially if you’re just starting off. It allows you to quickly spin up a local development server to preview your HTML, CSS, and JavaScript projects in a web browser. Some of the key features of the Live Server extension include:
- Quick launch: You can launch a live development server with just a few clicks, eliminating the need to manually configure a local web serve
- Automatic reload: Whenever you make changes to your code, the Live Server will automatically reload the web page in the browser, so you can see your changes right away.
- Browser support: Live Server supports all major web browsers, including Google Chrome, Mozilla Firefox, and Microsoft Edge.
- Custom port: You can specify a custom port number for the Live Server, so you can run multiple instances of the server on your machine without conflicting with each other.
- HTTPS support: The Live Server supports HTTPS, so you can test secure web pages and applications.
- Custom base URL: You can specify a custom base URL for your development server, so you can test your projects with different URLs.
- Integration with VS Code: Live Server integrates seamlessly with the Visual Studio Code editor, making it easy to use and access.
- Lightweight and fast: The Live Server extension is lightweight and fast, so you can quickly spin up a development server and start previewing your projects in no time.
IntelliSense for CSS class names
Gives you autocompletion for CSS class definitions that can be found in your workspace (defined in CSS files or the file types listed in the Supported Language Modes section). Supports external stylesheets referenced through link elements in HTML files. Command to manually re-cache the class definitions used in the auto-completion. User Settings to override which folders and files should be considered or excluded from the caching process.
Auto rename Tag
Auto Rename Tag is a feature in Visual Studio Code that allows you to quickly rename both the opening and closing HTML tags simultaneously. This feature saves time and reduces the risk of errors when renaming HTML tags in your code.
To use the Auto Rename Tag feature in Visual Studio Code, simply place your cursor inside an HTML tag, and then press the “F2” key. The editor will automatically select both the opening and closing tags, and you can then type in a new name to rename both tags at once.
This feature works for both standard HTML tags and custom HTML tags, and it is especially useful when working with complex HTML structures or when renaming multiple HTML tags at once.
It is worth noting that Auto Rename Tag is included in Visual Studio Code by default, so there is no need to install an extension to use it. You can start using it right away, simply by following the instructions above.
Prettier
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary. Prettier automatically reformats code in a consistent and predictable manner, ensuring that code written by multiple developers will look the same, regardless of who wrote it.
Reactjs code snippets
This extension contains code snippets for Reactjs and is based on the awesome babel-sublime-snippets package. To install an extension you need to launch the Command Palette (Ctrl + Shift + P or Cmd + Shift + P) and type Extensions. There you have either the option to show the already installed snippets or install new ones.
Reactjs IntelliSense
IntelliSense is a feature in Visual Studio Code that provides intelligent code completion and suggestion for various programming languages, including React.js. With React.js IntelliSense, you can write React.js code more efficiently and with fewer errors, as it provides suggestions for React.js components, properties, and methods.
React.js IntelliSense in Visual Studio Code works by opening a React.js project and typing code in a .js or .jsx file. Visual Studio Code will then provide suggestions for React.js components, properties, and methods, based on the code you have written so far.
Emmet
Emmet is integrated into many popular code editors, including Visual Studio Code, Sublime Text, and Atom, and it can be used with a wide range of programming languages, including HTML, CSS, JavaScript, and more.
To use Emmet in Visual Studio Code, simply start typing an Emmet abbreviation in your HTML or CSS code, and then press the “Tab” key to expand it into full code. For example, if you type “ul>li*5” and press “Tab”, Emmet will expand this abbreviation into a full HTML unordered list with 5 list items
Stylelint
Is a popular open-source linting tool for CSS, SCSS, and Less. It is used to check the code for potential errors and enforce a set of coding standards and style guidelines. The goal of Stylelint is to help maintain a consistent code style and structure, making it easier to understand, maintain, and develop the codebase over time.
With Stylelint, developers can define a set of rules for how the code should look, such as rules for indentation, spacing, naming conventions, and more. The linter then checks the code against these rules and reports any violations. This can help catch common mistakes and prevent bugs from being introduced into the codebase.
In addition to its linting capabilities, Stylelint also supports automatic fixing of certain types of issues, such as correcting indentation or removing unnecessary spaces. This makes it easier for developers to quickly resolve issues and keep the codebase in line with the established style guidelines.
Stylelint can be run as a standalone tool, or integrated into a code editor or build system as a part of the development process. It is widely used by front-end developers and is supported by a large and active community of contributors.
JavaScript (ES6) code snippets
JavaScript (ES6) code snippets are short pieces of code that can be quickly inserted into a larger program. They can be used to perform common tasks or to prototype new ideas quickly.
npm IntelliSense
This provides intelligent code completion for npm packages. It makes it easier for developers to find and use the packages they need for their projects, by providing suggestions and auto-completion as they type.
With npm IntelliSense, developers can quickly search for packages, view their descriptions and versions, and even access their documentation directly from the code editor. This can save time and improve the productivity of developers, as they no longer need to switch to a web browser to search for packages or view their documentation.
npm IntelliSense also helps to ensure that developers are using the correct packages and versions, by highlighting any conflicts or missing dependencies in the code. This can help catch issues early in the development process and prevent bugs from being introduced into the codebase.
To use npm IntelliSense in Visual Studio Code, simply open a project that has a package.json file and start writing code. The feature will automatically be enabled and will provide suggestions as you type. You can also configure npm IntelliSense to suit your specific needs and preferences.
Path IntelliSense
This provides intelligent code completion for file paths in your code. It makes it easier for developers to include files in their projects, by providing suggestions and auto-completion as they type the file paths.
With Path IntelliSense, developers can quickly find the files they need for their projects without manually typing out the entire path. This can save time and improve the productivity of developers, as they no longer need to navigate the file system to find the correct file.
Path IntelliSense also helps to ensure that the file paths in your code are correct and up-to-date, by automatically updating the paths if the file structure changes. This can help catch issues early in the development process and prevent bugs from being introduced into the codebase.
To use Path IntelliSense in Visual Studio Code, simply start typing a file path in your code. The feature will automatically be enabled and will provide suggestions as you type. You can also configure Path IntelliSense to suit your specific needs and preferences, such as excluding certain directories or using a custom file extension.
Conclusion
Bare in mind that some of these extensions are features already embedded in VSCode, so know the difference, learn how to implement them, watch out for extensions that would confuse your coding process, and for your own sanity uninstall them.
Extensions are helpful but it wouldn’t hurt to manually write your codes sometimes, it would only improve your skills.
