@salesforce-ux/slds-linter 0.1.3-alpha.0 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -2,48 +2,45 @@
|
|
|
2
2
|
|
|
3
3
|
## Overview
|
|
4
4
|
|
|
5
|
-
SLDS Linter provides custom linting rules
|
|
5
|
+
SLDS Linter provides custom linting rules built for Salesforce Lightning Design System 2 (SLDS 2 beta). Lint your components against SLDS 2 best practices to ensure they adhere to the latest styling standards.
|
|
6
|
+
|
|
7
|
+
SLDS Linter checks your Aura and Lightning web components’ CSS and markup files to identify styling issues that you can fix for SLDS 2 compatibility. SLDS Linter helps you maintain consistent styling and identify common issues with custom Lightning components.
|
|
6
8
|
|
|
7
9
|
## Features
|
|
8
10
|
|
|
9
|
-
-
|
|
10
|
-
The utility supports linting for two types of Salesforce Lightning components:
|
|
11
|
+
SLDS Linter is a custom-built linting solution based on open source [Stylelint](https://stylelint.io/) and [ESLint](https://eslint.org/) projects. It supports linting for both types of Lightning components.
|
|
11
12
|
|
|
12
|
-
|
|
13
|
-
- LWC Components (.html): Linting is applied to Lightning Web Components.
|
|
14
|
-
- Aura Components (.cmp): Linting is applied to Aura Components.
|
|
13
|
+
SLDS Linter runs on these types of files.
|
|
15
14
|
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
- Lightning web component *.html markup and Cascading Style Sheet (CSS) files
|
|
16
|
+
- Aura component *.cmp markup and CSS files
|
|
18
17
|
|
|
19
|
-
|
|
18
|
+
You can run SLDS Linter in a terminal window or in Visual Studio (VS) Code. We recommend running in VS Code.
|
|
20
19
|
|
|
21
|
-
|
|
20
|
+
Follow these instructions to integrate SLDS Linter into your project.
|
|
22
21
|
|
|
23
|
-
|
|
22
|
+
---
|
|
24
23
|
|
|
25
|
-
|
|
24
|
+
## Prerequisites
|
|
26
25
|
|
|
27
|
-
|
|
26
|
+
Install these items if they aren't installed already.
|
|
28
27
|
|
|
29
|
-
|
|
30
|
-
-
|
|
31
|
-
-
|
|
32
|
-
- The
|
|
28
|
+
- [VS Code](https://code.visualstudio.com/)
|
|
29
|
+
- [SARIF Viewer](https://marketplace.visualstudio.com/items?itemName=MS-SarifVSCode.sarif-viewer) VS Code extension. This extension enables you to view SLDS Linter violation reports.
|
|
30
|
+
- [Node.js](https://nodejs.org/)
|
|
31
|
+
- The minimum supported version is **v18.4.0**
|
|
32
|
+
- We recommend using the latest [Active LTS](https://nodejs.org/en/about/previous-releases) version of Node.js.
|
|
33
33
|
|
|
34
|
-
|
|
35
|
-
To enhance your linting and error analysis experience, consider installing the following VSCode extensions:
|
|
34
|
+
## Install SLDS Linter
|
|
36
35
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
These extensions will significantly improve your development workflow and make it easier to navigate and address linting issues.
|
|
36
|
+
1. Open your project in VS Code.
|
|
37
|
+
2. In a VS Code terminal, enter `npx @salesforce-ux/slds-linter@latest lint` to run the installer.
|
|
38
|
+
3. To install the SLDS Linter package, type `y` .
|
|
41
39
|
|
|
40
|
+
The SLDS Linter package installs in a temporary location on your system.
|
|
42
41
|
|
|
43
|
-
|
|
42
|
+
For more information about `slds-linter` commands, run `npx @salesforce-ux/slds-linter@latest --help`.
|
|
44
43
|
|
|
45
|
-
To see what all options does slds-linter provide please run `npx @salesforce-ux/slds-linter@latest --help` which gives the below output.
|
|
46
|
-
For the first time, it will ask to install the package. Please reply with `y` as yes to install the package.
|
|
47
44
|
|
|
48
45
|
```
|
|
49
46
|
Usage: npx @salesforce-ux/slds-linter@latest [options] [command]
|
|
@@ -63,42 +60,70 @@ Commands:
|
|
|
63
60
|
help [command] display help for command
|
|
64
61
|
```
|
|
65
62
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
63
|
+
## Run SLDS Linter
|
|
64
|
+
|
|
65
|
+
Run SLDS Linter against your project in the VS Code terminal to check for any violations and generate a SARIF report. This report helps you identify the components you need to update.
|
|
66
|
+
|
|
67
|
+
In your project root directory, follow these steps.
|
|
68
|
+
|
|
69
|
+
1. In your project in VS Code, open Terminal.
|
|
70
|
+
2. Run `npx @salesforce-ux/slds-linter lint`.
|
|
71
|
+
The linting output displayed in the console includes the row and column numbers on the left. Navigate to specific lines in your source code by clicking on the displayed numbers (Command + Click on Mac).
|
|
72
|
+
|
|
73
|
+
3. (Optional) To see lint errors only on CSS files, run `npx @salesforce-ux/slds-linter lint:styles` .
|
|
74
|
+
4. (Optional) To see lint errors only on component markup files (componentName.html or componentName.cmp files), run `npx @salesforce-ux/slds-linter lint:components` .
|
|
75
|
+
5. (Optional) To run SLDS Linter on a specific folder, add the `-d` option to specify the directory to be linted: `npx @salesforce-ux/slds-linter -d [directory name]` . This option accepts directories or folders using glob patterns, enabling flexible and efficient matching of multiple paths. For example, run `npx @salesforce-ux/slds-linter lint -d "com/CORE/**"` gives the lint output for all the files under `com/CORE`.
|
|
76
|
+
6. To produce a SARIF report in your project root directory and specify an output directory, run `npx @salesforce-ux/slds-linter report -o [output directory]`. The output file is named as `slds-linter-report.sarif`.
|
|
77
|
+
7. Open the generated `.sarif` report file.
|
|
78
|
+
8. Make a note of how many components SLDS Linter has identified that you must update.
|
|
79
|
+
9. (Optional) To automatically fix validation errors in bulk, run the `lint` command with the `fix` option, `npx @salesforce-ux/slds-linter lint --fix`.
|
|
80
|
+
7. (Optional) To emit the configuration files used by `slds-linter`, run `npx @salesforce-ux/slds-linter emit` in your component source directory. Note that this command defaults to current working directory. These configuration files are discovered by your VS Code ESLint and Stylelint extensions to display squiggly lines in CSS and HTML files when opened in your code editor.
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
### Troubleshoot SARIF Viewer Navigation
|
|
84
|
+
|
|
85
|
+
If the SARIF viewer doesn’t automatically go to the line of code when you click on an error or warning, follow these steps.
|
|
86
|
+
|
|
87
|
+
1. In the SARIF viewer pop-up window, click Locate.
|
|
88
|
+
2. In the file explorer or code editor, locate the file.
|
|
89
|
+
3. Click on the errors in the SARIF viewer, and it navigates directly to the relevant line of code.
|
|
90
|
+
|
|
72
91
|
|
|
73
|
-
|
|
92
|
+
### SLDS Linter Commands and Options
|
|
74
93
|
|
|
75
|
-
|
|
94
|
+
Use these commands to run SLDS Linter rules. Review the output violations and fix any issues to uplift your code to SLDS best practices.
|
|
95
|
+
|
|
96
|
+
- `npx @salesforce-ux/slds-linter lint`. Runs ESlint and Stylelint rules on HTML, CSS, and CMP files.
|
|
97
|
+
- `npx @salesforce-ux/slds-linter lint:styles`. Runs the Stylelint rules on your CSS files.
|
|
98
|
+
- `npx @salesforce-ux/slds-linter lint:components`. Runs the ESlint rules on your HTML/CMP files.
|
|
99
|
+
- `npx @salesforce-ux/slds-linter report`. Generates a SARIF report for static analysis.
|
|
100
|
+
- `npx @salesforce-ux/slds-linter emit`. Emits the configuration files used by `slds-linter`. Defaults to current directory.
|
|
101
|
+
|
|
102
|
+
These options are available on SLDS Linter commands.
|
|
103
|
+
|
|
104
|
+
| **Option** | **Description** | **Availability** |
|
|
76
105
|
| ------------------------ | ---------------------------------------------------------------------------- | ------------------------------------------ |
|
|
77
|
-
| `-d, --directory <path>` | Target directory to scan (defaults to current directory) | lint
|
|
78
|
-
| `-o, --output <path>` | Output directory for reports (defaults to current directory) | report |
|
|
79
|
-
| `--fix` | Automatically fix problems | lint
|
|
80
|
-
| `--config <path>` | Path to eslint/stylelint config file' | lint:styles
|
|
81
|
-
| `--config-style <path>` | Path to stylelint config file' | lint |
|
|
82
|
-
| `--config-eslint <path>` | Path to eslint config file' | lint |
|
|
83
|
-
| `--editor <editor>` | Editor to open files with (e.g., vscode, atom, sublime). Defaults to vscode | lint
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
- Locate the file in the file explorer or editor.
|
|
102
|
-
- Once the file is located, you should be able to click on the errors in the SARIF viewer, and it will navigate you directly to the specific line of code.
|
|
103
|
-
|
|
104
|
-
For any questions or issues, feel free to reach out to the maintainers or open an issue in the repository.
|
|
106
|
+
| `-d, --directory <path>` | Target directory to scan (defaults to current directory). Accepts glob patterns. | `lint`, `lint:styles`, `lint:components`, `report` |
|
|
107
|
+
| `-o, --output <path>` | Output directory for reports (defaults to current directory) | `report` |
|
|
108
|
+
| `--fix` | Automatically fix problems | `lint`, `lint:styles`, `lint:components` |
|
|
109
|
+
| `--config <path>` | Path to eslint/stylelint config file' | `lint:styles`, `lint:components` |
|
|
110
|
+
| `--config-style <path>` | Path to stylelint config file' | `lint` |
|
|
111
|
+
| `--config-eslint <path>` | Path to eslint config file' | `lint` |
|
|
112
|
+
| `--editor <editor>` | Editor to open files with (e.g., vscode, atom, sublime). Defaults to vscode | `lint`, `lint:styles`, `lint:components` |
|
|
113
|
+
|
|
114
|
+
To view help for these options, add `--help` to each command. For example, run `npx @salesforce-ux/slds-linter lint --help` to see which options you can use with `lint`.
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
## Extensions
|
|
118
|
+
|
|
119
|
+
To enhance your linting and error analysis experience, we recommend that you install these VS Code extensions. These extensions significantly improve your development workflow and make it easier to navigate and address linting issues.
|
|
120
|
+
|
|
121
|
+
- *[ESLint Extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)*: Essential for JavaScript and TypeScript linting, it checks your code and flags any violations of the ESLint rules with squiggly lines to show you what to fix.
|
|
122
|
+
- *[Stylelint Extension](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)*: When linting CSS, SCSS, or other stylesheets, this tool highlights errors with squiggly lines.
|
|
123
|
+
|
|
124
|
+
## Best Practices
|
|
125
|
+
|
|
126
|
+
- Run `npx @salesforce-ux/slds-linter lint` to see the lint output on Terminal.
|
|
127
|
+
- To run SLDS Linter on a specific folder, add option `-d` For example, `npx @salesforce-ux/slds-linter lint -d`
|
|
128
|
+
|
|
129
|
+
For any questions or issues, open an issue in this repository.
|
package/build/index.js
CHANGED
|
@@ -21,7 +21,7 @@ process.on("uncaughtException", (error) => {
|
|
|
21
21
|
var program = new Command();
|
|
22
22
|
program.name("npx @salesforce-ux/slds-linter@latest").showHelpAfterError();
|
|
23
23
|
function registerVersion() {
|
|
24
|
-
program.description("SLDS Linter CLI tool for linting styles and components").version("0.1.3
|
|
24
|
+
program.description("SLDS Linter CLI tool for linting styles and components").version("0.1.3");
|
|
25
25
|
}
|
|
26
26
|
registerLintStylesCommand(program);
|
|
27
27
|
registerLintComponentsCommand(program);
|
|
@@ -5,7 +5,7 @@ var DEFAULT_ESLINT_CONFIG_PATH = resolvePath("@salesforce-ux/eslint-plugin-slds/
|
|
|
5
5
|
var DEFAULT_STYLELINT_CONFIG_PATH = resolvePath("@salesforce-ux/stylelint-plugin-slds/.stylelintrc.yml", import.meta);
|
|
6
6
|
var STYLELINT_VERSION = "16.14.1";
|
|
7
7
|
var ESLINT_VERSION = "8.57.1";
|
|
8
|
-
var LINTER_CLI_VERSION = "0.1.3
|
|
8
|
+
var LINTER_CLI_VERSION = "0.1.3";
|
|
9
9
|
var getRuleDescription = (ruleId) => {
|
|
10
10
|
const ruleIdWithoutNameSpace = `${ruleId}`.replace(/\@salesforce-ux\//, "");
|
|
11
11
|
return ruleMetadata(ruleIdWithoutNameSpace)?.ruleDesc || "--";
|
|
@@ -16,22 +16,26 @@ var FileScanner = class {
|
|
|
16
16
|
Logger.debug(`Include patterns: ${options.patterns.include.join(", ")}`);
|
|
17
17
|
const allFiles = [];
|
|
18
18
|
for (const pattern of options.patterns.include) {
|
|
19
|
-
const files = await glob(pattern
|
|
20
|
-
cwd:
|
|
19
|
+
const files = await glob(`${directory}/${pattern}`, {
|
|
20
|
+
cwd: process.cwd(),
|
|
21
21
|
ignore: options.patterns.exclude,
|
|
22
22
|
withFileTypes: true,
|
|
23
23
|
dot: true
|
|
24
24
|
// Include .dot files
|
|
25
|
-
}).then(
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
}).then(
|
|
26
|
+
(matches) => matches.filter((match) => match.isFile()).map((match) => {
|
|
27
|
+
return match.fullpath();
|
|
28
|
+
})
|
|
29
|
+
);
|
|
28
30
|
allFiles.push(...files);
|
|
29
31
|
}
|
|
30
32
|
const uniqueFiles = [...new Set(allFiles)];
|
|
31
33
|
const validFiles = await this.validateFiles(uniqueFiles);
|
|
32
34
|
const batchSize = options.batchSize || this.DEFAULT_BATCH_SIZE;
|
|
33
35
|
const batches = this.createBatches(validFiles, batchSize);
|
|
34
|
-
Logger.debug(
|
|
36
|
+
Logger.debug(
|
|
37
|
+
`Found ${validFiles.length} files, split into ${batches.length} batches`
|
|
38
|
+
);
|
|
35
39
|
return batches;
|
|
36
40
|
} catch (error) {
|
|
37
41
|
Logger.error(`Failed to scan files: ${error.message}`);
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
import { CliOptions } from
|
|
2
|
-
export declare function
|
|
1
|
+
import { CliOptions } from "../types";
|
|
2
|
+
export declare function validateAndNormalizeDirPath(inputPath?: string): string;
|
|
3
|
+
export declare function validateAndNormalizeOutputPath(inputPath?: string): string;
|
|
3
4
|
export declare function normalizeCliOptions(options: CliOptions, defultOptions?: Partial<CliOptions>): Required<CliOptions>;
|
package/build/utils/cli-args.js
CHANGED
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
// src/utils/cli-args.ts
|
|
2
2
|
import path from "path";
|
|
3
3
|
import { accessSync } from "fs";
|
|
4
|
-
function
|
|
4
|
+
function validateAndNormalizeDirPath(inputPath) {
|
|
5
|
+
if (!inputPath) {
|
|
6
|
+
return process.cwd();
|
|
7
|
+
}
|
|
8
|
+
return inputPath;
|
|
9
|
+
}
|
|
10
|
+
function validateAndNormalizeOutputPath(inputPath) {
|
|
5
11
|
if (!inputPath) {
|
|
6
12
|
return process.cwd();
|
|
7
13
|
}
|
|
@@ -22,11 +28,12 @@ function normalizeCliOptions(options, defultOptions = {}) {
|
|
|
22
28
|
configEslint: "",
|
|
23
29
|
...defultOptions,
|
|
24
30
|
...options,
|
|
25
|
-
directory:
|
|
26
|
-
output:
|
|
31
|
+
directory: validateAndNormalizeDirPath(options.directory),
|
|
32
|
+
output: validateAndNormalizeOutputPath(options.output)
|
|
27
33
|
};
|
|
28
34
|
}
|
|
29
35
|
export {
|
|
30
36
|
normalizeCliOptions,
|
|
31
|
-
|
|
37
|
+
validateAndNormalizeDirPath,
|
|
38
|
+
validateAndNormalizeOutputPath
|
|
32
39
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salesforce-ux/slds-linter",
|
|
3
|
-
"version": "0.1.3
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "SLDS Linter CLI tool for linting styles and components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"lightning design system linter",
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
"slds-linter": "./build/index.js"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@salesforce-ux/eslint-plugin-slds": "0.1.3
|
|
24
|
-
"@salesforce-ux/stylelint-plugin-slds": "0.1.3
|
|
23
|
+
"@salesforce-ux/eslint-plugin-slds": "0.1.3",
|
|
24
|
+
"@salesforce-ux/stylelint-plugin-slds": "0.1.3",
|
|
25
25
|
"@typescript-eslint/eslint-plugin": "^5.0.0",
|
|
26
26
|
"@typescript-eslint/parser": "^5.0.0",
|
|
27
27
|
"chalk": "^4.1.2",
|