Configuration of eslint and beautification code in vscode and Vue cli development

Time:2021-6-15

preface

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.

environment

  • Vscode editor, plug-in: vetur, eslint, prettier
  • Vue cli environment, CLI plug-in: Babel, eslint

Two questions

  • 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?
    Configuration of eslint and beautification code in vscode and Vue cli development

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 editorel, 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 theelementNPM package).

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 globallyeslintNPM package.eslintPart of the reason why NPM package is popular is thatbabelSo you still need to install itbabel-eslintNPM package.eslint-plugin-htmlandeslint-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.

Configuration of eslint and beautification code in vscode and Vue cli development

  • 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

Configuration of eslint and beautification code in vscode and Vue cli development

When building a project with Vue cli, if@vue/cli-plugin-babeland@vue/cli-plugin-eslint, then thebabel-eslint, 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.

Summary

  • 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.

reference material

This work adoptsCC agreementReprint must indicate the author and the link of this article

Recommended Today

Five simple steps to master tensorflow tensor

Author | Orhan g. YAL ç ı nCompile VKSource: towards Data Science If you are reading this article, I believe we have similar interests and will engage in similar industries now / in the future. In this article, we will delve into the details of tensorflow tensor. We will cover all topics related to tensorflow’s […]