eslint plugin vue scoped css

eslint-plugin-vue-scoped-css

Eslint-Plugin-Vue-Scoped-CSS는 vue.js의 스코핑 CSS 용 Eslint 플러그인입니다.

특징

이 eslint 플러그인은 vue.js에서 스코핑 된 CSS를 사용할 때 문제를 피하는 데 도움이되는 더 나은 방법과 관련된 라인 규칙을 제공합니다.

• 스코핑 된 CSS에 대한 라인 규칙을 제공합니다.
• 레벨 4 선택기를 포함한 CSS 구문을 지원합니다.
• <style lang="scss"> 지원합니다.
• <style lang="stylus"> 지원합니다.
• Parses <style> , <template> 및 <script> 블록.

온라인 데모를 확인할 수 있습니다.

선적 서류 비치

문서를 참조하십시오.

설치

npm install --save-dev eslint eslint-plugin-vue-scoped-css vue-eslint-parser

요구 사항

• eslint v6.0.0 이상
• node.js v12.22.x, v14.17.x, v16.x 이상

용법

New Config ( eslint.config.js )

eslint.config.js 파일을 사용하여 규칙을 구성하십시오. https://eslint.org/docs/latest/use/configure/configuration-files-new를 참조하십시오.

예제 eslint.config.js :

 import eslintPluginVueScopedCSS from 'eslint-plugin-vue-scoped-css' ;
export default [
  // add more generic rule sets here, such as:
  // js.configs.recommended,
  ... eslintPluginVueScopedCSS . configs [ 'flat/recommended' ] ,
  {
    rules : {
      // override/add rules settings here, such as:
      // 'vue-scoped-css/no-unused-selector': 'error'
    }
  }
] ;

레거시 구성 ( .eslintrc )

.eslintrc.* 파일을 사용하여 규칙을 구성하십시오. https://eslint.org/docs/latest/use/configure/도 참조하십시오.

예 .eslintrc.js :

 module . exports = {
  extends : [
    // add more generic rulesets here, such as:
    // 'eslint:recommended',
    'plugin:vue-scoped-css/vue3-recommended'
  ] ,
  rules : {
    // override/add rules settings here, such as:
    // 'vue-scoped-css/no-unused-selector': 'error'
  }
} 

구성

이 플러그인은 사전 정의 된 구성을 제공합니다.

New Config ( eslint.config.js )

• *.configs['flat/base'] -이 플러그인을 활성화하기위한 설정 및 규칙
• *.configs['flat/recommended'] - /base 와 더 나은 방법을위한 규칙 vue.js 3.x에 대한 문제를 피하십시오.
• *.configs['flat/vue2-recommended'] - /base , vue.js 2.x의 문제를 피하는 데 도움이되는 더 나은 방법을위한 규칙
• *.configs['flat/all'] -이 플러그인의 모든 규칙이 포함되어 있습니다

레거시 구성 ( .eslintrc )

• plugin:vue-scoped-css/base 이 플러그인을 활성화하기위한 설정 및 규칙
• plugin:vue-scoped-css/recommended - /base , vue.js 2.x의 문제를 피하는 데 도움이되는 더 나은 방법을위한 규칙
• plugin:vue-scoped-css/vue3-recommended / /base , vue.js 3.x에 대한 문제를 피하는 데 도움이되는 더 나은 방법을위한 규칙
• plugin:vue-scoped-css/all 이 플러그인의 모든 규칙이 포함되어 있습니다

규칙

명령 줄의 --fix 옵션은 렌치가있는 규칙에 따라보고 된 문제를 자동으로 수정합니까? 아래에.

vue.js 3.x에 권장됩니다

이 범주의 모든 규칙을 다음과 같이 시행하십시오.

 export default [
  ... eslintPluginVueScopedCSS . configs [ 'flat/recommended' ] ,
]

또는

{
  "extends" : [ " plugin:vue-scoped-css/vue3-recommended " ]
}

