Complete Guide to Disabling ESLint in Vue CLI Projects

The Role of ESLint in Vue Projects and Disabling Requirements

ESLint, as a JavaScript code quality checking tool, is integrated by default in Vue CLI generated projects to ensure code style consistency and error prevention. However, in certain development scenarios, developers may need to temporarily or permanently disable ESLint checking, such as during rapid prototyping, legacy code migration, or specific build requirements. Understanding how to properly disable ESLint is crucial for flexible control over project configuration.

Vue CLI Project Structure Analysis

Vue CLI is built on the webpack build system, with configuration files containing preLoaders configuration blocks specifically designed to perform code checking before compilation. In early versions of Vue CLI templates, ESLint was integrated through the following configuration:

preLoaders: [
  {
    test: /\.vue$/,
    loader: 'eslint',
    include: projectRoot,
    exclude: /node_modules/
  },
  {
    test: /\.js$/,
    loader: 'eslint',
    include: projectRoot,
    exclude: /node_modules/
  }
]

This configuration ensures all .vue and .js files undergo ESLint checking before compilation, but removing the loader: 'eslint' line causes compilation failure due to broken webpack configuration structure.

Optimal Solution: Removing preLoaders Configuration Block

According to Vue's official template design principles, the most thorough method to disable ESLint is to completely remove the preLoaders configuration block. Vue's starter projects are built using templating languages, with {{#lint}} conditional blocks in the configuration controlling the generation of ESLint-related configurations. By deleting the entire preLoaders section, you can:

• Completely eliminate ESLint checking impact on the build process
• Avoid syntax errors caused by partial configuration modifications
• Maintain the integrity of webpack configuration structure

Specific steps: Locate the build/webpack.base.conf.js file, find and delete the entire preLoaders array definition containing ESLint loader.

Alternative Solutions for Vue CLI 3+ Versions

For projects using Vue CLI 3 and above, due to the zero-configuration architecture, methods to disable ESLint differ:

Configuring lintOnSave Option

Set in the vue.config.js file:

module.exports = {
  lintOnSave: false
}

This configuration only takes effect when the @vue/cli-plugin-eslint plugin is installed, disabling real-time lint checking during development.

Uninstalling ESLint Plugin

Execute command to completely remove ESLint-related functionality:

npm remove @vue/cli-plugin-eslint

This method thoroughly removes all ESLint dependencies and configurations, suitable for projects no longer requiring code checking.

Skipping ESLint Plugin During Build

Modify build command in package.json scripts:

"scripts": {
    "build": "vue-cli-service build --skip-plugins @vue/cli-plugin-eslint"
}

This method allows temporary disabling of ESLint during build while retaining checking functionality during development.

Solution Comparison and Selection Recommendations

Different disabling methods suit various development scenarios:

• Complete preLoaders removal: Suitable for traditional Vue CLI projects requiring complete ESLint disabling
• Configuring lintOnSave: Suitable for Vue CLI 3+ projects needing only development-time checking disabled
• Uninstalling plugin: Suitable for projects certain they no longer need ESLint functionality
• Build-time skipping: Suitable for scenarios requiring different checking strategies between development and production environments

Considerations and Best Practices

When disabling ESLint, consider the following factors:

• Code quality maintenance: Disabling ESLint may impact code quality and team collaboration standards
• Configuration backup: Backup important configuration files before modification
• Version compatibility: Configuration methods differ across Vue CLI versions
• Progressive disabling: Consider using .eslintignore file to partially disable checking for specific files

Conclusion

Disabling ESLint in Vue CLI projects requires selecting appropriate methods based on project version and specific requirements. For traditional projects, removing the preLoaders configuration block is the most direct and effective solution; for modern Vue CLI 3+ projects, it can be achieved through configuration options or plugin management. Understanding the principles and applicable scenarios of various methods helps maintain code quality while ensuring development efficiency.