The vue startup project eslint cannot be started

When using Vue to start a project, you may encounter the problem that eslint cannot start. This may be due to incorrect configuration or incorrect dependencies in the project. This article will introduce some ways to solve this problem.

Why use eslint

eslint is a widely used JavaScript code specification tool that can check possible errors and non-standard formats in the code, thereby improving code quality and maintainability . In a Vue project, eslint can not only check JavaScript code, but also templates and styles in Vue components.

In the Vue CLI, eslint is enabled by default, and the inspection rules and plug-ins can be modified through the configuration file. However, if eslint fails to start, the project may have some hard-to-find errors and performance issues.

Check whether eslint is enabled

Before starting the Vue project, you first need to check whether eslint is enabled. In the root directory of the project, you can see a configuration file named "eslintrc.js". Check the contents of this file to confirm whether eslint has been enabled.

If you do not have this file, you can manually install and enable eslint through the following command:

npm install eslint --save-dev

After installation, create a file named "eslintrc.js" in the root directory of the project, And add the following content:

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    // 检查规则
  }
}

The "extends" attribute here refers to inherited rules and plugins. Through this attribute, you can choose to use some already created plug-ins and rule sets, or you can customize the rules. For example, the two rule sets "plugin:vue/essential" and "eslint:recommended" are selected here.

When starting the Vue project, if eslint has been enabled, you can see output similar to the following:

✔  1.0.0
[wait]  Compiling...
[done]  Compiled successfully in 1234ms

> Listening at http://localhost:8080

At this time, eslint has been started and the code is checked. However, if eslint fails to start, you will receive an error message similar to the following:

Error: Failed to load plugin 'vue' declared in '.eslintrc.js': Cannot find module 'eslint-plugin-vue'

This error message indicates that the declared plug-in was not found. Next, methods to solve this problem will be introduced.

Solve the problem that eslint cannot start

1. Check dependencies

If eslint cannot start, it may be due to incorrect dependencies. In the root directory of the Vue project, you can see a file named "package.json". Check the contents of this file to confirm whether the plug-ins and dependencies installed in the project are correct.

For example, if the above error message prompts that the "eslint-plugin-vue" plug-in cannot be found, then you need to add the following content to the "package.json" file:

"devDependencies": {
  "eslint-plugin-vue": "^6.2.2"
}

Must be used here "devDependencies" attribute to specify the plugin, because eslint is only used in development mode.

After the installation is complete, restart the Vue project. If you have problems with other dependencies, you can try similar solutions.

2. Check the eslint configuration file

If the dependencies are correct, you also need to check whether the eslint configuration file is correct. In the root directory of the project, you can see a configuration file named "eslintrc.js". Check the contents of the file for syntax errors or logical problems.

For example, if eslint reports a syntax error similar to the following:

error: Parsing error: Unexpected token < in .vue file

then it may be because the parser for the Vue file is not correctly specified in the configuration file. The following configuration can be used:

module.exports = {
  // ...
  parserOptions: {
    parser: 'babel-eslint',
    ecmaVersion: 2020,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
      experimentalObjectRestSpread: true,
      globalReturn: false,
      impliedStrict: true
    }
  },
  // ...
}

The "parserOptions" attribute here is used to specify the configuration of the parser. If you need to use the special syntax of Vue files, you also need to add the appropriate plug-in. For example:

module.exports = {
  // ...
  extends: [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  plugins: [
    'vue'
  ],
  // ...
}

The "plugins" attribute here is used to specify the eslint plug-in that needs to be used. Multiple plug-ins can be added and sorted according to dependencies.

3. Specify eslint command

In Vue CLI, you can use the "npm run lint" command to start eslint. But sometimes, there may be problems with this command, such as eslint failing to start or failing to find files that need to be checked.

This problem is usually caused by differences in command line tools and operating systems. Under Windows systems, you may need to specify the absolute path of the eslint command to start it correctly. For example:

{
  // ...
  "scripts": {
    "lint": "C:\Users\username\node_modules\.bin\eslint ."
  }
}

The "lint" command here uses the absolute path to specify the eslint command, which can avoid the problem that the command line tool cannot find the command.

Summary

In the Vue project, eslint is a very useful tool to ensure code quality and maintainability. However, if eslint fails to start, it may cause some hard-to-find problems.

To solve this problem, this article introduces some possible causes and solutions. It's important to note that each Vue project has its own dependencies and configuration that may need to be adjusted for specific situations. I hope this article can help readers successfully start eslint and improve code quality and maintainability.

The above is the detailed content of The vue startup project eslint cannot be started. For more information, please follow other related articles on the PHP Chinese website!