VSCode is a weapon for front-end development. Here we recommend several essential and very easy-to-use front-end VsCode plug-ins.
1.Better Align
Better Align is a tool that can implement code specifications. It is mainly used for upper and lower alignment of code. It can align code with colons (:), assignments (=, +, -=, *=, /=) and arrows (=>).
2.Bracket Pair Colorizer
Its main function is to add different colors to symbols paired with brackets or other symbols in the code, so that developers can better distinguish different code blocks. When you click on the corresponding brackets, you can directly link them together with line segments, making the hierarchical structure clear at a glance. In addition, it also supports user-defined symbols.
3.npm Intellisense
Its function is to automatically complete the name, version number, file path and other information of the npm module to improve development efficiency. Provide documentation and API reference for npm modules to help developers better understand and use modules. Supports custom npm sources to facilitate developers to use different npm sources in different environments. Supports automatic updating of npm module list to ensure developers obtain the latest npm module information.
4.CSS Peek
You can quickly preview CSS styles. In an HTML file, by hovering the mouse over the style name, you can quickly preview the CSS code of the style, including selectors, attributes, values, etc. Quickly edit CSS styles. In an HTML file, by double-clicking the style name or attribute name, you can quickly jump to the corresponding line of code in the CSS file for editing. Automatically complete CSS styles. In CSS files, by entering part of the style name or attribute name, completion options can automatically pop up to improve writing efficiency. Display CSS style references. In an HTML file, by hovering the mouse over the style name, you can display which HTML elements the style is referenced by. Supports multiple CSS files. In an HTML file, if there are multiple CSS files, you can view and edit them by switching files. In short, CSS Peek can improve the efficiency and accuracy of writing CSS styles, and also facilitates the management and maintenance of CSS styles.
5. ESLint
ESLint is a JavaScript code inspection tool that helps developers check for potential problems in the code and provide repair suggestions when writing code. Its functions include checking code syntax and style, discovering potential problems, unifying code style, providing repair suggestions, etc.
likeshop is a free open source mall system based on "ThinkPHP + Vue + Nuxt + uni-app". It supports H5, mini programs, APP, WeChat payment, Alipay payment, SMS, cloud storage, coupons, flash sales, group buying, rush sales and other mainstream Functional, professional team maintenance, trustworthy, welcome to download and experience. 2,000+star open source address: https://gitee.likeshop.cn/1HurY0AC Official website document address: https://gitee.likeshop.cn/1HurY0AC
6.HTML Snippets
HTML Snippets is a tool for generating HTML code quickly and easily. It can improve developer productivity, reduce the time and errors of manually writing HTML code, and also help developers better organize and manage HTML code.
7.Better Comments
Better Comments can mark different types of comments with different colors and styles, such as TODO, FIXME, IMPORTANT, etc., making it easier for developers to discover and process them. It also allows developers to add custom comment tags, such as QUESTION, NOTE, HACK, etc., to better express their intentions and ideas. Comments can be collapsed to avoid too many comments in the code, which affects readability. Supports multiple programming languages, including JavaScript, TypeScript, Python, Java, etc., and can be suitable for different development scenarios.
8.koroFileHeader
Plug-in for generating file header comments and function comments, supports all mainstream languages, is powerful, flexible and convenient, has complete documentation and is easy to use!
9.Markdown Preview Enhanced
It is a plug-in for previewing Markdown documents. It can preview the effect of Markdown documents in real time, allowing users to quickly see the final effect when editing. You can customize the style sheet through CSS to make the preview effect more in line with your needs. Supports LaTeX syntax and can render mathematical formulas. You can choose different themes to change the preview effect. Markdown documents can be exported to PDF format. Able to automatically identify code blocks and highlight them. A table of contents can be automatically generated to allow users to quickly locate specific parts of the document.
10. Winter
Vetur can highlight code according to Vue.js syntax and provide related code completion functions, making it easier for developers to write Vue.js applications. It can check syntax errors and inconsistencies in Vue.js templates, help developers find problems early, and provide repair suggestions. It can help developers quickly navigate to Vue.js components and provide related code automatic completion to improve development efficiency. Provides some commonly used Vue.js code snippets and quick generation functions to help developers write Vue.js applications faster.
likeshop is a free open source mall system based on "ThinkPHP + Vue + Nuxt + uni-app". It supports H5, mini programs, APP, WeChat payment, Alipay payment, SMS, cloud storage, coupons, flash sales, group buying, rush sales and other mainstream Functional, professional team maintenance, trustworthy, welcome to download and experience. 2,000+star open source address: https://gitee.likeshop.cn/1HurY0AC Official website document address: https://gitee.likeshop.cn/1HurY0AC