11/10/2023 0 Comments Visual studio code extensions![]() The items in the list are denoted using a star symbol, as shown in the following demo. character to access an object method or fields, IntelliCode will suggest a list of members that are likely to be used in the present scenario. It does this using an AI model that has been trained on thousands of popular open-source projects on GitHub. IntelliCode is a tool that produces smart code completion recommendations that make sense in the current code context. Visual Studio IntellicodeĪrtificial Intelligence continues to increase worker productivity in various jobs, and developers are not left out. Install: JavaScript (ES6) code snippets – Visual Studio Marketplace 9. Here’s a demo where the imp and imd snippets from this extension are used to quickly import two modules with ES6 syntax. JavaScript (ES6) Code SnippetsĪs the name suggests, this is an extension that comes fully loaded with heaps of time-saving code snippets for JavaScript, in ES6 syntax. Install: IntelliSense for CSS class names in HTML – Visual Studio Marketplace 8. You’ll appreciate the benefits of this extension when using third-party CSS libraries containing hundreds of classes. This extension can work hand in hand with CSS Peek, it provides code completion for the HTML class attribute from existing CSS definitions found in the current Visual Studio Code workspace. Install: CSS Peek – Visual Studio Marketplace 7. Here is a demonstration of all these methods: You can use a keyboard shortcut to navigate to where the definition is located in its CSS file.You can use a keyboard shortcut to open a persistent definition window that displays the CSS definition of a class name or ID.You can hold down the Ctrl key and hover over a class name or ID to peek at its definition.The CSS Peek Extension lets you quickly view the CSS style definitions for various class names and IDs assigned in HTML. Install: Live Server – Visual Studio Marketplace 6. This saves you from having to manually reload the page in the browser every time you make a change.Īs you saw in the demo, you can easily launch a new server using the Open with Live Server item in the right-click context menu for a file in the VS Code Explorer. Modifying index.html and saving the file reloads the server instantly. In the demo below, a new server is launched quickly to display the contents of the index.html file. ![]() The server will automatically reload when an associated file is changed. The Live Server extension for VS Code starts a local server that serves pages using the contents of files in the workspace. Install: GitLens - Git supercharged – Visual Studio Marketplace 5. Place the cursor on any line in the editor and GitLens will display info on the latest commit where the line was changed: GitLens displays views containing essential repository data and information on the current file, such as file history, commits, branches and remotes. GitLens is another powerful extension that helps you take full advantage of Git source control in Visual Studio Code. Install: ESLint – Visual Studio Marketplace 4. We can also use the Problems tab to view all errors in every file in the current VS Code workspace. We can view details on the error by hovering over the red line: This integration allows ESLint to notify you of problems right in the editor.įor instance, it can use a red wavy line to notify of errors: The ESLint extension for Visual Studio Code enables integration between ESLint and the code editor. It deals with both code quality and coding style issues, helping to identify programming patterns that are likely to produce tricky bugs. ESLintĮSLint is a tool that finds and fixes problems in your JavaScript code. Install: JavaScript Booster – Visual Studio Marketplace 3. Splitting a declaration and initialization into multiple statements:Īnd converting a function to an arrow function: They are dozens of code actions that it can carry out, including replacing an if.else statement with a ternary operator: ![]() This extension upgrades Visual Studio Code with code actions to perform common refactoring tasks that occur when programming with JavaScript. ![]() Install: Prettier – Code formatter – Visual Studio Marketplace 2. Watch Prettier in action: Pretter instantly formats the code after the file is saved. The Prettier extension for Visual Studio Code brings about a seamless integration between the code editor and Prettier, allowing you to easily format code using a keyboard shortcut, or immediately after saving the file. It ensures that all your code has a consistent format and can help enforce a specific styling convention in a collaborative project involving multiple developers. ![]() Prettier is a useful tool that automatically formats your code using opinionated and customizable rules. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |