Resolving ESLint Parsing Error: The Keyword Import is Reserved

Problem Phenomenon and Background

During JavaScript development, many developers encounter the ESLint error "The keyword import is reserved." This error typically arises when using ES6 module syntax, especially in Sublime Text, while functioning correctly in other editors like Atom. This inconsistency indicates that the issue is not with the code itself but related to development environment configuration.

Root Cause Analysis

Through thorough investigation, the core issue is identified as a conflict in ESLint installation methods. When both global and local versions of ESLint are installed on a system, the SublimeLinter-contrib-eslint plugin may experience version recognition confusion. The globally installed ESLint might not support the latest ECMAScript syntax features, whereas the locally project-dependent ESLint version is configured with full parsing capabilities.

This conflict causes the linting tool in Sublime Text to misinterpret import/export and other ES6 module syntax as reserved keywords rather than valid module import statements. In contrast, Atom editor typically more accurately identifies the project's local ESLint configuration, thus avoiding the same parsing error.

Primary Solution

The most effective solution is to standardize the ESLint installation approach. It is recommended to uninstall the globally installed ESLint, ensuring the project uses only the locally installed version:

npm uninstall -g eslint

Then, verify that ESLint and related dependencies are correctly installed in the project:

npm install --save-dev eslint eslint-config-airbnb eslint-plugin-react

This approach ensures consistency between the development and build environments, preventing syntax parsing issues due to version discrepancies.

Supplementary Configuration Methods

In addition to resolving installation conflicts, ESLint parsing options can be configured to enhance support for ES6 module syntax:

Method 1: Set sourceType to module

Explicitly specify the source code type in the .eslintrc.js configuration file:

module.exports = {
    "extends": "airbnb",
    "plugins": ["react"],
    "parserOptions": {
        "sourceType": "module"
    }
};

Setting sourceType to "module" explicitly informs ESLint that the current code uses the ES6 module system, thereby correctly parsing import/export statements.

Method 2: Use babel-eslint parser

For projects using Babel transpilation, configure babel-eslint as the parser:

npm install babel-eslint --save-dev

Then specify it in the configuration file:

module.exports = {
    "extends": "airbnb",
    "plugins": ["react"],
    "parser": "babel-eslint"
};

babel-eslint can better handle Babel-transpiled code and experimental JavaScript features.

Environment Configuration Recommendations

To ensure development environment stability, the following best practices are recommended:

First, avoid installing linting tools globally; instead, install them locally per project. This practice ensures all team members use the same tool versions, reducing issues caused by environmental differences.

Second, when configuring SublimeLinter in Sublime Text, explicitly specify the path to the project's local ESLint executable. This can be achieved by adding the following configuration in project or user settings:

{
    "linters": {
        "eslint": {
            "executable": "./node_modules/.bin/eslint"
        }
    }
}

Finally, regularly update ESLint and related plugin versions to ensure support for the latest JavaScript language features. Additionally, unify .editorconfig configurations in team projects to further minimize behavioral differences between editors.

Conclusion

The ESLint "The keyword import is reserved" error typically stems from development environment configuration issues rather than code logic errors. By standardizing ESLint installation methods, appropriately configuring parsing options, and optimizing editor settings, this issue can be effectively resolved. These solutions are not only applicable to the specific error at hand but also provide a reusable methodology for handling similar development environment configuration problems.