10. "Go" Visual Studio Code Prerequisites, topics and syntax hints

Original address: http://www.css88.com/archives/8064

recommended by: Nuggets is a high-quality technology community for programmers, from first-tier experience sharing to front-end development best practices, whether it's getting started or advanced, to nuggets you won't miss out on any of the technical dry products developed at the front end.

Visual Studio Code is a free, cross-platform text editor developed by Microsoft. Thanks to its excellent performance and rich features, it quickly became a favorite for developers.

Like most Ides, Vscode has an extended market with thousands of plugins with different functions. To help you pick something worth downloading, we've collected these most useful and interesting extensions.

Open or preview –open-in-browser in the browser

Vscode cannot open files directly in the browser via the built-in interface. This extension adds an [open with Default Browser] option to the right-click menu, which enables you to open command panel options in the Client (Firefox,chrome,ie).

Project Address: Open-in-browser

Code Debugging –quokka

Quokka is a debugging tool that provides real-time feedback for the code you are writing. It is able to preview the function of the variable and calculate the result of the value. The extension is easy to configure and can be used directly for projects that use JSX or TypeScript.

Project Address: Quokka

Faker

Quickly insert placeholder data using the popular Faker JavaScript library. You can generate random numbers of names, addresses, images, phone numbers or classic text-in-the-chaos paragraphs. Each category has a variety of subcategories, so you can use the data as you please.

Project Address: Faker

Jump to CSS definition line –css Peek

With this extension, you can track the style of CSS classes and IDs in a style sheet. When you right-click the selector in the HTML file, selecting Go to Definition and Peek will take you directly to the corresponding CSS code.

Project Address: CSS Peek

HTML Template –html Boilerplate

HTML template extensions will not have to manually write new HTML documents head and body labels. Simply type in an empty file html and press the TAB key to generate a clean document structure.

Project Address: HTML boilerplate

Format Code code beautify –prettier

Prettier is now the most popular code formatter in WEB development. It allows your team to maintain a neat and unified code structure. This extension can automatically apply prettier and quickly format the entire JS and CSS documents.

Project Address: Prettier

Color information and Conversion –color info

A lightweight widget that will give you a variety of information about the colors used in CSS. By hovering the mouse over the color code, you can see a preview of the color, as well as information about its conversion to all formats (HEX,RGB,HSL and CMYK).

Project Address: Color Info

SVG Preview –svg Viewer

This plugin is a utility that can view SVG in Visual Studio Code. It can render SVG files and view previews without leaving the editor. It also includes options for converting to PNG format and generating data URI patterns.

Project Address: SVG Viewer

TODO Highlight –todo Highlight

This tool can mark all TODO comments in your code so that any unfinished business is easily tracked before being pushed into the production environment. By default, it looks for TODO and Fixme keywords, and you can, of course, add custom expressions.

Project Address: TODO Highlight

Icon Font –icon Fonts

This is a plugin that adds an icon font to your project (or from a Cdn) and automatically prompts for the class name of the icon itself. The extension supports more than 20 popular icon sets, including the Font Awesome, Ionicons, glyphicons and Material Design Icons.

Project Address: Icon Fonts

Code Compression –minify

The extension used to compress the code. It provides a number of customizations and auto-compression options for saving and exporting to a .min file. Minify compresses JavaScript, CSS, and HTML, respectively, through Uglify-js, Clean-css, and Html-minifier.

Project Address: Minify

Named format conversion –change case

This plugin is used to convert text. Can be used directly, only lowercase and uppercase conversions. This plugin adds more commands for modifying strings, including CamelCase (Camel desperately name), Kebab-case (named in the dash), snake_case (underlined), const_case (uppercase naming), and so on.

Project Address: Change case

Regular Expression Preview –regex Previewer

A utility for testing regular expressions in real time. It highlights all occurrences by applying the regular expression pattern to any open text file.

Project Address: Regex Previewer

Languages and Frameworks –language and framework Packs

Vscode supports a large number of languages. If you are using a programming language that is not included, then you can download this extension package, which will add autofill, appropriate indentation, and other useful features. There are also language pack support for WEB front-end frameworks, such as react native and Vue.

Theme and color scheme –themes

Of course, the most important of all extensions is the subject. You are looking at your vscode editor every day, why not make it more beautiful? There are many custom plugins that can change the color scheme and the icons in the sidebar. Here are some of our favorites:

• One Monokai
• Aglia
• One Dark
• Material Icon

10. "Go" Visual Studio Code Prerequisites, topics and syntax hints