Showing 54 of 67 total issues
Similar blocks of code found in 2 locations. Consider refactoring. Open
closeSubNav() {
this.elem.setAttribute('aria-expanded', 'false');
this.item.classList.remove(this.options.itemExpandedClass);
}
- Read upRead up
Duplicated Code
Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:
Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.
When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).
Tuning
This issue has a mass of 55.
We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.
The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.
If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.
See codeclimate-duplication
's documentation for more information about tuning the mass threshold in your .codeclimate.yml
.
Refactorings
- Extract Method
- Extract Class
- Form Template Method
- Introduce Null Object
- Pull Up Method
- Pull Up Field
- Substitute Algorithm
Further Reading
- Don't Repeat Yourself on the C2 Wiki
- Duplicated Code on SourceMaking
- Refactoring: Improving the Design of Existing Code by Martin Fowler. Duplicated Code, p76
Similar blocks of code found in 2 locations. Consider refactoring. Open
openSubNav() {
this.elem.setAttribute('aria-expanded', 'true');
this.item.classList.add(this.options.itemExpandedClass);
}
- Read upRead up
Duplicated Code
Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:
Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.
When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).
Tuning
This issue has a mass of 55.
We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.
The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.
If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.
See codeclimate-duplication
's documentation for more information about tuning the mass threshold in your .codeclimate.yml
.
Refactorings
- Extract Method
- Extract Class
- Form Template Method
- Introduce Null Object
- Pull Up Method
- Pull Up Field
- Substitute Algorithm
Further Reading
- Don't Repeat Yourself on the C2 Wiki
- Duplicated Code on SourceMaking
- Refactoring: Improving the Design of Existing Code by Martin Fowler. Duplicated Code, p76
Similar blocks of code found in 2 locations. Consider refactoring. Open
openSubNav() {
this.toggleElement.setAttribute('aria-expanded', true);
this.item.classList.add(this.options.itemExpandedClass);
}
- Read upRead up
Duplicated Code
Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:
Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.
When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).
Tuning
This issue has a mass of 55.
We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.
The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.
If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.
See codeclimate-duplication
's documentation for more information about tuning the mass threshold in your .codeclimate.yml
.
Refactorings
- Extract Method
- Extract Class
- Form Template Method
- Introduce Null Object
- Pull Up Method
- Pull Up Field
- Substitute Algorithm
Further Reading
- Don't Repeat Yourself on the C2 Wiki
- Duplicated Code on SourceMaking
- Refactoring: Improving the Design of Existing Code by Martin Fowler. Duplicated Code, p76
Avoid deeply nested control flow statements. Open
if (this.isSubNavItem()) {
// Close the subnav and put the focus on the trigger.
this.closeSubNav(true);
}
Avoid deeply nested control flow statements. Open
else if (isHome(theKey)) {
this.nav.focusOn('first');
}
// Handler for the end key.
else if (isEnd(theKey)) {
Similar blocks of code found in 2 locations. Consider refactoring. Open
closeSubNav() {
this.toggleElement.setAttribute('aria-expanded', false);
this.item.classList.remove(this.options.itemExpandedClass);
}
- Read upRead up
Duplicated Code
Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:
Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.
When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).
Tuning
This issue has a mass of 55.
We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.
The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.
If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.
See codeclimate-duplication
's documentation for more information about tuning the mass threshold in your .codeclimate.yml
.
Refactorings
- Extract Method
- Extract Class
- Form Template Method
- Introduce Null Object
- Pull Up Method
- Pull Up Field
- Substitute Algorithm
Further Reading
- Don't Repeat Yourself on the C2 Wiki
- Duplicated Code on SourceMaking
- Refactoring: Improving the Design of Existing Code by Martin Fowler. Duplicated Code, p76
Avoid deeply nested control flow statements. Open
if (this.nav.isSubNav()) {
this.closeSubNav();
let parent = this.nav.getParentNav();
// Focus on the previous item in the parent nav.
parent.focusOn('prev', this.nav.elem);
Avoid deeply nested control flow statements. Open
if (this.nav.isDesktopNav()) {
if (this.nav.isSubNav()) {
this.closeSubNav();
let parent = this.nav.getParentNav();
// Focus on the next item in the parent nav.
Identical blocks of code found in 2 locations. Consider refactoring. Open
if (typeof this[handler] === 'function') {
// The element that was clicked.
const target = event.target || event.srcElement;
return this[handler](event, target);
}
- Read upRead up
Duplicated Code
Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:
Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.
When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).
Tuning
This issue has a mass of 50.
We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.
The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.
If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.
See codeclimate-duplication
's documentation for more information about tuning the mass threshold in your .codeclimate.yml
.
Refactorings
- Extract Method
- Extract Class
- Form Template Method
- Introduce Null Object
- Pull Up Method
- Pull Up Field
- Substitute Algorithm
Further Reading
- Don't Repeat Yourself on the C2 Wiki
- Duplicated Code on SourceMaking
- Refactoring: Improving the Design of Existing Code by Martin Fowler. Duplicated Code, p76
Identical blocks of code found in 2 locations. Consider refactoring. Open
if (typeof this[handler] === 'function') {
// The element that was clicked.
const target = event.target || event.srcElement;
return this[handler](event, target);
}
- Read upRead up
Duplicated Code
Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:
Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.
When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).
Tuning
This issue has a mass of 50.
We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.
The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.
If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.
See codeclimate-duplication
's documentation for more information about tuning the mass threshold in your .codeclimate.yml
.
Refactorings
- Extract Method
- Extract Class
- Form Template Method
- Introduce Null Object
- Pull Up Method
- Pull Up Field
- Substitute Algorithm
Further Reading
- Don't Repeat Yourself on the C2 Wiki
- Duplicated Code on SourceMaking
- Refactoring: Improving the Design of Existing Code by Martin Fowler. Duplicated Code, p76
Function focusOn
has a Cognitive Complexity of 11 (exceeds 10 allowed). Consider refactoring. Open
focusOn(link, currentItem = null) {
let currentIndex = null;
let lastIndex = null;
if (currentItem) {
currentIndex = this.items.indexOf(currentItem);
- Read upRead up
Cognitive Complexity
Cognitive Complexity is a measure of how difficult a unit of code is to intuitively understand. Unlike Cyclomatic Complexity, which determines how difficult your code will be to test, Cognitive Complexity tells you how difficult your code will be to read and comprehend.
A method's cognitive complexity is based on a few simple rules:
- Code is not considered more complex when it uses shorthand that the language provides for collapsing multiple statements into one
- Code is considered more complex for each "break in the linear flow of the code"
- Code is considered more complex when "flow breaking structures are nested"
Further reading
Type-selector should be nested within its parent Type-selector Open
li ul li a {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Space expected around operator Open
-2: (mobile: 0.8rem, tablet: 0.9rem, desktop: 1rem),
- Read upRead up
- Exclude checks
Space Around Operator
Rule space-around-operator
will enforce whether or not a single space should be included before and after the following operators: +
, -
, /
, *
, %
, <
, >
==
, !=
, <=
and >=
.
Options
-
include
:true
/false
(defaults totrue
)
Examples
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
margin: 5px + 15px;
}
$foo: 1;
$bar: 3;
.foo {
margin: $foo + $bar + 'px';
}
$foo: 1 + 1;
$bar: 2 - 1;
@if $foo == $bar {
$baz: 1;
}
@if ($foo != $bar) {
$baz: 1;
}
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
margin: 5px+15px;
}
$foo: 1;
$bar: 3;
.foo {
margin: $foo+$bar+'px';
}
$foo: 1+1;
$bar: 2-1;
@if $foo==$bar {
$baz: 1;
}
@if ($foo!=$bar) {
$baz: 1;
}
When include: true
or include: false
multiple spaces around operators are disallowed:
.foo {
margin: 5px + 15px;
}
$foo: 1 +1;
$bar: 2- 1;
Statement must begin on a new line Open
} @else if ($position == 'right') {
- Read upRead up
- Exclude checks
Brace Style
Rule brace-style
will enforce the use of the chosen brace style.
Options
-
style
:'1tbs'
,'stroustrup'
,'allman'
(defaults to1tbs
) -
allow-single-line
:true
/false
(defaults totrue
)
Examples
style
When style: '1tbs'
or style: 'stroustrup'
, the following are allowed. When style: 'allman'
the following are disallowed:
.foo {
content: 'foo';
}
.foo,
.bar {
content: 'bar';
}
@function foo() {
@return 'foo';
}
@mixin bar() {
content: 'bar';
}
When style: 'allman'
, the following are allowed. When style: '1tbs'
or style: 'stroustrup'
, the following are disallowed:
.foo
{
content: 'foo';
}
.foo,
.bar
{
content: 'bar';
}
@function foo()
{
@return 'foo';
}
@mixin bar()
{
content: 'bar';
}
Differences between 1tbs
and stroustrup
When style: '1tbs'
, the following are allowed. When style: 'stroustrup'
or style: 'allman'
, the following are disallowed:
@if ($foo) {
$bar: 'bar';
} @else {
$bar: false;
}
When style: 'stroustrup'
, the following are allowed. When style: '1tbs'
or style: 'stroustrup'
, the following are disallowed:
@if ($foo) {
$bar: 'bar';
}
@else {
$bar: false;
}
allow-single-line
When allow-single-line: true
, the following are allowed. When allow-single-line: false
, the following are disallowed:
.foo { content: 'foo'; }
.foo, .bar { content: 'bar'; }
@if ($foo) { $bar: 'foo'; }
// Allowed with style: '1tbs', disallowed with style: 'stroustrup' or style: 'allman'
@if ($foo) { $bar: 'foo'; } @else { $bar: false; }
// Allowed with style: 'stroustrup' or style: 'allman', disallowed with style: '1tbs'
@if ($foo) { $bar: 'foo'; }
@else { $bar: false; }
Nesting depth 5 greater than max of 4 Open
&::before {
- Read upRead up
- Exclude checks
Nesting Depth
Rule nesting-depth
will enforce how deeply a selector can be nested.
Options
-
max-depth
: number (defaults to2
)
Examples
When enabled (assuming max-depth: 2
) the deepest element (&:hover
and &--modifier
) are at at depth 2. Any nested selector deeper is disallowed:
.foo {
.baz {
&:hover {
// Deepest Nest Allowed
}
}
}
.block {
&__element {
&--modifier {
// Deepest Nest Allowed
}
}
}
Space expected between blocks Open
&::before {
- 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 around operator Open
-4: 0.16666667,
- Read upRead up
- Exclude checks
Space Around Operator
Rule space-around-operator
will enforce whether or not a single space should be included before and after the following operators: +
, -
, /
, *
, %
, <
, >
==
, !=
, <=
and >=
.
Options
-
include
:true
/false
(defaults totrue
)
Examples
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
margin: 5px + 15px;
}
$foo: 1;
$bar: 3;
.foo {
margin: $foo + $bar + 'px';
}
$foo: 1 + 1;
$bar: 2 - 1;
@if $foo == $bar {
$baz: 1;
}
@if ($foo != $bar) {
$baz: 1;
}
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
margin: 5px+15px;
}
$foo: 1;
$bar: 3;
.foo {
margin: $foo+$bar+'px';
}
$foo: 1+1;
$bar: 2-1;
@if $foo==$bar {
$baz: 1;
}
@if ($foo!=$bar) {
$baz: 1;
}
When include: true
or include: false
multiple spaces around operators are disallowed:
.foo {
margin: 5px + 15px;
}
$foo: 1 +1;
$bar: 2- 1;
Nesting depth 5 greater than max of 4 Open
&::before {
- Read upRead up
- Exclude checks
Nesting Depth
Rule nesting-depth
will enforce how deeply a selector can be nested.
Options
-
max-depth
: number (defaults to2
)
Examples
When enabled (assuming max-depth: 2
) the deepest element (&:hover
and &--modifier
) are at at depth 2. Any nested selector deeper is disallowed:
.foo {
.baz {
&:hover {
// Deepest Nest Allowed
}
}
}
.block {
&__element {
&--modifier {
// Deepest Nest Allowed
}
}
}
Type-selector should be nested within its parent Type-selector Open
li ul li ul li a {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Duplicate properties are not allowed within a block Open
src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
- Read upRead up
- Exclude checks
No Duplicate Properties
Rule no-duplicate-properties
will enforce that duplicate properties are not allowed within the same block.
Options
-
exclude
:[array of property names to be excluded from this rule]
(defaults to empty array[]
)
Examples
When enabled, the following are disallowed:
.foo {
margin: 0 0 15px;
margin: 0;
}
Exclude
When a property is added to the exclude array as shown below then you may place duplicate properties immediately after one another, this is to prevent accidental duplication of properties.
no-duplicate-properties:
- 1
-
exclude:
- display
When display
is added to the exclude array the following would be allowed:
.display-block {
display: flex;
display: inline-block;
float: right;
}
When display
is added to the exclude array the following would still be disallowed as the duplicate properties are separated by another property:
.display-block {
display: flex;
float: right;
display: inline-block;
}