To tell your development environment what JavaScript version you expect, you must configure the central compiler engine. This configuration directly changes how your editor reads your modern features.
Open your workspace configuration file named tsconfig.json.
Locate or add the compilerOptions property inside the root object.
Define the target property to specify your desired ECMAScript version, such as "ES5", "ES2015", or "ES2022".
Define the matching lib array to match your target environment, preventing runtime errors on global variables.
JSON
{
"compilerOptions": {
"target": "ES5",
"lib": ["DOM", "ES5"]
}
}
The Core Pitfalls and Structural Limitations
Setting the target version creates a major false sense of security. The language server will not flash red error markers on your screen for using advanced language structures, and here is why:
The compiler is designed to downlevel compile modern syntax rather than block it.
If you write an advanced arrow function or async/await block while targeting ES5, the engine seamlessly converts it to older equivalents behind the scenes without raising any compiler alerts.
The system only triggers errors if you reference newer global objects like Promise or Map without providing their type declarations in your lib setup.
Your editor workspace will remain completely silent about syntax native to higher ES specifications because TypeScript views modern syntax as universally valid input code.
The Ultimate Solution for Syntax Restrictions
To truly enforce structural syntax restrictions based on your target runtime environment, you must delegate the parsing checks to a specialized linting system.
Integrate ESLint into your project alongside the specialized eslint-plugin-compat or eslint-plugin-es-x packages.
Configure your linting rules to read your browserslist configuration or explicitly state your allowed language version.
The dedicated linter will read the modern structures, evaluate them against your rule matrix, and actively flag disallowed syntax right inside your code window.
Enable your editor's local ESLint extension to feed those syntax flags back into your active interface view.
JavaScript
// eslint.config.js example using es-x
import esx from "eslint-plugin-es-x";
export default [
{
plugins: { "es-x": esx },
rules: {
"es-x/no-arrow-functions": "error",
"es-x/no-async-functions": "error"
}
}
];
Sumita
Web Developer
