Install ESLint Rules for Mobile Lightning Web Components

We’ve created ESLint rules to help you develop code that works with mobile and offline Lightning web components. You can install them on your development machine and run them on your source code.

The ESLint rules flag violations for:

Apex usage
Offline GraphQL feature limitations
Offline GraphQL hard limits

The ESLint rules are documented in the ESLint Plugin LWC Mobile GitHub repository.

The ESLint rules are a plugin that you install using a package manager, such as NPM or Yarn.

Use Terminal (or your command line tool of choice) to run all commands from the root directory of your Lightning web components project.

Note

Install the node project dependencies.

NPM

1npm install --save-dev @salesforce/eslint-plugin-lwc-mobile

YARN

1yarn add --dev @salesforce/eslint-plugin-lwc-mobile

The default configurations use the flat config format, which is compatible with ESLint 9 and later. To integrate recommendedConfigs into your flat configuration, you should spread this collection of preset configurations into your configuration array.

eslint.config.js

1// eslint.config.js
2const { defineConfig } = require("eslint/config");
3const lwcMobilePlugin = require("@salesforce/eslint-plugin-lwc-mobile");
4
5module.exports = defineConfig([
6    {
7        plugins: {
8            "@salesforce/lwc-mobile": lwcMobilePlugin,
9        },
10        extends: [...lwcMobilePlugin.recommendedConfigs],
11    },
12]);

eslint.config.mjs

1// eslint.config.mjs
2import js from '@eslint/js';
3import lwcMobilePlugin from "@salesforce/eslint-plugin-lwc-mobile";
4
5export default [
6    { plugins: { "@salesforce/lwc-mobile": lwcMobilePlugin } },
7    js.configs.recommended,
8    ...lwcMobilePlugin.recommendedConfigs,
9];

ESLint 8 and earlier (Legacy Config)

Configurations for legacy ESLint now use extensions with the -legacy suffix. For instance, to enable static analysis on all .js files within your Lightning Web Components using the eslint-plugin-lwc-mobile plugin, extend theplugin:@salesforce/lwc-mobile/recommended-legacy ESLint configuration within your .eslintrc.json file.

1{
2    "extends": ["eslint:recommended", "plugin:@salesforce/lwc-mobile/recommended-legacy"]
3}

Use ESLint Rules in Visual Studio Code

The ESLint rules for warnings against Lightning web components are displayed in Visual Studio (VS) Code where your code violates them. The rules map to distortions that affect your code. The popup for a rule violation includes a link to documentation for the rule.