Showing 143 of 143 total issues
Color literals such as 'lightgray' should only be used in variable declarations Open
color: lightgray;
- Read upRead up
- Exclude checks
No Color Literals
Rule no-color-literals
will disallow the use of color literals and basic color functions in any declarations other than variables or maps/lists.
The list of affected color functions are as follows:
* rgb
* rgba
* hsl
* hsla
Other color functions, such as adjust-color
and mix
, may be used, but the original color must be passed in as a variable.
Options
-
allow-map-identifiers
:true
/false
(defaults totrue
) -
allow-rgba
:true
/false
(defaults tofalse
) -
allow-variable-identifiers
:true
/false
(defaults totrue
)
Examples
When enabled and default options are used the following are disallowed.
.literal {
color: mediumslateblue;
}
.linear-gradient-func {
background: linear-gradient(top, #fff, white);
}
.box-shadow {
box-shadow: 1px 1px black, 1px 1px black;
}
.background {
background: 1px solid white;
}
.hex {
color: #fff;
}
// rgb function passed directly as function argument
.adj {
color: adjust-color(rgb(255, 0, 0), $blue: 5);
}
// hsl function passed directly as function argument
.scale {
color: scale-color(hsl(120, 70%, 80%), $lightness: 50%);
}
// hsl function passed directly as function argument
.change {
color: change-color(hsl(25, 100%, 80%), $lightness: 40%, $alpha: .8);
}
// color literal passed directly as function argument
.function {
color: test(#fff);
}
// color functions used directly as property values
.rgb {
color: rgb(255, 255, 255);
}
.rgba {
color: rgba(255, 255, 255, .3);
}
.hsl {
color: hsl(40, 50%, 50%);
}
.hsla {
color: hsla(40, 50%, 50%, .3);
}
When enabled and default options are used the following are allowed.
$literal: mediumslateblue;
$hexVar: #fff;
$rgb: rgb(255, 255, 255);
$rgba: rgba(255, 255, 255, .3);
$hsl: hsl(40, 50%, 50%);
$hsla: hsla(40, 50%, 50%, .3);
// using color literals as property names
$colors: (
red: #fff,
blue : (
orange: #fff
)
);
// using color literals as variable identifiers
$black: #000;
.literal {
color: $literal;
}
.linear-gradient-func {
background: linear-gradient(top, $hexVar, $literal);
}
.background {
background: 1px solid $literal;
}
.hex {
color: $hexVar;
}
.adj {
color: adjust-color($off-red, $blue: 5);
}
.scale {
color: scale-color($off-blue, $lightness: 50%);
}
.change {
color: change-color($orange-extra, $lightness: 40%, $alpha: .8);
}
.function {
color: test($hexVar);
}
.rgb {
color: $rgb;
}
.rgba {
color: $rgba;
}
.hsl {
color: $hsl;
}
.hsla {
color: $hsla;
}
[allow-rgba: true]
When enabled and allow-rgba
is set to true
, the following will be allowed:
// rgba in variables is still fine
$rgba: rgba(255, 0, 0, .5);
$red: rgb(255, 255, 255,);
// rgba can be used directly to alter a variables opacity
.color {
color: rgba($red, .3);
}
In addition, when enabled and allow-rgba
is set to true
, the following will be disallowed:
.color {
// you must use variables and not literals
color: rgba(0, 0, 0, .3);
color: rgba(black, .3);
}
[allow-variable-identifiers: false]
When enabled and allow-variable-identifiers
is set to false
, the following will be disallowed
// variable uses a color literal as an identifier
$black: #000
// variable using a color literal as an identifier is passed to a function
.test {
color: adjust-color($off-red, $blue: 5)
}
When enabled and allow-variable-identifiers
is set to false
, the following will be allowed
// variable not directly using a color literal as an identifier
$primary-black: #000
[allow-map-identifiers: false]
When enabled and allow-map-identifiers
is set to false
, the following will be disallowed
// map identifiers red, blue and orange share their name with a
// color literal and therefore shouldn't be used
$colors: (
red: #f00,
blue: (
orange: $orange
)
)
When enabled and allow-map-identifiers
is set to false
, the following will be allowed
$colors: (
primary-red: #f00,
map-blue: (
off-orange: $orange
)
)
Parsing error: 'import' and 'export' may appear only with 'sourceType: module' Open
import Vue from 'vue';
- Read upRead up
- Exclude checks
For more information visit Source: http://eslint.org/docs/rules/
Strings must use singlequote. Open
"vetur.experimental.templateInterpolationService": true
- Read upRead up
- Exclude checks
enforce the consistent use of either backticks, double, or single quotes (quotes)
JavaScript allows you to define strings in one of three ways: double quotes, single quotes, and backticks (as of ECMAScript 6). For example:
/*eslint-env es6*/
var double = "double";
var single = 'single';
var backtick = `backtick`; // ES6 only
Each of these lines creates a string and, in some cases, can be used interchangeably. The choice of how to define strings in a codebase is a stylistic one outside of template literals (which allow embedded of expressions to be interpreted).
Many codebases require strings to be defined in a consistent manner.
Rule Details
This rule enforces the consistent use of either backticks, double, or single quotes.
Options
This rule has two options, a string option and an object option.
String option:
-
"double"
(default) requires the use of double quotes wherever possible -
"single"
requires the use of single quotes wherever possible -
"backtick"
requires the use of backticks wherever possible
Object option:
-
"avoidEscape": true
allows strings to use single-quotes or double-quotes so long as the string contains a quote that would have to be escaped otherwise -
"allowTemplateLiterals": true
allows strings to use backticks
Deprecated: The object property avoid-escape
is deprecated; please use the object property avoidEscape
instead.
double
Examples of incorrect code for this rule with the default "double"
option:
/*eslint quotes: ["error", "double"]*/
var single = 'single';
var unescaped = 'a string containing "double" quotes';
var backtick = `back\ntick`; // you can use \n in single or double quoted strings
Examples of correct code for this rule with the default "double"
option:
/*eslint quotes: ["error", "double"]*/
/*eslint-env es6*/
var double = "double";
var backtick = `back
tick`; // backticks are allowed due to newline
var backtick = tag`backtick`; // backticks are allowed due to tag
single
Examples of incorrect code for this rule with the "single"
option:
/*eslint quotes: ["error", "single"]*/
var double = "double";
var unescaped = "a string containing 'single' quotes";
Examples of correct code for this rule with the "single"
option:
/*eslint quotes: ["error", "single"]*/
/*eslint-env es6*/
var single = 'single';
var backtick = `back${x}tick`; // backticks are allowed due to substitution
backticks
Examples of incorrect code for this rule with the "backtick"
option:
/*eslint quotes: ["error", "backtick"]*/
var single = 'single';
var double = "double";
var unescaped = 'a string containing `backticks`';
Examples of correct code for this rule with the "backtick"
option:
/*eslint quotes: ["error", "backtick"]*/
/*eslint-env es6*/
var backtick = `backtick`;
avoidEscape
Examples of additional correct code for this rule with the "double", { "avoidEscape": true }
options:
/*eslint quotes: ["error", "double", { "avoidEscape": true }]*/
var single = 'a string containing "double" quotes';
Examples of additional correct code for this rule with the "single", { "avoidEscape": true }
options:
/*eslint quotes: ["error", "single", { "avoidEscape": true }]*/
var double = "a string containing 'single' quotes";
Examples of additional correct code for this rule with the "backtick", { "avoidEscape": true }
options:
/*eslint quotes: ["error", "backtick", { "avoidEscape": true }]*/
var double = "a string containing `backtick` quotes"
allowTemplateLiterals
Examples of additional correct code for this rule with the "double", { "allowTemplateLiterals": true }
options:
/*eslint quotes: ["error", "double", { "allowTemplateLiterals": true }]*/
var double = "double";
var double = `double`;
Examples of additional correct code for this rule with the "single", { "allowTemplateLiterals": true }
options:
/*eslint quotes: ["error", "single", { "allowTemplateLiterals": true }]*/
var single = 'single';
var single = `single`;
{ "allowTemplateLiterals": false }
will not disallow the usage of all template literals. If you want to forbid any instance of template literals, use no-restricted-syntax and target the TemplateLiteral
selector.
When Not To Use It
If you do not need consistency in your string styles, you can safely disable this rule. Source: http://eslint.org/docs/rules/
Headers should be surrounded by blank lines Open
#### Expected behavior
- Read upRead up
- Exclude checks
MD022 - Headers should be surrounded by blank lines
Tags: headers, blank_lines
Aliases: blanks-around-headers
This rule is triggered when headers (any style) are either not preceded or not followed by a blank line:
# Header 1
Some text
Some more text
## Header 2
To fix this, ensure that all headers have a blank line both before and after (except where the header is at the beginning or end of the document):
# Header 1
Some text
Some more text
## Header 2
Rationale: Aside from aesthetic reasons, some parsers, including kramdown, will not parse headers that don't have a blank line before, and will parse them as regular text.
Trailing spaces Open
# How to contribute
- Read upRead up
- Exclude checks
MD009 - Trailing spaces
Tags: whitespace
Aliases: no-trailing-spaces
Parameters: br_spaces (number; default: 0)
This rule is triggered on any lines that end with whitespace. To fix this, find the line that is triggered and remove any trailing spaces from the end.
The brspaces parameter allows an exception to this rule for a specific amount of trailing spaces used to insert an explicit line break/br element. For example, set brspaces to 2 to allow exactly 2 spaces at the end of a line.
Note: you have to set brspaces to 2 or higher for this exception to take effect - you can't insert a br element with just a single trailing space, so if you set brspaces to 1, the exception will be disabled, just as if it was set to the default of 0.
!important not allowed Open
font-family: -apple-system, BlinkMacSystemFont, BCSans, Roboto, Verdana, Arial, sans-serif !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Selectors must be placed on new lines Open
h1, h2, h3, h4, h5 {
- Read upRead up
- Exclude checks
Single Line Per Selector
Rule single-line-per-selector
will enforce whether selectors should be placed on a new line.
Examples
When enabled, the following are allowed:
.foo,
.bar {
content: 'baz';
}
When enabled, the following are disallowed:
.foo, .bar {
content: 'baz';
}
Selectors must be placed on new lines Open
h1, h2, h3, h4, h5 {
- Read upRead up
- Exclude checks
Single Line Per Selector
Rule single-line-per-selector
will enforce whether selectors should be placed on a new line.
Examples
When enabled, the following are allowed:
.foo,
.bar {
content: 'baz';
}
When enabled, the following are disallowed:
.foo, .bar {
content: 'baz';
}
Expected margin-bottom
, found color
Open
color: lightgray;
- Read upRead up
- Exclude checks
Property Sort Order
Rule property-sort-order
will enforce the order in which declarations are written.
Options
-
order
:'alphabetical'
,'concentric'
,'recess'
,'smacss'
, or[array of properties]
(defaults toalphabetical
. Unknown properties are sorted alphabetically) -
ignore-custom-properties
:true
/false
(defaults tofalse
)
Property orders: https://github.com/sasstools/sass-lint/tree/develop/lib/config/property-sort-orders
Examples
When enabled (assuming order: alphabetical
), the following are allowed:
.foo {
content: 'baz';
height: 100vh;
width: 100vw;
}
When enabled (assuming order: alphabetical
), the following are disallowed:
.foo {
width: 100vw;
height: 100vh;
content: 'baz';
}
Custom Sort Orders
You have the option to create your own custom property sort orders. These are specified in your .sass-lint.yml
file as below:
property-sort-order:
- 1
-
order:
- border
- display
- color
When the custom order is specified as above, the following are allowed:
.foo {
border: 1px solid blue;
display: block;
color: red;
}
When the custom order is specified as above, the following are disallowed:
.foo {
display: block;
color: red;
border: 1px solid blue;
}
Ignore Custom Properties
When ignore-custom-properties: false
(assume order: 'alphabetical'
) the following would be allowed
.foo {
border: 1px solid blue;
color: red;
composes: heading;
display: block;
}
When ignore-custom-properties: false
(assume order: 'alphabetical'
) the following would be disallowed
.foo {
composes: heading; // not in alphabetical order
border: 1px solid blue;
color: red;
display: block;
}
When ignore-custom-properties: true
(assume order: 'alphabetical'
) the following would be allowed
.foo {
composes: heading; // custom properties ignored
border: 1px solid blue;
color: red;
display: block;
}
Color literals such as '#003366' should only be used in variable declarations Open
border: 2px solid #003366;
- Read upRead up
- Exclude checks
No Color Literals
Rule no-color-literals
will disallow the use of color literals and basic color functions in any declarations other than variables or maps/lists.
The list of affected color functions are as follows:
* rgb
* rgba
* hsl
* hsla
Other color functions, such as adjust-color
and mix
, may be used, but the original color must be passed in as a variable.
Options
-
allow-map-identifiers
:true
/false
(defaults totrue
) -
allow-rgba
:true
/false
(defaults tofalse
) -
allow-variable-identifiers
:true
/false
(defaults totrue
)
Examples
When enabled and default options are used the following are disallowed.
.literal {
color: mediumslateblue;
}
.linear-gradient-func {
background: linear-gradient(top, #fff, white);
}
.box-shadow {
box-shadow: 1px 1px black, 1px 1px black;
}
.background {
background: 1px solid white;
}
.hex {
color: #fff;
}
// rgb function passed directly as function argument
.adj {
color: adjust-color(rgb(255, 0, 0), $blue: 5);
}
// hsl function passed directly as function argument
.scale {
color: scale-color(hsl(120, 70%, 80%), $lightness: 50%);
}
// hsl function passed directly as function argument
.change {
color: change-color(hsl(25, 100%, 80%), $lightness: 40%, $alpha: .8);
}
// color literal passed directly as function argument
.function {
color: test(#fff);
}
// color functions used directly as property values
.rgb {
color: rgb(255, 255, 255);
}
.rgba {
color: rgba(255, 255, 255, .3);
}
.hsl {
color: hsl(40, 50%, 50%);
}
.hsla {
color: hsla(40, 50%, 50%, .3);
}
When enabled and default options are used the following are allowed.
$literal: mediumslateblue;
$hexVar: #fff;
$rgb: rgb(255, 255, 255);
$rgba: rgba(255, 255, 255, .3);
$hsl: hsl(40, 50%, 50%);
$hsla: hsla(40, 50%, 50%, .3);
// using color literals as property names
$colors: (
red: #fff,
blue : (
orange: #fff
)
);
// using color literals as variable identifiers
$black: #000;
.literal {
color: $literal;
}
.linear-gradient-func {
background: linear-gradient(top, $hexVar, $literal);
}
.background {
background: 1px solid $literal;
}
.hex {
color: $hexVar;
}
.adj {
color: adjust-color($off-red, $blue: 5);
}
.scale {
color: scale-color($off-blue, $lightness: 50%);
}
.change {
color: change-color($orange-extra, $lightness: 40%, $alpha: .8);
}
.function {
color: test($hexVar);
}
.rgb {
color: $rgb;
}
.rgba {
color: $rgba;
}
.hsl {
color: $hsl;
}
.hsla {
color: $hsla;
}
[allow-rgba: true]
When enabled and allow-rgba
is set to true
, the following will be allowed:
// rgba in variables is still fine
$rgba: rgba(255, 0, 0, .5);
$red: rgb(255, 255, 255,);
// rgba can be used directly to alter a variables opacity
.color {
color: rgba($red, .3);
}
In addition, when enabled and allow-rgba
is set to true
, the following will be disallowed:
.color {
// you must use variables and not literals
color: rgba(0, 0, 0, .3);
color: rgba(black, .3);
}
[allow-variable-identifiers: false]
When enabled and allow-variable-identifiers
is set to false
, the following will be disallowed
// variable uses a color literal as an identifier
$black: #000
// variable using a color literal as an identifier is passed to a function
.test {
color: adjust-color($off-red, $blue: 5)
}
When enabled and allow-variable-identifiers
is set to false
, the following will be allowed
// variable not directly using a color literal as an identifier
$primary-black: #000
[allow-map-identifiers: false]
When enabled and allow-map-identifiers
is set to false
, the following will be disallowed
// map identifiers red, blue and orange share their name with a
// color literal and therefore shouldn't be used
$colors: (
red: #f00,
blue: (
orange: $orange
)
)
When enabled and allow-map-identifiers
is set to false
, the following will be allowed
$colors: (
primary-red: #f00,
map-blue: (
off-orange: $orange
)
)
Trailing punctuation in header Open
#### Smartphone (please complete the following information):
- Read upRead up
- Exclude checks
MD026 - Trailing punctuation in header
Tags: headers
Aliases: no-trailing-punctuation
Parameters: punctuation (string; default ".,;:!?")
This rule is triggered on any header that has a punctuation character as the last character in the line:
# This is a header.
To fix this, remove any trailing punctuation:
# This is a header
Note: The punctuation parameter can be used to specify what characters class
as punctuation at the end of the header. For example, you can set it to
'.,;:!'
to allow headers with question marks in them, such as might be used
in an FAQ.
Headers should be surrounded by blank lines Open
# How to contribute
- Read upRead up
- Exclude checks
MD022 - Headers should be surrounded by blank lines
Tags: headers, blank_lines
Aliases: blanks-around-headers
This rule is triggered when headers (any style) are either not preceded or not followed by a blank line:
# Header 1
Some text
Some more text
## Header 2
To fix this, ensure that all headers have a blank line both before and after (except where the header is at the beginning or end of the document):
# Header 1
Some text
Some more text
## Header 2
Rationale: Aside from aesthetic reasons, some parsers, including kramdown, will not parse headers that don't have a blank line before, and will parse them as regular text.
Parsing error: 'import' and 'export' may appear only with 'sourceType: module' Open
import NProgress from 'nprogress';
- Read upRead up
- Exclude checks
For more information visit Source: http://eslint.org/docs/rules/
Headers should be surrounded by blank lines Open
#### Additional context
- Read upRead up
- Exclude checks
MD022 - Headers should be surrounded by blank lines
Tags: headers, blank_lines
Aliases: blanks-around-headers
This rule is triggered when headers (any style) are either not preceded or not followed by a blank line:
# Header 1
Some text
Some more text
## Header 2
To fix this, ensure that all headers have a blank line both before and after (except where the header is at the beginning or end of the document):
# Header 1
Some text
Some more text
## Header 2
Rationale: Aside from aesthetic reasons, some parsers, including kramdown, will not parse headers that don't have a blank line before, and will parse them as regular text.
Expected color
, found margin-bottom
Open
margin-bottom: 1em;
- Read upRead up
- Exclude checks
Property Sort Order
Rule property-sort-order
will enforce the order in which declarations are written.
Options
-
order
:'alphabetical'
,'concentric'
,'recess'
,'smacss'
, or[array of properties]
(defaults toalphabetical
. Unknown properties are sorted alphabetically) -
ignore-custom-properties
:true
/false
(defaults tofalse
)
Property orders: https://github.com/sasstools/sass-lint/tree/develop/lib/config/property-sort-orders
Examples
When enabled (assuming order: alphabetical
), the following are allowed:
.foo {
content: 'baz';
height: 100vh;
width: 100vw;
}
When enabled (assuming order: alphabetical
), the following are disallowed:
.foo {
width: 100vw;
height: 100vh;
content: 'baz';
}
Custom Sort Orders
You have the option to create your own custom property sort orders. These are specified in your .sass-lint.yml
file as below:
property-sort-order:
- 1
-
order:
- border
- display
- color
When the custom order is specified as above, the following are allowed:
.foo {
border: 1px solid blue;
display: block;
color: red;
}
When the custom order is specified as above, the following are disallowed:
.foo {
display: block;
color: red;
border: 1px solid blue;
}
Ignore Custom Properties
When ignore-custom-properties: false
(assume order: 'alphabetical'
) the following would be allowed
.foo {
border: 1px solid blue;
color: red;
composes: heading;
display: block;
}
When ignore-custom-properties: false
(assume order: 'alphabetical'
) the following would be disallowed
.foo {
composes: heading; // not in alphabetical order
border: 1px solid blue;
color: red;
display: block;
}
When ignore-custom-properties: true
(assume order: 'alphabetical'
) the following would be allowed
.foo {
composes: heading; // custom properties ignored
border: 1px solid blue;
color: red;
display: block;
}
Space expected between blocks Open
.orange {
- Read upRead up
- Exclude checks
Empty Line Between Blocks
Rule empty-line-between-blocks
will enforce whether or not nested blocks should include a space between the last non-comment declaration or not.
Options
-
include
:true
/false
(defaults totrue
) -
allow-single-line-rulesets
:true
/false
(defaults totrue
)
Examples
include
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
content: 'foo';
.bar {
content: 'bar';
// Waldo
&--baz {
content: 'baz';
}
}
}
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
content: 'foo';
.bar {
content: 'bar';
// Waldo
&--baz {
content: 'baz';
}
}
}
allow-single-line-rulesets
When allow-single-line-rulesets: true
, the following are allowed. When allow-single-line-rulesets: false
, the following are disallowed:
.foo { content: 'foo'; }
.bar { content: 'bar'; }
.baz { content: 'baz'; }
Space expected between blocks Open
button, .v-icon {
- Read upRead up
- Exclude checks
Empty Line Between Blocks
Rule empty-line-between-blocks
will enforce whether or not nested blocks should include a space between the last non-comment declaration or not.
Options
-
include
:true
/false
(defaults totrue
) -
allow-single-line-rulesets
:true
/false
(defaults totrue
)
Examples
include
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
content: 'foo';
.bar {
content: 'bar';
// Waldo
&--baz {
content: 'baz';
}
}
}
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
content: 'foo';
.bar {
content: 'bar';
// Waldo
&--baz {
content: 'baz';
}
}
}
allow-single-line-rulesets
When allow-single-line-rulesets: true
, the following are allowed. When allow-single-line-rulesets: false
, the following are disallowed:
.foo { content: 'foo'; }
.bar { content: 'bar'; }
.baz { content: 'baz'; }
Color literals such as '#eee' should only be used in variable declarations Open
background-color: #eee;
- Read upRead up
- Exclude checks
No Color Literals
Rule no-color-literals
will disallow the use of color literals and basic color functions in any declarations other than variables or maps/lists.
The list of affected color functions are as follows:
* rgb
* rgba
* hsl
* hsla
Other color functions, such as adjust-color
and mix
, may be used, but the original color must be passed in as a variable.
Options
-
allow-map-identifiers
:true
/false
(defaults totrue
) -
allow-rgba
:true
/false
(defaults tofalse
) -
allow-variable-identifiers
:true
/false
(defaults totrue
)
Examples
When enabled and default options are used the following are disallowed.
.literal {
color: mediumslateblue;
}
.linear-gradient-func {
background: linear-gradient(top, #fff, white);
}
.box-shadow {
box-shadow: 1px 1px black, 1px 1px black;
}
.background {
background: 1px solid white;
}
.hex {
color: #fff;
}
// rgb function passed directly as function argument
.adj {
color: adjust-color(rgb(255, 0, 0), $blue: 5);
}
// hsl function passed directly as function argument
.scale {
color: scale-color(hsl(120, 70%, 80%), $lightness: 50%);
}
// hsl function passed directly as function argument
.change {
color: change-color(hsl(25, 100%, 80%), $lightness: 40%, $alpha: .8);
}
// color literal passed directly as function argument
.function {
color: test(#fff);
}
// color functions used directly as property values
.rgb {
color: rgb(255, 255, 255);
}
.rgba {
color: rgba(255, 255, 255, .3);
}
.hsl {
color: hsl(40, 50%, 50%);
}
.hsla {
color: hsla(40, 50%, 50%, .3);
}
When enabled and default options are used the following are allowed.
$literal: mediumslateblue;
$hexVar: #fff;
$rgb: rgb(255, 255, 255);
$rgba: rgba(255, 255, 255, .3);
$hsl: hsl(40, 50%, 50%);
$hsla: hsla(40, 50%, 50%, .3);
// using color literals as property names
$colors: (
red: #fff,
blue : (
orange: #fff
)
);
// using color literals as variable identifiers
$black: #000;
.literal {
color: $literal;
}
.linear-gradient-func {
background: linear-gradient(top, $hexVar, $literal);
}
.background {
background: 1px solid $literal;
}
.hex {
color: $hexVar;
}
.adj {
color: adjust-color($off-red, $blue: 5);
}
.scale {
color: scale-color($off-blue, $lightness: 50%);
}
.change {
color: change-color($orange-extra, $lightness: 40%, $alpha: .8);
}
.function {
color: test($hexVar);
}
.rgb {
color: $rgb;
}
.rgba {
color: $rgba;
}
.hsl {
color: $hsl;
}
.hsla {
color: $hsla;
}
[allow-rgba: true]
When enabled and allow-rgba
is set to true
, the following will be allowed:
// rgba in variables is still fine
$rgba: rgba(255, 0, 0, .5);
$red: rgb(255, 255, 255,);
// rgba can be used directly to alter a variables opacity
.color {
color: rgba($red, .3);
}
In addition, when enabled and allow-rgba
is set to true
, the following will be disallowed:
.color {
// you must use variables and not literals
color: rgba(0, 0, 0, .3);
color: rgba(black, .3);
}
[allow-variable-identifiers: false]
When enabled and allow-variable-identifiers
is set to false
, the following will be disallowed
// variable uses a color literal as an identifier
$black: #000
// variable using a color literal as an identifier is passed to a function
.test {
color: adjust-color($off-red, $blue: 5)
}
When enabled and allow-variable-identifiers
is set to false
, the following will be allowed
// variable not directly using a color literal as an identifier
$primary-black: #000
[allow-map-identifiers: false]
When enabled and allow-map-identifiers
is set to false
, the following will be disallowed
// map identifiers red, blue and orange share their name with a
// color literal and therefore shouldn't be used
$colors: (
red: #f00,
blue: (
orange: $orange
)
)
When enabled and allow-map-identifiers
is set to false
, the following will be allowed
$colors: (
primary-red: #f00,
map-blue: (
off-orange: $orange
)
)
Parsing error: 'import' and 'export' may appear only with 'sourceType: module' Open
import Vue from 'vue';
- Read upRead up
- Exclude checks
For more information visit Source: http://eslint.org/docs/rules/
Parsing error: 'import' and 'export' may appear only with 'sourceType: module' Open
import { getokAxios } from '@/services/interceptors';
- Read upRead up
- Exclude checks
For more information visit Source: http://eslint.org/docs/rules/