Tags: new net market EMS Uri Hoc debug Name one
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.
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-browserCode 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: QuokkaFaker
Project Address: FakerJump 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 PeekHTML Template –html Boilerplate
HTML template extensions will not have to manually write new HTML documents
body labels. Simply type in an empty file
html and press the TAB key to generate a clean document structure.
Project Address: HTML boilerplateFormat 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: PrettierColor 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 InfoSVG 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 ViewerTODO 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 FontsCode 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
Project Address: MinifyNamed 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 caseRegular 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 PreviewerLanguages 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:
10. "Go" Visual Studio Code Prerequisites, topics and syntax hints