Use SLDS Linter Rules with Salesforce Code Analyzer

To set up and use SLDS Linter rules with Salesforce Code Analyzer, complete these prerequisites and follow these steps.
By default, Code Analyzer is configured to include rules from the ESLint configuration. The SLDS Linter rules are part of the default ESLint configuration in Code Analyzer and have the tag SLDS. To view the SLDS rules supported in Code Analyzer, run this command:

  1. Install Salesforce CLI using one of the methods listed in Install Salesforce CLI in the Salesforce CLI Setup Guide.

  2. Install the Code Analyzer CLI plug-in by running this command in a terminal (macOS and Linux) or a command prompt (Windows).

    For more information about the CLI and Code Analyzer, see Use CLI Commands to Analyze Your Code in the Salesforce Code Analyzer Developer Guide.

    Alternatively, install the Code Analyzer VS Code Extension.
    See Use the VS Code Extension to Analyze Your Code in the Salesforce Code Analyzer Developer Guide.

  1. Verify that the Code Analyzer plug-in is installed by running the sf plugins command.

    The output shows the core and user plug-ins currently installed in Salesforce CLI. If Code Analyzer is installed, an entry like this one appears in the output. Depending on your environment, the returned Code Analyzer version can vary.

  2. Run Code Analyzer to analyze your files using the sf code-analyzer run command. Add flags to analyze a single file, multiple files or all files in your current directory.
    For detailed information about the code-analyzer run command, see code-analyzer Commands.

    Analyze the hardcoded-values.css file using all the ESLint rules that have the tag slds.

    Analyze all the files in the ./small-set directory using the ESLint rules that have the tag slds.

    Analyze all the files in an entire directory using the ESLint rules that have the tag slds.

After the analysis is completed, Code Analyzer displays the analysis results in a human-readable format. The results contain several details including the severity of the violation, the name of the rule associated with the violation and so on. To interpret the various details that are displayed in the results, see Use CLI Commands to Analyze Your Code in the Salesforce Code Analyzer Developer Guide.
To learn about the SLDS Linter rules and understand how to fix the violations, see SLDS Linter Rules.