I am fairly new to ESLint, Prettier, and Babel; still learning how they work together. I am using Visual Studio Code 1.96.4, with ESLint and Prettier extensions.

In one of my javascript files, I have an import statement with a type assertion. For example:

import * as manifest from './package.json' with { type: 'json' };
                                           ~~~~

My IDE is telling me that ESLint has an issue with the above import statement:

Parsing error: Unexpected token with | eslint

I have an eslint.config.js file, which exports an eslint.Linter.Config array that specifies my own config object (which has language options and rules), followed by a recommended config from @eslint/js, and the ESLint Prettier plugin recommended config.

import pluginJs from '@eslint/js';
import eslintPluginPrettier from 'eslint-plugin-prettier/recommended';
import globals from 'globals';

/** @type {import('eslint').Linter.Config[]} */
export default [
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.jest
      },
      ecmaVersion: 2024,
      sourceType: 'module'
    },
    rules: {
      ...
    }
  },
  pluginJs.configs.recommended,
  eslintPluginPrettier    // <-- Removing this fixes the problem, but then am I still running Prettier at lint-time?
];

These are the installed packages that (I think?) are relevant:

"devDependencies": {
  "@babel/core": "^7.26.0",
  "@babel/eslint-parser": "^7.26.5",
  "@babel/plugin-syntax-import-assertions": "^7.26.0",
  ...
  "@eslint/eslintrc": "^3.2.0",
  "@eslint/js": "^9.18.0",
  ...
  "eslint": "^9.18.0",
  "eslint-config-prettier": "^10.0.1",
  "eslint-plugin-prettier": "^5.2.3",
  ...
  "prettier": "^3.4.2",
  ...
},

I also have a .prettierrc file that is a simple JSON object with only rules in it, no plugins or anything. And I don't know if .babelrc has anything to do with this?

How can I make the IDE error go away, while still enforcing both ESLint and Prettier rules?

I am fairly new to ESLint, Prettier, and Babel; still learning how they work together. I am using Visual Studio Code 1.96.4, with ESLint and Prettier extensions.

In one of my javascript files, I have an import statement with a type assertion. For example:

import * as manifest from './package.json' with { type: 'json' };
                                           ~~~~

My IDE is telling me that ESLint has an issue with the above import statement:

Parsing error: Unexpected token with | eslint

I have an eslint.config.js file, which exports an eslint.Linter.Config array that specifies my own config object (which has language options and rules), followed by a recommended config from @eslint/js, and the ESLint Prettier plugin recommended config.

import pluginJs from '@eslint/js';
import eslintPluginPrettier from 'eslint-plugin-prettier/recommended';
import globals from 'globals';

/** @type {import('eslint').Linter.Config[]} */
export default [
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.jest
      },
      ecmaVersion: 2024,
      sourceType: 'module'
    },
    rules: {
      ...
    }
  },
  pluginJs.configs.recommended,
  eslintPluginPrettier    // <-- Removing this fixes the problem, but then am I still running Prettier at lint-time?
];

These are the installed packages that (I think?) are relevant:

"devDependencies": {
  "@babel/core": "^7.26.0",
  "@babel/eslint-parser": "^7.26.5",
  "@babel/plugin-syntax-import-assertions": "^7.26.0",
  ...
  "@eslint/eslintrc": "^3.2.0",
  "@eslint/js": "^9.18.0",
  ...
  "eslint": "^9.18.0",
  "eslint-config-prettier": "^10.0.1",
  "eslint-plugin-prettier": "^5.2.3",
  ...
  "prettier": "^3.4.2",
  ...
},

I also have a .prettierrc file that is a simple JSON object with only rules in it, no plugins or anything. And I don't know if .babelrc has anything to do with this?

How can I make the IDE error go away, while still enforcing both ESLint and Prettier rules?

• javascript
• visual-studio-code
• eslint
• prettier

2 Answers 2

You've already installed @babel/plugin-syntax-import-assertions, but you also need to make ESLint use @babel/eslint-parser with the correct configuration:

import pluginJs from '@eslint/js';
import eslintPluginPrettier from 'eslint-plugin-prettier/recommended';
import globals from 'globals';

/** @type {import('eslint').Linter.Config[]} */
export default [
  {
    parser: '@babel/eslint-parser',  // Set Babel as the parser
    parserOptions: {
      requireConfigFile: false,  // Prevents needing a separate Babel config file
      babelOptions: {
        plugins: ['@babel/plugin-syntax-import-assertions'],  // Ensure the plugin is enabled
      },
    },
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.jest,
      },
      ecmaVersion: 2024,
      sourceType: 'module',
    },
    rules: {
      // Your custom rules
    },
  },
  pluginJs.configs.recommended,
  eslintPluginPrettier,  // Ensures Prettier runs as well
];

As per enzo's excellent answer, I had to tell ESLint to use Babel as my parser. I was also able to continue using my existing .babelrc file. I had to restart VSCode to get the new lint parser options working. Also, had to set Prettier option endOfLine to auto to essentially ignore CR (carriage-return) errors.

import babelParser from '@babel/eslint-parser';  // Import parser.

...

export default [
{
  languageOptions: {
    globals: {
      ...globals.browser,
      ...globals.jest,
      ...globals.node
    },
    ecmaVersion: 2024,
    parser: babelParser,  // Assign parser.
    parserOptions: {
      requireConfigFile: false,
      sourceType: 'module',
      babelOptions: {
        babelrc: true  // Continue using Babel config file.
      }
    },
    sourceType: 'module'
  },