Tag Archives: ESLint

[Solved] Vue eslint Error: Component name “*****“ should always be multi-word

Vue eslint Error: error “Component name “*****“ should always be multi-word”

Problems:

In the project created by Vue-cli, after the file is created and named, an error will be reported as “component name” ***** “should always be multi-word”;

The screenshot of error reporting is as follows:

Component name "******" should always be multi-word.eslintvue/multi-word-component-names

Reasons for error reporting:

The naming of components is not standardized. According to the official style guide of eslint, in addition to the root component (app.vue), the user-defined group

The part name should be composed of multiple words (using the naming method of big hump or connecting words with “-“) to prevent conflict with HTML tags;

 

The project created by the latest vue-cli uses the latest vue/cli-plugin-eslint plugin, which references the vue/multi-word-component-names rule after vue/cli-plugin-eslint v7.20.0.

The vue/multi-word-component-names rule has been referenced since vue/cli-plugin-eslint v7.20.0, so this error was determined at compile time.

Solution:

Scheme 1: Rename (valid for personal test)

Rename the name of the file

Modify the component name to multiple words, use hump naming method or connect words with “-“.

So the problem is solved~~~~

Examples are as follows:

Scheme 2: configure Vue config.js file (online method, invalid for my use)

Find vue.com in the root directory config. JS file (if not, create a new one), and add the following code in Vue config. JS file, add the following code

lintOnSave: false // Close eslint verification

Examples are as follows:

This scheme only does not report errors during compilation. If vscode + eslint is used, a red prompt will be marked in the file header, and the official does not recommend turning off the verification directly;

Configure Vue config. The method of JS file (scheme 2) generally can not solve the problem, so it is not recommended to use it

If you find that you haven’t solved the problem, you might as well try other solutions

Method 3: configuration eslintrc.js file (valid for personal test)

1. Turn off naming rules

Find it eslintrc.js file and adds such a sentence in rules

'vue/multi-word-component-names': "off" // Close name verification

It is suggested to use this method, which is more correct and reasonable;

Examples are as follows:

It is found that there is no error, and it can run normally ~ ~ ~

The above is to close the naming rules, and the component name will not be verified. The official recommended setting is to ignore the component name

2. Ignore individual component names

// Add component naming ignore rule
    "vue/multi-word-component-names": ["error",{
       "ignores": ["Home", "User"]//Component names to ignore
    }]

Recommended scheme 3, highly recommended!!!

For example:

Scheme 4:

The third scheme is to close and ignore the rule of component name; Ignore by component name

The fourth scheme is the closing rule according to the file.

Close a file naming rule verification

Found in the root directory eslintrc. JS file, (if not, create a new one (note that there is a point in front of the file))

Add the following code to the overrides of the file:

{  
 files: ['src/views/index.vue','src/views/**/index.vue'],   // Match index.vue in views and secondary directories
 rules: {
 'vue/multi-word-component-names': "off",
 } // assign rules to the files matched above
}

Where files: [] is used to match files, and the * sign represents all files. index. Vue can also be changed to * Vue, which is all Vue files in the matching directory

Document content:

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ?'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ?'warn' : 'off',
  },
  overrides: [
        //Here is the code added
        { 
          files: ['src/views/index.vue','src/views/**/index.vue'], // match index.vue in views and secondary directories
          rules: {
          'vue/multi-word-component-names': "off",
          } // Assign rules to the files matched above
        },
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}

Four schemes I suggest using scheme 3 and scheme 4. I don’t recommend using the method of scheme 2, which is common on the Internet. It’s not easy to use!

Very important notes: (the configuration file will take effect only after the project is restarted)

In a running project, to modify the configuration file, you must first delete the project in the terminal and click Ctrl + C twice to terminate the project, and then NPM run serve to re run the project. The modified configuration file can take effect

[Solved] ESLint: Parsing error: Unexpected token(prettier/prettier)

eslint HTML file error after introducing prettier: parsing error: unexpected token (prettier/prettier)

Cause of problem

The parser of prettier is not configured correctly. (I don’t know why it needs to be configured separately. It should have default configuration for all corresponding file types)

Solution

Modify .prettierrc.json , add overides , and configure the parser of HTML. Configurable item: Reference

{
  "printWidth": 120,
  "singleQuote": true,
  "bracketSpacing": true,
  "jsxBracketSameLine": true,
  "htmlWhitespaceSensitivity": "ignore",
  "overrides": [
    {
      "files": "*.html",
      "options": {
        "parser": "html"
      }
    }
  ]
}

[Solved] VUE eslint Error: Expected linebreaks to be ‘LF‘ but found ‘CRLF

The reason for this: under Windows environment, GIT will automatically identify the current system environment when we pull the code. Change the original (Linux/Unix) line feed to the corresponding system. When we submit the code, it will be converted to the remote system environment (Linux/Unix), and then install eslint. LF is used by default, so this error will be reported

Line feed format in various environments
window: CRLF (\R \n or ^m \n)
MAC: Cr (\R or ^m)
linux/Unix: LF (\n)

