Recently, when I use vscode to write Vue project, I encounter such a situation: when I modify the. Vue file and save it, the style always does not conform to the configuration of. Eslintrc. JS. I tried to modify the configuration of the vetur plug-in of vscode, but I found that I didn’t understand vetur. There have been many such cases, and I am finally determined to solve this problem.
- Vscode editor, plug-in: vetur, eslint, prettier
- Vue cli environment, CLI plug-in: Babel, eslint
- Do I have to install the vetur plug-in, eslint plug-in and prettier plug-in in the vscode editor? How do they work together?
- In Vue cli development, NPM dependency packages as shown in the figure below will be installed. How do they work? Will they be repeated with plug-ins in vscode editor?
Plug in in vscode
Which vscode plug-ins should be installed when using vscode editor to develop Vue project?
Do you need to install the vetur plug-in?
The vetur plug-in must be installed. Its functions are as follows:
- Code highlighting
- Supports specific types of code snippets
- Emmet grammar
- Code syntax checking
- Style beautification
- Code tips
Mainstream framework support
For example: you type in the editor
el, a drop-down box will appear, displaying many element UI components. Why? Because the vetur plug-in supports the element UI framework, it will automatically find the element UI configuration in the package.json file of the project (provided that the
Do you need to install the eslint plug-in?
eslintIt is used to check the code syntax and do a small amount of code formatting. If you don’t need to do code checking in the vscode editor, you don’t need to install the eslint plug-in.
After installing the eslint plug-in, can you check the code?
No. The prerequisite for eslint to work is that it must be installed in the project or globally
eslintPart of the reason why NPM package is popular is that
babelSo you still need to install it
eslint-plugin-vueNPM package also needs to be installed. These two packages are about syntax and formatting rules. Then, you configure the. Eslintrc. JS file in the root of the project.
Do you need to install the prettier plug-in?
prettierIf you are familiar with prettier and have high format requirements, you can install it. I didn’t install it.
How does vetur, eslint and prettier work together and will they conflict?
- Vetur has built-in eslint plugin Vue, so if you don’t install eslint, you will do some code checking, but it’s not comprehensive. If you install eslint and related NPM packages, you will encounter the problem in my Preface: when I format the code, the configuration of. Eslintrc.js does not take effect, and the configuration of vetur does not know where to modify it? How to solve it? In the figure below, do not check the box indicated by the arrow. Because the default configuration of eslint plugin Vue in vetur is likely to conflict with your configuration of. Eslintrc. JS in the project.
- Vetur has built-in prettier, so if you don’t install prettier, you will also format the code. Prettier doesn’t need to be installed. The priority is the. Prettierc. JS file in the project.
Plug in in Vue cli
When building a project with Vue cli, if
@vue/cli-plugin-eslint, then the
eslint-plugin-vueWait for the NPM package. These installation packages will play the role of code escape and code checking when the project is running and packaged. They are also the dependent packages needed by the plug-ins of vetur and eslint in vscode when developing code.
- In the vscode editor, vetur must be installed, eslint should be installed as well, and prettier should not be installed. In addition, the eslint plugin Vue check in vetur is removed
- In Vue cli, be sure to install Babel and eslint plug-ins, because they will greatly facilitate your development and are necessary for eslint plug-ins in vscode editor.
This work adoptsCC agreementReprint must indicate the author and the link of this article