Provides CLI diagnostics checks for:
- Unused CSS
- Svelte A11y hints
- JavaScript/TypeScript compiler errors
Requires Node 12 or later.
Installation:
npm i svelte-check --save-dev
Package.json:
{
// ...
"scripts": {
"svelte-check": "svelte-check"
// ...
},
// ...
"devDependencies": {
"svelte-check": "..."
// ...
}
}
Usage:
npm run svelte-check
Installation:
npm i svelte-check svelte -g
Usage:
- Go to folder where to start checking
svelte-check
Flag | Description |
---|---|
--workspace <path> |
Path to your workspace. All subdirectories except node_modules and those listed in --ignore are checked |
--output <human|human-verbose|machine> |
|
--watch |
Will not exit after one pass but keep watching files for changes and rerun diagnostics |
--ignore <path1,path2> |
Files/folders to ignore - relative to workspace root, comma-separated, inside quotes. Example: --ignore "dist,build" |
--fail-on-warnings |
Will also exit with error code when there are warnings |
--fail-on-hints |
Will also exit with error code when there are hints |
--compiler-warnings <code1:error|ignore,code2:error|ignore> |
A list of Svelte compiler warning codes. Each entry defines whether that warning should be ignored or treated as an error. Warnings are comma-separated, between warning code and error level is a colon; all inside quotes. Example: --compiler-warnings "css-unused-selector:ignore,unused-export-let:error" |
--diagnostic-sources <js,svelte,css> |
A list of diagnostic sources which should run diagnostics on your code. Possible values are js (includes TS), svelte , css . Comma-separated, inside quotes. By default all are active. Example: --diagnostic-sources "js,svelte" |
--threshold <error|warning> |
Filters the diagnostics to display. error will output only errors while warning will output warnings and errors. |
svelte-check
needs to know the whole project to do valid checks. Imagine you alter a component property export let foo
to export let bar
, but you don't update any of the component usages. They all have errors now but you would not catch them if you only run checks on changed files.
Setting the --output
to machine
will format output in a way that is easier to read
by machines, e.g. inside CI pipelines, for code quality checks, etc.
Each row corresponds to a new record. Rows are made up of columns that are separated by a single space character. The first column of every row contains a timestamp in milliseconds which can be used for monitoring purposes. The second column gives us the "row type", based on which the number and types of subsequent columns may differ.
The first row is of type START
and contains the workspace folder (wrapped in quotes).
1590680325583 START "/home/user/language-tools/packages/language-server/test/plugins/typescript/testfiles"
Any number of ERROR
or WARNING
records may follow. Their structure is identical and tells
us the filename, the line and column numbers, and the error message. The filename is relative
to the workspace directory. The filename and the message are both wrapped in quotes.
1590680326283 ERROR "codeactions.svelte" 1:16 "Cannot find module 'blubb' or its corresponding type declarations."
1590680326778 WARNING "imported-file.svelte" 0:37 "Component has unused export property 'prop'. If it is for external reference only, please consider using `export const prop`"
The output concludes with a COMPLETED
message that summarizes total numbers of files, errors, warnings and hints that were encountered during the check.
1590680326807 COMPLETED 20 FILES 21 ERRORS 1 WARNINGS 0 HINTS
If the application experiences a runtime error, this error will appear as a FAILURE
record.
1590680328921 FAILURE "Connection closed"
- Vue's VTI which lays the foundation for
svelte-check