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.
Follow these steps to set up your custom configuration files.
To export the ESLint and Stylelint configuration files used by the SLDS Linter Command Line Interface (CLI), run the emit
command.
This command creates or overwrites the .eslint.config.mjs
and .stylelint.config.mjs
files at the root of your project directory.
To disable specific rules in the .eslint.config.mjs
or .stylelint.config.mjs
files, comment the rule entry by using #
.
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.
For the no-hardcoded-values-slds2
rule, the propertyTargets
option is set to validate two CSS properties: color
and background-color
.
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.eslint.config.mjs
file. -
--config-stylelint
Supplies the.stylelint.config.mjs
file.
Lint HTML and CMP files based on a ESLint configuration file.
To generate reports containing all the lint issues, use the report
command with the --format
option.
Generate a SARIF report.
Generate a CSV report.