[Organize and share] VSCode must-install plug-ins for developing vue projects

This article will sort out some VSCode plug-ins that must be installed when developing vue projects. I hope it will be helpful to everyone!

I used webstorm to develop projects before. Although webstorm is easy to use, it has two big flaws: First, it is too stuck. The laptop I bought three years ago is opening a Projects basically have to be restarted every day, and it freezes immediately when opening three projects. The second one is paid. Although there is a cracked version online, it will become invalid every once in a while, which is too painful.

Therefore, we decided to abandon it and use vscode, which is lightweight and free, and its full name is Visual Studio Code. After many days of exploration, after installing the following plug-ins in vs code, it has basically achieved the same effect as webstorm or even a better experience than it. From now on, I no longer have to worry about lags and failures. [Recommended study: "vscode introductory tutorial"]

Plug-in installation and instructions

1. Chinese (Simplified) (简体中文) ) Language Pack for Visual Studio Code

Function: Chinese version of VS Code

Installation steps:

Instructions: Installation Step 123 is the same for any plug-in. Most plug-ins only have step 123. This plug-in has an extra step 4, so you need to pay special attention to it.

2. Vue Language Features (Volar)

Function: The default vue files in vs code all have the same text and cannot be clicked. This plug-in allows the content of vue files to be color-coded, and supports clicking on relative path files to jump and style positioning of class names (provided that the class name and style must be in the same file)

3. vue-helper

Function: When you click on the vue component, vue variable, or vue method in the template, you can locate the corresponding file or location. When you click on the vue component, you can jump to the corresponding file. The premise is that the component is installed with relative path introduction (that is, alias introduction is not supported), and the component name is the same as the component's file name. For example, the component file name is select.vue, but when the component is introduced, it is not clickable. You need to change the component file name to common-select.vue

4. vue peek

Function: When you click the vue component in the template, you can jump to the corresponding file. It can support vue components introduced by aliases. For example, this import method is supported: import commonSelect from '@/components/common-select'; which makes up for the shortcomings of plug-in 3.

5. css peek

Function: Supports cross-file class name jump, that is, the class name and its style are not in the same file, which makes up for plug-in 2 shortcomings.

6. Alias ​​path jump

Function: Support the adjustment of the alias file introduction method to make up for the shortcomings of plug-in 2 (projects that do not use aliases do not need to install it)

7. Auto Rename Tag

Function: Automatically rename the tag, that is, modify the start tag, and the end tag will also be automatically modified

8 . Code Spell Checker

Function: Word spell checker, incorrectly spelled words will be reminded with wavy lines

9. GitLens — Git supercharged

Function: When the mouse cursor stays on any line of code, the git modification information of that line of code will appear, which can effectively avoid taking the blame when there is a code problem

10. Git Graph

Function: After the installation is completed, a Git Graph button will appear in the lower left corner. Click to see the detailed information of all git commits and the obvious changes in the code of each commit

11 . Prettier - Code formatter

Function: File formatting, you can configure the file to be formatted when saving it

Steps: After installing the plug-in, find setting.json

Copy the following code. The first two lines are required for the plug-in. The last two lines are plug-in 12 and plug-in 13. What is needed, if you do not install plug-ins 12 and 13, you can delete the last two lines

{
  "editor.formatOnSave": true, // 保存时是否格式化
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 格式化插件
  "editor.tabSize": 2, // tab健空格
  "editor.fontSize": 14, // 字体大小
  "workbench.iconTheme": "vscode-great-icons",
  "workbench.colorTheme": "One Dark Pro"
}

If you want to configure other rules, you can create a new .prettierrc file in the root directory of the project and copy the following code Enter, the meaning of each line is: 1. Single quotation mark, 2. No comma in the last element of the object, 3. No brackets when the arrow function has only one parameter, 4. Newline if more than 100 characters.

{
  "singleQuote": true,
  "trailingComma": "none",
  "arrowParens": "avoid",
  "printWidth": 100
}

12. VSCode Great Icons

Function: Make the project structure have corresponding icons in front of it, which looks more beautiful (not required)

13. One Dark Pro

Function: vs code skin, making the interface more beautiful (not required)

14. Markdown Preview Enhanced

Function: Usually there is a README.md file in each project. After installing it, you can right-click on each md file to preview the effect

15. koroFileHeader

Function: Mainly used for file header comments and function comments, that is, pressing the shortcut key automatically generates the comments you configure , if there is no configuration, the default annotation of the plug-in will be generated.

File header comment shortcut keyswindow：ctrl win i，mac：ctrl cmd i

Function comment shortcut keyswindow：ctrl win t,mac：ctrl cmd t, you need to put the cursor on the function first OK and press the shortcut key.

Configuration documentation: https://github.com/OBKoro1/koro1FileHeader/wiki/Installation and Quick Start

For more knowledge about VSCode, please visit: vscode tutorial!

The above is the detailed content of [Organize and share] VSCode must-install plug-ins for developing vue projects. For more information, please follow other related articles on the PHP Chinese website!