What to do if vue reports space error

Solution to vue space error: 1. Find the webpack.base.conf.js file in the build directory and unregister the rules in it; 2. Re-execute "npm run dev"; 3. Open test .eslintrc.js file in the directory, add custom rules; 4. Open rules, manually add "no-mixed-spaces-and-tabs", then define it as 0, and close the rules.

#The operating environment of this tutorial: Windows 10 system, Vue version 3, Dell G3 computer.

What should I do if vue reports a space error?

vue Space Error

I built a vue project. When configuring the path, various errors appeared one after another. The most common ones were some writing methods. For example, spaces, indents, and various parentheses. As a result, I compared them sentence by sentence. The modification was quite time-consuming and inefficient. I didn’t write a single routing configuration all morning.

The main error reports are as follows:

Intercepted a section of common error reports, and selected one of them:

Expected indentation of 4 spaces but found 1 tab

Translated, it means: 4 spaces were expected to be indented, but 1 tab was found. This means that when Vue detects writing rules, it only recognizes spaces and does not recognize the indentation of tabs. At this time, you have to modify the page content and replace the tabs with spaces, which is more troublesome. Then you can search for the reasons and find them. The solution is as follows:

First, find the webpack.base.conf.js file in the build directory, and log out this section of the rules:

Save, and then npm again Run dev:

Although the error report disappears, the disadvantage of doing so is that it forcibly stops all error checking functions, and many grammatical errors cannot be detected. In the early stage, this is not recommended, and it is even more detrimental to the code. readable lines and regularity. Then we need to find another way, just change the configuration in the rules.

Second, this uses another configuration file: the .eslintrc.js file in the test directory (recommended)

Add your custom rules, and then recommend that everyone familiarize themselves with ESLint rules

Rules

Some rules can be set in the configuration file.

There are three error levels of rules:

“off” 或者 0：关闭规则。
“warn” 或者 1：打开规则，并且作为一个警告（不影响exit code）。
“error” 或者 2：打开规则，并且作为一个错误（exit code将会是1）。

In order to give you a better understanding of the rules, ESLint classifies them.

All rules are disabled by default. In the configuration file, use "extends": "eslint:recommended" to enable recommended rules and report some common problems. These recommended rules are marked with a tag below.

Possible Errors are compared with the custom rule configuration

Take the error mentioned above as an example, it is related to the space indentation, find the relevant rule prompt:

Then go to rules , manually add 'no-mixed-spaces-and-tabs', then define it as 0, close the rule

// 在这里添加自定义规则
'rules': {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// 禁止空格和 tab 的混合缩进
'no-mixed-spaces-and-tabs'：0，
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
}

Okay, save and refresh, you will find that the error is no longer prompted. The advantage of this is, Select the rules that need to be ignored

Recommended learning: "vue.j Video Tutorial"

The above is the detailed content of What to do if vue reports space error. For more information, please follow other related articles on the PHP Chinese website!