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.

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

• ESLint extension: Applicable for linting HTML and Component (CMP) files. The ESLint extension checks your code and highlights any violations of the ESLint rules with squiggly lines.

• Stylelint extension: Applicable for linting Cascading Style Sheets (CSS), Sassy CSS (SCSS), and other stylesheets. The Stylelint extension highlights any violations of the Stylelint 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 and Stylelint configuration files 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 .eslintrc.yml and .stylelintrc.yml files at the root of your project directory.

  2. Disable rules 

  To disable specific rules in the .eslintrc.yml or .stylelintrc.yml files, 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. Lint your code 

  To lint your code based on the modified custom configuration files, send the files to the lint command. Depending on whether you’re using one or both of the configuration files, use these options.

  • --config-eslint
    Supplies the .eslintrc.yml file.

  • --config-stylelint
    Supplies the .stylelintrc.yml 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 .eslintrc.yml

  4. 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 .eslintrc.yml --format sarif

  Generate a CSV report.

  npx @salesforce-ux/slds-linter@latest report --config-eslint .eslintrc.yml --format csv

j

No Results

Search Tips:

• Please consider misspellings
• Try different search keywords

Get Started

Work With SLDS Linter

Scan Your Code

Use SLDS Linter With Custom Configuration Files

Interpret Your Results

Autofix Your Code

Reference

Get Support

Release Notes