---
schema_version: "1"
id: 0d0a607b210ac3fdb01dd0059d63b689c9d05381e8588ded7eaaa018e7acbf15
title: Use SLDS Linter with Custom Configuration Files
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lwc/slds_linter/guides/use/use-custom-config-files.md
canonical_url: https://developer.salesforce.com/docs/platform/slds-linter/guide/use-custom-config-files.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: fd367864339b9af7abe3d6e1ed23658045d1a89b1eb13e2ef9b123dac80f00d5
products:
  - SLDS Linter
  - lwc
---
# Use SLDS Linter with Custom Configuration Files

You can enable or disable the rules used by SLDS Linter. To do so, use the `emit` command to generate custom configuration files and edit them to disable the rules that you don’t want to run. Then, use the edited files to run SLDS Linter and generate reports.

## (Optional) Install Recommended Extensions

To enhance your linting and error analysis experience while using custom configuration files, we recommend that you install this additional extension.
</br> By default, the linting issues present in the code aren’t highlighted in the custom configuration files. Installing this extension makes it easier to locate these issues, as they’re highlighted with squiggly lines.

[ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint): Applicable for linting HTML, Component (CMP), and Cascading Style Sheet (CSS) files. The ESLint extension checks your code and highlights any violations of the ESLint rules with squiggly lines.

## Set Up Custom Configuration Files

Follow these steps to set up your custom configuration files.

### 1. Export custom configuration files

To export the ESLint configuration file used by the SLDS Linter Command Line Interface (CLI), run the `emit` command.

```
npx @salesforce-ux/slds-linter@latest emit
```

This command creates or overwrites the existing `.eslint.config.mjs` file at the root of your project directory.

### 2. (Optional) Configure additional plug-ins

To use ESLint along with other plug-ins, modify the default configuration in the `.eslint.config.mjs` file. Import each additional plug-in that you want to use and edit the `extends` property to load the plug-in’s configuration.  
For example, to use the CSS plug-in, add the CSS plug-in configuration to the `.eslint.config.mjs` file.

#### Before Example

This shows the `.eslint.config.mjs` file containing the default configuration that is emitted.

```
// eslint.config.mjs

import { defineConfig } from "eslint/config";
import { sldsCssPlugin } from"@salesforce-ux/eslint-plugin-slds";
export default defineConfig([
  {
    plugins: {
      ...sldsCssPlugin()
    },
    extends: ["@salesforce-ux/slds/recommended"]        ....
  },
]);
```

#### After Example

This shows the `.eslint.config.mjs` file with the CSS plug-in configuration included.

```
// eslint.config.mjs

import { defineConfig } from 'eslint/config';
import css from '@eslint/css';
import { sldsCssPlugin }
from '@salesforce-ux/eslint-plugin-slds';

export default defineConfig([
  {
   // Define the plug-ins you are using
   plugins: {
      css: css,
      ...sldsCssPlugin()
    }
   // Extend plug-in configurations
    extends: ["@salesforce-ux/slds/recommended", "css/recommended"]
  }
]);
```

### 3. Disable rules

To disable specific rules in the `.eslint.config.mjs` file, comment the rule entry by using `//`.

#### Before Example

```
"@salesforce-ux/slds/enforce-bem-class": "error"

"@salesforce-ux/slds/no-deprecated-classes-slds2": "error"

"@salesforce-ux/slds/modal-close-button-issue": "error"
```

#### After Example

```
// "@salesforce-ux/slds/enforce-bem-class": "error"

// "@salesforce-ux/slds/no-deprecated-classes-slds2": "error"

"@salesforce-ux/slds/modal-close-button-issue": "error"
```

<!--
### 3. Define CSS properties

To validate specific CSS properties for each Stylelint rule, go to the `.stylelint.config.mjs` configuration file and use the `propertyTargets` option to specify 1 or more CSS properties for each rule. This is an optional configuration to list a few CSS properties. By default, all ‌CSS properties are validated.

#### Example

For the `no-hardcoded-values-slds2` rule, the `propertyTargets` option is set to validate two CSS properties: `color` and `background-color`.

```
//.sstylelint.config.mjs

"slds/no-hardcoded-values-slds2":
[
true,
{
"severity": "warning",
"propertyTargets": ["color", "background-color"]
}
]
```
-->

### 4. Lint your code

To lint your code based on the modified custom configuration file, use the `lint` command with this argument.

`--config-eslint`  
Supplies the `.eslint.config.mjs` file.

#### Example

Lint HTML and CMP files based on a ESLint configuration file.

```
npx @salesforce-ux/slds-linter@latest lint "**/{aura,lwc}/**/*.{html,cmp}" --config-eslint .eslint.config.mjs
```

### 5. Generate reports

To generate reports containing all the lint issues, use the `report` command with the `--format` option.

#### Example

Generate a SARIF report.

```
npx @salesforce-ux/slds-linter@latest report --config-eslint .eslint.config.mjs --format sarif
```

Generate a CSV report.

```
npx @salesforce-ux/slds-linter@latest report --config-eslint .eslint.config.mjs --format csv
```