stlint
v1.0.65
Published
Stylus Linter
Downloads
386
Maintainers
Readme
Stylus Linter
- Issues
- Installation
- Example cli Usage
- CLI
- Non CLI Usage
- As Part of Your Workflow
- Ignore errors
- Rules
- License
Installation
As part of your project
npm i stlint -D
As a cli tool:
npm install stlint -g
Example cli Usage:
npx stlint
Run stlint on cwd
stlint
Run stlint on cwd as global
stlint path/to/filename.styl
Run stlint on a file
stlint path/to/dir --watch
Watch dir, run stlint on file change
stlint --help
Get list of commands
stlint --version
Get version number
stlint --config path/to/config/.configrc
Run stlint with custom config settings
stlint styl/ --watch -c path/to/config/.configrc
Watch dir, use custom config
stlint --command autocomplete --content #e --offset 0 --lineoffset 0
Get autocomplete suggestions for #
string
CLI
-h
or --help
Display list of commands
-w
or --watch
Watch file or directory and run lint on change
-c
or --config
Pass in location of custom config file
-v
or --version
Display current version
-g
or --grep
Only run rules matching this string or regexp
-f
or --fix
Try fix some issues
-i
or --info
Show info about version and config (can be used with --grep for filter rules)
-r
or --reporter
Reporter "raw", "json" or "silent"
All another options from [config](#Config file)
Non CLI Usage
const StylusLinter = require('stlint').StylusLinter;
StylusLinter('path/to/stylus/', {
watch: true
});
or check only one file or text
const Linter = require('stlint').Linter;
const linter = new Linter({
...options
});
// if you want check content
linter.lint('./test.styl', 'content');
// if you want check file
linter.lint('./test.styl');
// and display errors.
linter.display();
Config file
Create .stlintrc
file in project root
{
"reporter": "raw",
"watch": false,
"extends": ["stlint-v4fire", "./test/.myfileconfig.json"],
"extraRules": "./my-rules/",
"rules": {
"color": false,
"colons": ["always"],
"depthControl": {
"indentPref": 4
}
},
"path": "./src",
"excludes": ["node_modules/"],
"stylusParserOptions": {},
"reportOptions": {
"columnSplitter": " | ",
"maxWidth": 70,
"minWidth": 70,
"truncate": false
}
}
As Part of Your Workflow
Stlint integrations with IDEs are available.
Ignore errors
sometimes you want to ignore the error for this there are two directives:
@stlint-ignore
- ignores only one line after it@stlint-disable
@stlint-enable
- ignore block (@stlint-enable is optional)
For example, in the following code, some errors will be ignored.
$p = {
a: #CCC
// @stlint-ignore
b: #ccc // need use uppercase notation will be ignored
c: 10px
}
.test
margin-top 20px
// @stlint-disable
padding-top 20px // need use mixin will be ignored
color #ccc // need use uppercase notation and use variable will be ignored
// @stlint-enable
background-color #ddd
Respectively, in order not to display errors of the entire file, it is enough to add an
@stlint-disable
directive to its beginning
// @stlint-disable - all errors below will be ignored
$p = {
a: #CCC
b: #ccc
c: 10px
}
.test
margin-top 20px
padding-top 20px
color #ccc
background-color #ddd
Rules
brackets
Check for brackets
Default value
[
"never"
]
colons
Use/Do not use colons after property
Default value
[
"never"
]
color
Process all color values. Allow or deny use it not in variable and use uppercase or lowercase statements
For example this code has error - because we use only color in uppercase
.test
color #ccc
If allowOnlyInVar
=== true code above also has error - no use color without variable
Fixed code
$color = #CCC
.test
color $color
Default value
{
"conf": "uppercase",
"enabled": true,
"allowOnlyInVar": true,
"allowShortcut": true,
"denyRGB": true
}
commaInObject
Allow or deny commas in object hash
Default value
[
"never"
]
depthControl
Control depth spaces or tab
Default value
{
"indentPref": "tab"
}
emptyLines
Check if document has several empty lines
Default value
true
leadingZero
Check for leading 0 on numbers ( 0.5 )
Default value
[
"always"
]
mixedSpaces
check for mixed spaces and tabs
Default value
{
"indentPref": "tab"
}
prefixVarsWithDollar
Check that $ is used when declaring vars
Default value
{
"conf": "always",
"prefix": "$",
"allowConst": true
}
quotePref
Check that quote style is consistent with config
Default value
[
"double"
]
semicolons
Check that selector properties are sorted accordingly
Default value
[
"never"
]
sortOrder
Rule for checking properties order. Can use alphabetical order or order from grouped array
Default value
{
"conf": "grouped",
"startGroupChecking": 6,
"order": [
[
"absolute",
"position",
"z-index",
"top",
"right",
"bottom",
"left"
],
[
"content",
"display",
"flexbox",
"flex",
"flex-grow",
"flex-shrink",
"flex-basis",
"flex-direction",
"order",
"flex-order",
"flex-wrap",
"flex-flow",
"justify-content",
"align-self",
"align-items",
"align-content",
"flex-pack",
"flex-align",
"box-sizing",
"vertical-align",
"size",
"width",
"height",
"max-width",
"min-width",
"max-height",
"min-height",
"overflow",
"overflow-x",
"overflow-y",
"float",
"clear",
"visibility",
"opacity",
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left"
],
[
"font",
"font-family",
"font-size",
"font-weight",
"font-style",
"font-variant",
"font-size-adjust",
"font-stretch",
"line-height",
"letter-spacing",
"text-align",
"text-align-last",
"text-decoration",
"text-emphasis",
"text-emphasis-position",
"text-emphasis-style",
"text-emphasis-color",
"text-indent",
"text-justify",
"text-outline",
"text-transform",
"text-wrap",
"text-overflow",
"text-overflow-ellipsis",
"text-overflow-mode",
"word-spacing",
"word-wrap",
"word-break",
"tab-size",
"hyphens"
],
[
"pointer-events",
"border",
"border-spacing",
"border-collapse",
"border-width",
"border-style",
"border-color",
"border-top",
"border-top-width",
"border-top-style",
"border-top-color",
"border-right",
"border-right-width",
"border-right-style",
"border-right-color",
"border-bottom",
"border-bottom-width",
"border-bottom-style",
"border-bottom-color",
"border-left",
"border-left-width",
"border-left-style",
"border-left-color",
"border-radius",
"border-top-left-radius",
"border-top-right-radius",
"border-bottom-right-radius",
"border-bottom-left-radius",
"border-image",
"border-image-source",
"border-image-slice",
"border-image-width",
"border-image-outset",
"border-image-repeat",
"border-top-image",
"border-right-image",
"border-bottom-image",
"border-left-image",
"border-corner-image",
"border-top-left-image",
"border-top-right-image",
"border-bottom-right-image",
"border-bottom-left-image",
"color",
"background",
"filter",
"background-color",
"background-image",
"background-attachment",
"background-position",
"background-position-x",
"background-position-y",
"background-clip",
"background-origin",
"background-size",
"background-repeat",
"clip",
"list-style",
"outline",
"outline-width",
"outline-style",
"outline-color",
"outline-offset",
"cursor",
"box-shadow",
"text-shadow",
"table-layout",
"backface-visibility",
"will-change",
"transition",
"transform",
"animation"
]
]
}
useMixinInsteadUnit
Allo or deny some mixin instead of unit statement
Default value
{
"conf": "always",
"mixin": "basis",
"unitType": "px",
"allowOneUnit": false
}
----
Self rules
You can create folder and use it for extra rules
{
"extraRules": "/Users/v-chupurnov/WebstormProjects/test/rules/"
}
In this folder you can create native JavaScript files
const Rgb = require('stlint').ast.RGB;
function TestRule() {
nodesFilter = ['rgb']; // can be one of https://github.com/stylus/stlint/tree/master/src/core/ast
/**
* Check the AST nodes
* @param node
*/
this.checkNode = (node) => {
if (node instanceof Rgb) {
console.log(this.state.conf); // test111
console.log(this.state.someExtraVariable); // 112
// this.msg('Test error on test node', node.lineno, node.column, node.line.length);
}
};
/**
* Check every line
* @param line
*/
this.checkLine = (line) => {
if (line.lineno === 1) {
// this.msg('Test error on test line', line.lineno, 1, line.line.length);
}
};
}
module.exports.TestRule = TestRule;
And you need add this rule in your config
{
"extraRules": "/Users/v-chupurnov/WebstormProjects/test/rules/",
"rules": {
"testRule": {
"conf": "test111",
"someExtraVariable": 112,
"enabled": true
}
}
}