This is the 20th day of my participation in the August Text Challenge.More challenges in August

Introduction to VUE – Chapter 2

To do a good job, he must sharpen his tools

At present, the software suitable for vue development includes WebStorm, VSCode and so on. Windows VscodeUserSetup-x64 is recommended

1. Set the Chinese language

Open VSCode 2. Enter Ctrl+Shift+P, enter Configure Display Language in the search box, and click Open 3. Change the “en” in the quotation marks to “zh-cn”, or delete the “en” with the quotation marks until the colon. If you type Z, the system prompts you to complete the “locale”:” zh-cn “4. Click the plug-in, the bottom icon on the left of the software, then search Chinese, download the language package, install, restart

2. List of common plug-ins

1.vetur

Syntax error checking:

eslint-plugin-vue@beta is used by default.

Syntax highlighting:

Support for most of the major front-end development scripts and plug-ins in addition to Template, such as SASS and TypeScript;

The Snippet:

You can use Snippets to write different scripts, such as setting lang= ‘ts’ in script to write TypeScript.

1. <script lang="ts">
2. Use TS snippets here
3. </script>
Copy the code

2.EsLint

Syntax error correction

The ESLint plugin is capable of detecting syntax issues in code, as well as formatting issues, which are crucial to maintaining a consistent code style for projects.

3.Debugger for Chrome

Breakpoint debugging

You can debug js code directly in vscode, similar to the browser console, which is very convenient.

4.HTML CSS Support

When writing a style sheet, the smart prompt for the current project supported style, greatly reduce the writing time, recommended use!

5.HTML Snippets

Automatic padding of HTML tags.

For example, if you print html5 enter, the html5 tag template will be automatically generated

6.jQuery Code Snippets

JQuery smart code tips

7.Bracket Pair Colorizer

When writing code, it is common to have code differentiation errors or missing parentheses due to complex logic. This plugin is a good solution to this problem. It can add different colors to brackets in different blocks, and users can define different bracket type colors. Develop sharp tools!

8.Path Intellisense

Automatic prompt file path, default does not enable this function, support a variety of quick file import. Writing paths at development time is also a hassle, and auto-completion is much better.

9.JavaScript(ES6) code snippets

ES6 smart grammar alerts, and quick input; Support not only JS, but also.ts,.jsx,.tsx,.html,.vue, saving the time to configure it to support various code files containing JS

10.Live Server

A small server with real-time refresh capabilities. This plug-in is easy to install, one step in place, one click after installation can solve the problem of setting up a local server and automatic refresh. More convenient than GULP. However, you need to pay attention to port usage.

These are some of the more commonly used VSCode plug-ins. Of course, there are many useful plug-ins, you can explore oh.