Solution:

1. Manually cut the CRLF at the bottom of the vscode file code into LF, which can only make eslint not report errors for the time being. But in fact, when we pull down again, GIT will automatically convert all files to CRLF, and there will still be an error message

2. Rule configuration in eslint. Turn off line feed verification in the window environment and let it automatically convert CRLF to LF when submitting (it seems that we haven’t fundamentally solved this problem)

"linkbreak-style":["off","windows"]

3. When git pulls the code, let git pull according to the line feed (LF) of the remote code, and no longer convert the format according to the system. At the same time, configure the line feed character of vscode as LF. My approach is to configure the pull format of GIT, delete the whole local original warehouse, and then pull a code remotely again. This is OK. The command is as follows:

git config –global core. Autocrlf has three configurations (depending on the situation, I chose input)

True: automatically convert CRLF to LF when pushing, and CRLF when pulling (this configuration requires configuring eslint to turn off line break verification in window environment)

git config --global core.autocrlf true

Input: CRLF is automatically converted to LF when pushing, but LF is not automatically converted to CRLF when pulling (this configuration does not need to configure eslint, and the code format is consistent with that of the remote. I use this)

git config --global core.autocrlf input

False: no matter push or pull, the original file is what it is

git config --global core.autocrlf false

Other configurations:

1. Reject submission of files containing mixed line breaks

git config --global core.safecrlf true

2. Allow submission of files containing mixed line breaks

git config --global core.safecrlf true

3. Warn when submitting files containing mixed line breaks

git config --global core.safecrlf warn

vscode deployment:

[Solved] error Strings must use singlequote, error Extra semicolon、error Unexpected trailing comma

After formatting the code, single quotation marks will be changed into double quotation marks, and a comma will be added at the end. The semicolon at the end will lead to three kinds of errors:

1 Strings must use singlequote Quotes – double quotes
2 Extra semicolon semi — semicolon at the end
3 Error unexpected trailing comma comma Dangle — comma

Solution:

[Solved] ESLint error: Newline required at end of file but not found (eol-last)

When verifying Vue projects with eslint, the following warnings were found:

error: Newline required at end of file but not found (eol-last)

The results are as follows:

I found that the online solution is to insert a blank line after the warning code. I think this is very bad.

[solution]
1. Insert a configuration file .Editorconfig , in the project_final_Newline = true is changed to false

2. Cancel the verification of the last rule in . Eslintrc. JS

recompile without warning.

Vscode save Vue format eslint check error [How to Solve]

1. Problem description

When writing items with Vue, the eslint syntax check was turned on as usual, but various errors, single and double quotation marks and function spaces were found after formatting and saving with vscode. Because the formatting plug-in of vscode itself does not match eslint. Therefore, some configurations need to be modified to achieve the effect of configuration. There are two ways to modify.

2. Solution 1

Since the vsdoe formatting does not match eslint, we will modify the rules of vscode. Create a file .Pretierrc under the current project and modify relevant configuration items. Here, we only modify single and double quotation marks and semicolons.

 {
   "semi": true,
   "singleQuote": true
 }

3. Solution 2

Modify the style location where you save Vue formats:

3.1 open configuration item

3.2 find the corresponding configuration item and modify the corresponding value

"[vue]": {
        //"editor.defaultFormatter": "esbenp.prettier-vscode" //before fixing,
         "editor.defaultFormatter": "octref.vetur" // Use vetur formatting rules, after modification
    },

3.3 setting vetur rules

"vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned" //Attribute forced line alignment
         },
         "prettier": {
             "semi": true, // keep the semicolon
             "singleQuote": true, // true uses single quotes
        },
    },

[Solved] Vue2.0 Error: Syntax Error: TypeError: eslint.CLIEngine is not a constructor

Solution:
ERROR Failed to compile with 1 error
Syntax Error: TypeError: eslint.CLIEngine is not a constructor
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
Open package.json and delete the following code and re-run

Or change lintOnSave to false in the vue.config.js file

[Solved] Vue Project Error: Arrow function should not return assignment

Vue item error arrow function should not return assignment

Problem source

Recently, there was an error arrow function should not return assignment

when creating a startup Vue project. In fact, there is more than one error, but the final reason is that the eslint check code is referenced.

Solution:

1. Modify the code to comply with the rules of eslint (this method does not take effect here)
add {} to the code after the arrow; however, it reports this error again (I don’t know how to solve this error up to now)

2. Remove eslint
and comment ‘standard’
in the. Eslintrc.js file under the project root directory

The body of a for-in should be wrapped in an if statement to filter unwanted properties from the pro

In ESLint mode, for in will report an error when traversing the object, which can be solved as follows:

let  val  = { shu: [ 1 , 2 , 3 ]} ;
for  (let  item  in  val) {
  if  (val.hasOwnProperty(item)) { 
    console.log(item);
  }
}

Because we should judge whether the object has its own properties (non-inheritance) before traversing an object. If the object is an empty object, then there is no need to traverse it to improve the efficiency of the code.