규칙 ID	설명
vue- 스코 된 CSS/Enforce 스타일 유형	<style> 태그가 평범한 것으로 또는 scoped 또는 module 속성을 시행합니다.
vue- 스코 된 CSS/비 흡입 된 깊이-흡착기	감가 상각 된 딥 콤비네이터를 사용하지 못하게하십시오	?
vue- 스코 된 CSS/no-parent-of-v-global	::v-global pseudo element의 부모 선택기를 허용하지 않습니다
vue- 스코 된 CSS/no-parsing-error	<style> 에서 구문 분석 오류를 허용하지 않습니다
vue- 스코 된 CSS/비공개 키 프레임	스코프 CSS에 사용하지 않는 @keyframes 허용하지 않습니다
vue- 스코 된 CSS/비공개 선택기	<template> 에 사용하지 않는 스코어링 된 CSS에 정의 된 선택기를 허용하지 않습니다.
vue- 스코 된 CSS/요구 사항-깊이의 관점	셀렉터 인수를 전달해야합니다 ::v-deep()	?
vue- 스코 된 CSS/요구 사항 -Global	셀렉터 인수를 전달해야합니다 ::v-global()
vue- 스코 된 CSS/요구 사항 -V-Slotted-Argument	셀렉터 인수가 전달되어야합니다 ::v-slotted()

vue.js 2.x에 권장됩니다

이 범주의 모든 규칙을 다음과 같이 시행하십시오.

 export default [
  ... eslintPluginVueScopedCSS . configs [ 'flat/vue2-recommended' ] ,
]

또는

{
  "extends" : [ " plugin:vue-scoped-css/recommended " ]
}

규칙 ID	설명
vue- 스코 된 CSS/Enforce 스타일 유형	<style> 태그가 평범한 것으로 또는 scoped 또는 module 속성을 시행합니다.
vue- 스코 된 CSS/no-parsing-error	<style> 에서 구문 분석 오류를 허용하지 않습니다
vue- 스코 된 CSS/비공개 키 프레임	스코프 CSS에 사용하지 않는 @keyframes 허용하지 않습니다
vue- 스코 된 CSS/비공개 선택기	<template> 에 사용하지 않는 스코어링 된 CSS에 정의 된 선택기를 허용하지 않습니다.

분류되지 않은

사전 설정이 없으면이 범주에서 규칙을 활성화합니다. 원하는 경우 각 규칙을 활성화하십시오.

예를 들어:

{
  "rules" : {
    "vue-scoped-css/no-deprecated-v-enter-v-leave-class" : " error "
  }
}

규칙 ID	설명
vue- 스코 된 CSS/비 결핵 -V-enter-v-leave 클래스	V-Enter 및 V-Leave 클래스를 허용하지 않습니다.
vue- 스코 된 CSS/요구 사항-선택기 사용에 대한 인사이드	<template> 내부에 사용되지 않은 선택기를 허용하지 않습니다
vue- 스코 된 CSS/V-deep-pseudo 스타일	시행 :deep() / ::v-deep() 스타일	?
vue- 스코 된 CSS/V- 글로벌-슈도 스타일	시행 :global() / ::v-global() 스타일	?
vue- 스코 된 CSS/V- 슬롯-스세도 스타일	시행 :slotted() / ::v-slotted() 스타일	?

더 이상 사용되지 않았습니다

• 켈 다음 주요 릴리스에서 더 이상 사용되지 않은 규칙을 제거 할 것입니다. 후임자/새로운 규칙으로 마이그레이션하십시오.
• ? 우리는 자원이 충분하지 않기 때문에 더 이상 사용되지 않은 규칙에있는 버그를 수정하지 않습니다.

규칙 ID	대체
vue- 스코 된 CSS/요구 사항	vue- 스코 된 CSS/Enforce 스타일 유형

기여

기고를 환영합니다!

Github의 문제/PR을 사용하십시오.

개발 도구

• npm test 테스트를 실행하고 적용 범위를 측정합니다.
• npm run update readme 및 권장 구성을 업데이트하기 위해 실행됩니다.

특허

라이센스 권리 및 제한 (MIT)은 라이센스 파일을 참조하십시오.