How to build JQuery, Vue and other development environments in front-end projects

This time I will show you how to build development environments such as JQuery and Vue in front-end projects. What are the precautions for building development environments such as JQuery and Vue in front-end projects. Here are practical cases. Let’s take a look. one time.

　VScode is a code editor developed by Microsoft. As stated on the official website, vscode redefines the code editor. Currently, the commonly used lightweight code editors on the market are: sublime, notepad++, editplus, and atom. Compared with notepad++ and editplus, vscode integrates many functions that only IDEs have, and is more like a code editor than them; compared with sublime, vscode has a better appearance, and it is more convenient to install and configure plug-ins; compared with atom, vscode starts up faster. Faster and can open various large files without lag. It can be said that vscode not only has a high degree of freedom, but also has high performance and good appearance. The most important thing is that vscode is also a free code editor that has a team that continuously and rapidly updates. It can be said that vscode is the first choice for code editor. Personally recommend that when writing front-end code, choose vscode for the code## editor and WebStorm for the IDE.

To install the vscode plug-in, you only need to click the button shown in the picture to enter the extension. Enter the plug-in name in the search box and click to install. After the installation is complete, click Reload to restart vscode. The plug-in takes effect.

When you don’t need a certain plug-in, you only need to enter the extension and click the gear button in the lower right corner of the corresponding plug-in to choose to disable or uninstall the plug-in.

Below, I will recommend some vscode plug-ins that I think are more helpful for writing front-end code:

　1 .Auto Close Tag

　Automatically close HTML/XML tags

## 2.Auto Rename Tag

　

Autocomplete

Synchronous modification of the label on the other side

3. Beautify

Formatting code. It is worth noting that the beautify plug-in supports custom formatting code rules. For example:

{
  "indent_size": 4,
  "indent_char": " ",
  "css": {
    "indent_size": 2
  }
}

The default formatting code key of beautify in mac version vscode is cmd+b, you can also customize the shortcut key

　4.Bracket Pair Colorizer

Add different colors to brackets to distinguish different blocks. Users can define different bracket types and colors

##　5.Debugger for Chrome

Mapping breakpoints on vscode to chrome for easy debugging

##　6.ESLint

　JS syntax error correction, you can Custom configuration, but the configuration is more complicated. It is recommended to use some widely used eslint configurations on the Internet. I will also write an article specifically about eslint configuration in the future.

## 7.GitLens

Convenient to view git logs, a must for heavy git users

8.HTML CSS Support

Intelligent prompt CSS class name and id

　9.HTML Snippets

Intelligent promptsHTML tag, and tag meaning

　10.JavaScript(ES6) code snippets

ES6 syntax intelligent prompts and quick input not only support .js, but also .ts, .jsx, .tsx, .html, .vue, eliminating the time of configuring it to support various files containing js code

　11.jQuery Code Snippets

　jQuery Code Intelligent Tips

12.Markdown Preview Enhanced

Real-time preview of markdown, a must for markdown users

13.markdownlint

Markdown syntax error correction

14.Material Icon Theme

Personally think the best vscode icon theme, supports changing different colors icon, it is worth pointing out that this plug-in is updated extremely frequently, basically consistent with the update frequency of vscode

　15.open in browser

　vscode does not Like an IDE, you can open html directly in the browser, and the plug-in supports shortcut keys and the right mouse button to quickly open html files in the browser, and supports custom opening of specified browsers, including: Firefox, Chrome, Opera, IE and Safari

## 16.Path Intellisense

Automatically prompts file paths and supports various quick import files

17. React/Redux/react-router Snippets

React/Redux/react-router syntax smart tips

18.Vetur

Vue multi-functional integrated plug-in, including: syntax highlighting, smart prompts, emmet, error prompts, formatting, auto-completion, and debugger. vscode’s official Vue plug-in is a must-have for Vue developers.

Summary: Since vscode was released, it has swept across major communities (after all, Microsoft’s father) and has become the code editor of choice for many developers. I recommend the above 18 plug-ins based on my personal vscode usage experience. I hope they can be helpful to everyone. At the same time, everyone is welcome to communicate!

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Basic knowledge of html in the front-end

Analysis of the front-end layout of well-known websites

The above is the detailed content of How to build JQuery, Vue and other development environments in front-end projects. For more information, please follow other related articles on the PHP Chinese website!