SCSS 파일을 검사하는 scss lint 설정파일

scss-lint.yml

# https://github.com/brigade/scss-lint/blob/master/lib/scss_lint/linter/README.md
# exclude 는 제외할 파일을 지정
# scss_files: "**/*.scss"

# Default severity of all linters.
severity: warning

linters:
  # ! 플래그에 간격에 대한설정
  BangFormat:
    enabled: true
    space_before_bang: true
    space_after_bang: false

  # 기본적으로 사용하지 않도록 설정
  # BemDepth

  # 보더 스타일 설정 border: none or border: 0
  BorderZero:
    enabled: true

  # 기본적으로 사용하지 않도록 설정
  # ChainedClasses

  # 16진수를 통해 컬러값을 설정 color: green 보다 color: #f0f 를 선호
  ColorKeyword:
    enabled: true

  # 색상이름을 변수이름으로 사용할지 설정합니다. color: green 보다 color: $body-color
  ColorVariable:
    enabled: false

  # 주석에 대한 설정 // 주석을 선호, /* .. */ 주석은 저작권과 같은 특별한 경우만 사용 권장
  Comment:
    enabled: true
    style: loud
    allowed: '^[/* ]'
    exclude: ['_normalize.scss']

  # 사용안함 Compass Linters 를 사용할지 설정
  Compass Linters:
    enabled: false

  # @debug 구문을 통해 디버그 할지를 설정
  DebugStatement:
    enabled: true

  # @extend @include 와 같은 룰을 우선적으로 렌더링할지 설정합니다.중첩과 상속 문제를 포함한다.
  # https://github.com/brigade/scss-lint/blob/master/lib/scss_lint/linter/README.md#declarationorder
  DeclarationOrder:
    enabled: false

  # 기본적으로 사용하지 않도록 설정
  # DisableLinterReason

  # 단일규칙세트에 중복 속성을 사용할지 설정.
  # a {
  #   margin: 10px;
  #   margin: 0;
  # }
  DuplicateProperty:
    enabled: true
    exclude: ['../src/sass/common/_base.scss']

  # @else 구문의 스타일을 설정.
  # @if {
  #   ...
  # } @else {
  #   ...
  # }
  ElsePlacement:
    enabled: true
    style: same_line # or 'new_line'

  # 블럭을 분리하는 빈줄을 사용할지 설정
  EmptyLineBetweenBlocks:
    enabled: true
    ignore_single_line_blocks: true

  # 비어있는 규칙을 알려줄지 설정
  EmptyRule:
    enabled: true

  # 기본적으로 사용하지 않도록 설정
  # ExtendDirective

  # 파일의 마지막 줄바꿈을 사용할지를 설정
  FinalNewline:
    enabled: false
    present: true # 마지막 개행문자가 존재하면 true

  # Hex 색상 스타일을 설정
  HexLength:
    enabled: true
    style: short # or 'long'

  # Hex 색상코드 문자 스타일을 설정
  HexNotation:
    enabled: true
    style: lowercase # or 'uppercase'

  # Hex 코드 유효성 검사 설정
  HexValidation:
    enabled: true

  # id 셀렉터를 사용할지 설정, 사용안함을 선호
  IdSelector:
    enabled: true
    exclude: ['../src/sass/layout/_admin.scss','../src/sass/template/*.scss']

  # !important 를 사용할지 설정, 사용안함을 선호
  ImportantRule:
    enabled: false

  # @import 경로에 밑줄(_)과 확장자를 포함할지 설정
  ImportPath:
    enabled: true
    leading_underscore: false
    filename_extension: false

  # 들여쓰기 형태를 설정
  Indentation:
    enabled: false
    character: tab # 'tab' or 'space'
    width: 1

  # 소숫점 앞에 0을 사용할지 설정, exclude_zero는 0 사용안함
  LeadingZero:
    enabled: false
    style: exclude_zero # or 'include_zero'

  # 사용안함
  # 길이 리터럴 변수를 사용할지 설정
  # $input-height - $input-line-weight * 2 형태를 선호
  LengthVariable:
    enabled: false

  # 규칙이 중첩되는것을 허용할지 설정
  # force_nesting : 중첩될 수 있음
  MergeableSelector:
    enabled: false
    force_nesting: true

  # Functions, mixins, variables, placeholders 는 모두 소문자와 밑줄로 만들어져야 한다.
  NameFormat:
    enabled: true
    allow_leading_underscore: true # 이름은 하나의 밑줄로 시작하는 것을 허용
    convention: hyphenated_lowercase # or 'BEM', or a regex pattern

  # 깊은 중첩을 허용할지 설정
  # max_depth : 3 # 최대깊이 3단계
  NestingDepth:
    enabled: false

  # @extend 구문에 항상 Placeholder 를 사용할지 설정
  # @extend %error;
  PlaceholderInExtend:
    enabled: false

  # 속성정렬 설정
  PropertySortOrder:
    enabled: false
    ignore_unspecified: false
    severity: warning
    exclude: ['../src/sass/common/_base.scss']
    order: [
      "position",
      "top",
      "right",
      "bottom",
      "left",
      "z-index",
      "-webkit-box-sizing",
      "-moz-box-sizing",
      "box-sizing",
      "display",
      "float",
      "width",
      "min-width",
      "max-width",
      "height",
      "min-height",
      "max-height",
      "flex",
      "flex-direction",
      "flex-flow",
      "flex-order",
      "flex-pack",
      "flex-align",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "overflow",
      "overflow-x",
      "overflow-y",
      "-webkit-overflow-scrolling",
      "-ms-overflow-x",
      "-ms-overflow-y",
      "-ms-overflow-style",
      "clip",
      "clear",
      "font",
      "font-family",
      "font-size",
      "font-style",
      "font-weight",
      "font-variant",
      "font-size-adjust",
      "font-stretch",
      "font-effect",
      "font-emphasize",
      "font-emphasize-position",
      "font-emphasize-style",
      "font-smooth",
      "-webkit-hyphens",
      "-moz-hyphens",
      "hyphens",
      "line-height",
      "color",
      "text-align",
      "-webkit-text-align-last",
      "-moz-text-align-last",
      "-ms-text-align-last",
      "text-align-last",
      "text-emphasis",
      "text-emphasis-color",
      "text-emphasis-style",
      "text-emphasis-position",
      "text-decoration",
      "text-indent",
      "text-justify",
      "text-outline",
      "-ms-text-overflow",
      "text-overflow",
      "text-overflow-ellipsis",
      "text-overflow-mode",
      "text-shadow",
      "text-transform",
      "text-wrap",
      "-webkit-text-size-adjust",
      "-ms-text-size-adjust",
      "letter-spacing",
      "-ms-word-break",
      "word-break",
      "word-spacing",
      "-ms-word-wrap",
      "word-wrap",
      "-moz-tab-size",
      "-o-tab-size",
      "tab-size",
      "white-space",
      "vertical-align",
      "list-style",
      "list-style-position",
      "list-style-type",
      "list-style-image",
      "pointer-events",
      "-ms-touch-action",
      "touch-action",
      "cursor",
      "visibility",
      "zoom",
      "table-layout",
      "empty-cells",
      "caption-side",
      "border-spacing",
      "border-collapse",
      "content",
      "quotes",
      "counter-reset",
      "counter-increment",
      "resize",
      "-webkit-user-select",
      "-moz-user-select",
      "-ms-user-select",
      "-o-user-select",
      "user-select",
      "nav-index",
      "nav-up",
      "nav-right",
      "nav-down",
      "nav-left",
      "background",
      "background-color",
      "background-image",
      "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
      "filter:progid:DXImageTransform.Microsoft.gradient",
      "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
      "filter",
      "background-repeat",
      "background-attachment",
      "background-position",
      "background-position-x",
      "background-position-y",
      "-webkit-background-clip",
      "-moz-background-clip",
      "background-clip",
      "background-origin",
      "-webkit-background-size",
      "-moz-background-size",
      "-o-background-size",
      "background-size",
      "border",
      "border-color",
      "border-style",
      "border-width",
      "border-top",
      "border-top-color",
      "border-top-style",
      "border-top-width",
      "border-right",
      "border-right-color",
      "border-right-style",
      "border-right-width",
      "border-bottom",
      "border-bottom-color",
      "border-bottom-style",
      "border-bottom-width",
      "border-left",
      "border-left-color",
      "border-left-style",
      "border-left-width",
      "border-radius",
      "border-top-left-radius",
      "border-top-right-radius",
      "border-bottom-right-radius",
      "border-bottom-left-radius",
      "-webkit-border-image",
      "-moz-border-image",
      "-o-border-image",
      "border-image",
      "-webkit-border-image-source",
      "-moz-border-image-source",
      "-o-border-image-source",
      "border-image-source",
      "-webkit-border-image-slice",
      "-moz-border-image-slice",
      "-o-border-image-slice",
      "border-image-slice",
      "-webkit-border-image-width",
      "-moz-border-image-width",
      "-o-border-image-width",
      "border-image-width",
      "-webkit-border-image-outset",
      "-moz-border-image-outset",
      "-o-border-image-outset",
      "border-image-outset",
      "-webkit-border-image-repeat",
      "-moz-border-image-repeat",
      "-o-border-image-repeat",
      "border-image-repeat",
      "outline",
      "outline-width",
      "outline-style",
      "outline-color",
      "outline-offset",
      "-webkit-box-shadow",
      "-moz-box-shadow",
      "box-shadow",
      "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
      "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
      "opacity",
      "-ms-interpolation-mode",
      "-webkit-transition",
      "-moz-transition",
      "-ms-transition",
      "-o-transition",
      "transition",
      "-webkit-transition-delay",
      "-moz-transition-delay",
      "-ms-transition-delay",
      "-o-transition-delay",
      "transition-delay",
      "-webkit-transition-timing-function",
      "-moz-transition-timing-function",
      "-ms-transition-timing-function",
      "-o-transition-timing-function",
      "transition-timing-function",
      "-webkit-transition-duration",
      "-moz-transition-duration",
      "-ms-transition-duration",
      "-o-transition-duration",
      "transition-duration",
      "-webkit-transition-property",
      "-moz-transition-property",
      "-ms-transition-property",
      "-o-transition-property",
      "transition-property",
      "-webkit-transform",
      "-moz-transform",
      "-ms-transform",
      "-o-transform",
      "transform",
      "-webkit-transform-origin",
      "-moz-transform-origin",
      "-ms-transform-origin",
      "-o-transform-origin",
      "transform-origin",
      "-webkit-animation",
      "-moz-animation",
      "-ms-animation",
      "-o-animation",
      "animation",
      "-webkit-animation-name",
      "-moz-animation-name",
      "-ms-animation-name",
      "-o-animation-name",
      "animation-name",
      "-webkit-animation-duration",
      "-moz-animation-duration",
      "-ms-animation-duration",
      "-o-animation-duration",
      "animation-duration",
      "-webkit-animation-play-state",
      "-moz-animation-play-state",
      "-ms-animation-play-state",
      "-o-animation-play-state",
      "animation-play-state",
      "-webkit-animation-timing-function",
      "-moz-animation-timing-function",
      "-ms-animation-timing-function",
      "-o-animation-timing-function",
      "animation-timing-function",
      "-webkit-animation-delay",
      "-moz-animation-delay",
      "-ms-animation-delay",
      "-o-animation-delay",
      "animation-delay",
      "-webkit-animation-iteration-count",
      "-moz-animation-iteration-count",
      "-ms-animation-iteration-count",
      "-o-animation-iteration-count",
      "animation-iteration-count",
      "-webkit-animation-direction",
      "-moz-animation-direction",
      "-ms-animation-direction",
      "-o-animation-direction",
      "animation-direction"
    ]

  # 기본적으로 사용하지 않도록 설정
  # PropertyCount

  # 벤더프리픽스를 사용할지 설정
  # extra_properties 는 추가목록
  PropertySpelling:
    enabled: true
    extra_properties: []

  # 속성에 허용되는 단위를 설정
  PropertyUnits:
    enabled: false

  # Pseudo element, Pseudo-classes 에 : 를 한개 또는 두개 사용할지 설정
  # Pseudo element 는 두개 사용, ::before, ::first-letter
  # Pseudo-classes 는 한개 사용, :hover, :first-child
  PseudoElement:
    enabled: false

  # html 태그에 규칙을 적용할지를 설정, 사용하지 않기를 선호
  # div.thing {} X
  QualifyingElement:
    enabled: false
    allow_element_with_attribute: false # 요소 속성을 규정 할 수 있도록 허용안함
    allow_element_with_class: false     # 요소 클래스를 규정 할 수 있도록 허용안함
    allow_element_with_id: false        # 요소 아이디를 규정 할 수 있도록 허용

  # 셀렉터의 깊이를 설정
  SelectorDepth:
    enabled: false

  # 셀렉터의 포맷을 설정.
  # 기본값:hyphenated_lowercase 형태는 .class-class
  SelectorFormat:
    enabled: true
    convention: hyphenated_lowercase # or 'BEM', or 'snake_case', or 'camel_case', or a regex pattern
    exclude: ['../src/sass/common/_extend.scss','../src/sass/template/*.scss','../src/sass/admin/_custom.scss']

  # 속성에 축약형식을 사용할지 설정
  Shorthand:
    enabled: true

  # 규칙세트에서 속성을 한줄에 표기할지를 설정
  # 예외를 추가할경우 allow_single_line_rule_sets 사용
  SingleLinePerProperty:
    enabled: true
    allow_single_line_rule_sets: true

  # 쉼표 다음에 줄바꿈을 할지 설정
  SingleLinePerSelector:
    enabled: true
    exclude: ['../src/sass/common/_reset.scss']

  # 쉼표 다음에 공백을 사용할지 설정
  SpaceAfterComma:
    enabled: true
    exclude: ['../src/sass/vendors/_bootstrap-theme.scss']

  # 콜론 다음에 공백을 포함할지 설정
  SpaceAfterPropertyColon:
    enabled: true
    style: at_least_one_space # or 'no_space', or 'at_least_one_space', or 'aligned'

  # 속성이름과 콜론사이에 공백을 사용할지 설정
  SpaceAfterPropertyName:
    enabled: true

  # 변수와 속성사이에 콜론의 공백을 사용할지 설정, $my-color: #fff;
  SpaceAfterVariableColon:
    enabled: true

  # 변수와 콜론사이에 공백을 사용할지 설정, $my-var: 0;
  SpaceAfterVariableName:
    enabled: true
    exclude: ['../src/sass/common/_variables.scss']

  # 연산자 앞뒤로 공백을 사용할지 설정, margin: 5px + 5px;
  SpaceAroundOperator:
    enabled: true

  # 여는 중괄호 앞에 공백을 사용할지 설정
  # p {
  #   ...
  # }
  SpaceBeforeBrace:
    enabled: true
    style: space
    allow_single_line_padding: true # 한줄블럭도 공백 허용

  # 괄호() 에 공백을 사용할지 설정, color: rgba(0, 0, 0, .1);
  SpaceBetweenParens:
    enabled: true
    spaces: 0

  # 문자열에 홑따옴표 사용할지 설정
  StringQuotes:
    enabled: true
    style: double_quotes # double_quotes or single_quotes

  # 세미콜론 사용여부를 설정
  # @extend, @include, @import, 변수 등은 항상 세미콜론으로 끝나야한다.
  TrailingSemicolon:
    enabled: true

  # 후행 공백을 포함하는 보고서 라인
  TrailingWhitespace:
    enabled: false

  # 기본적으로 사용하지 않도록 설정
  # 소수점이 있는 숫자 값의 뒤에 0을 쓰지 않는다. margin: .500em; -> margin: .5em;
  TrailingZero:
    enabled: false

  # 기본적으로 사용하지 않도록 설정
  # transition 에 사용되는 all 키워드를 사용할지 설정
  # TransitionAll

  # 소숫점 뒤에오는 0을 사용할지 설정
  UnnecessaryMantissa:
    enabled: true

  # 부모참조연산자(&) 를 사용할지 설정
  UnnecessaryParentReference:
    enabled: true

  # url 형식에 도메인을 포함할지 설정, 사용하지 않기를 선호
  UrlFormat:
    enabled: true
    exclude: ['../src/sass/modules/_slider.scss']

  # url 은 항상따옴표로 묶어야할지를 설정(홑따옴표 가능)
  UrlQuotes:
    enabled: true

  # 벤더프리픽스의 사용여부를 설정
  VendorPrefixes:
    enabled: true
    identifier_list: base         # 미리 정의된 식별자 목록의 이름
    include: []
    exclude: ['_normalize.scss']

  # 0 값에 길이 단위를 생략할지 설정
  ZeroUnit:
    enabled: true