sass-lint-auto-fix
v0.21.2
Published
Automatically resolve sass-linting issues through CLI
Downloads
17,787
Readme
Sass Lint Auto Fix
Description
This package serves as a complement to sass-lint, giving you the ability to resolve
simple linting issues with an easy to use command line interface. Issues are resolved by parsing the s(a|c)ss
as an ast, traversing through it, and modifying certain branches to be in accordance to the .sass-lint.yml
standards.
Getting Started
Usage
Usage: sass-lint-auto-fix "<pattern>" [options]
Options:
-V, --version output the version number
-c, --config <path> custom config path (e.g /path/to/.sass-lint-auto-fix.yml)
--config-sass-lint <path> custom sass lint config path (e.g /path/to/.sass-lint.yml
-s, --silent runs in silent mode
-d, --debug runs in debug mode
-h, --help output usage information
Installing as a dependency
To begin install the package as a dev-dependency for your repository.
npm install --save-dev sass-lint-auto-fix
Modify package.json
scripts to include lint:fix
{
...,
"scripts": {
"lint": "sass-lint -v",
"lint:fix": "sass-lint-auto-fix"
}
}
lint:fix
works really well with husky, which allows you to run commands on hooks that fire when
running git commands
Add the following to your package.json
{
"husky": {
"hooks": {
"pre-commit": "yarn lint:fix && yarn lint",
"pre-push": "yarn test",
"...": "..."
}
}
}
Installing globally
npm install -g sass-lint-auto-fix
Configuration
Configuration can be provided through as either json, yml, or js.
The generic structure of the configuration file you would provide would look something like this:
interface Ruleset {
[ruleName: string]: number | { [ruleOption: string]: any };
}
interface ConfigOpts {
logger: Logger;
slRules?: any;
slConfig?: any;
files: {
include: string;
ignore?: string;
};
syntax: {
include: (keyof typeof ValidFileType)[];
};
resolvers: Ruleset;
options: {
optOut: boolean;
};
}
An example of this in yaml.
files:
include: "**/*.s+(a|c)ss"
ignore:
- node_modules/**
syntax:
include:
- scss
- sass
resolvers:
property-sort-order: 1
attribute-quotes: 1
border-zero: 1
no-color-keywords: 1
no-css-comments: 0
no-important: 0
no-trailing-zero: 1
space-after-bang: 1
space-before-bang: 1
space-after-colon: 1
space-before-colon: 1
hex-length: 1
empty-line-between-blocks: 1
url-quotes: 1
zero-unit: 1
hex-notation: 1
indentation: 0
final-newline: 1
options:
optOut: false
Disabling Rules
resolvers:
property-sort-order: 1
attribute-quotes: 0
By default, all rule "resolvers" are enabled. If you wish to change that, specify a config file when running. Configuration of resolvers only allows you to enable or disable rules.
sass-lint-auto-fix -c path/to/config.file
Configuring which rules to run against
By default, sass-lint will look for a .sass-lint.yml
or .sasslintrc
, or an entry in your package.json
.
When applying the resolver to a given rule, configuration is parsed from one of the above files..
More information is specified here.
In this snippet example, the only rule enabled is property-sort-order
. If you wish to manually enable certain resolvers, you would do so for each one you wish to include.
For more information about the rules themselves, you can read the documentation from sass-lint
Opt out of error reporting
By default, all errors captured while attempting to resolve issues are reported by sentry.
You can opt out by adding a optOut
flag in your sass-lint-auto-fix config file (yml, json, js, ts)
E.g
files:
include: "**/*.s+(a|c)ss"
ignore:
- node_modules/**
syntax:
include:
- scss
resolvers:
property-sort-order: 1
attribute-quotes: 1
...
options:
optOut: true
Developing
Setup
git clone https://github.com/srowhani/sass-lint-auto-fix.git;
yarn install;
yarn build;
Contributing
This project uses semantic-release. Scope of the commit's included in a pull request will decide whether a new release is warranted.
More information can be found here.
Testing
yarn test