eslint plugin vue scoped css

eslint plugin vue scoped css

หมวดหมู่อื่นๆ

v2.9.0

ดาวน์โหลด

ESLINT-PLUGIN-VUE-SCOPED-CSS

ESLINT-PLUGIN-VUE-SCOPED-CSS เป็นปลั๊กอิน ESLINT สำหรับ CSS แบบ scoped ใน vue.js.

สร้างสถานะ

คุณสมบัติ

ปลั๊กอิน ESLINT นี้ให้กฎผ้าสำลีที่เกี่ยวข้องกับวิธีที่ดีกว่าเพื่อช่วยให้คุณหลีกเลี่ยงปัญหาเมื่อใช้ CSS ที่กำหนดขอบเขตใน Vue.js.

ให้กฎผ้าสำลีสำหรับ CSS ที่กำหนดขอบเขต
รองรับไวยากรณ์ CSS รวมถึงตัวเลือกระดับ 4
รองรับ <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 และสูงกว่า

การใช้งาน

ใหม่ 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'
  }
}

กำหนดค่า

ปลั๊กอินนี้มีการกำหนดค่าที่กำหนดไว้ล่วงหน้า:

ใหม่ 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 " ]
}

รหัส	คำอธิบาย
Vue-scoped-CSS/การบังคับใช้สไตล์	บังคับใช้แท็ก `<style>` ให้เป็นแบบธรรมดาหรือมีแอตทริบิวต์ที่ `scoped` หรือ `module`
VUE-scoped-CSS/No-deprecated-dep-combinator	ไม่อนุญาตให้ใช้ combinators ลึกที่เลิกใช้แล้ว	-
VUE-scoped-CSS/No-Parent-V-Global	ไม่อนุญาตตัวเลือกผู้ปกครองสำหรับ `::v-global` pseudo-etement
VUE-scoped-CSS/no-parsing-error	ไม่อนุญาตให้แยกวิเคราะห์ข้อผิดพลาดใน `<style>`
VUE-scoped-CSS/no-unused-keyframes	ไม่อนุญาต `@keyframes` ซึ่งไม่ได้ใช้ใน CSS ที่กำหนดขอบเขต
VUE-scoped-CSS/No-unused-selector	ไม่อนุญาตตัวเลือกที่กำหนดไว้ใน CSS ที่ไม่ได้ใช้งานที่ไม่ได้ใช้ใน `<template>`
Vue-scoped-CSS/reghed-v-deep-argument	ต้องการอาร์กิวเมนต์ตัวเลือกที่จะส่งผ่านไปยัง `::v-deep()`	-
Vue-scoped-CSS/regheg-v-global-argument	ต้องการอาร์กิวเมนต์ตัวเลือกที่จะส่งผ่านไปยัง `::v-global()`
Vue-scoped-CSS/regheg-v-slotted-argument	ต้องการอาร์กิวเมนต์ตัวเลือกที่จะส่งไปยัง `::v-slotted()`

แนะนำสำหรับ vue.js 2.x

บังคับใช้กฎทั้งหมดในหมวดหมู่นี้ด้วย:

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

หรือ

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

รหัส	คำอธิบาย
Vue-scoped-CSS/การบังคับใช้สไตล์	บังคับใช้แท็ก `<style>` ให้เป็นแบบธรรมดาหรือมีแอตทริบิวต์ที่ `scoped` หรือ `module`
VUE-scoped-CSS/no-parsing-error	ไม่อนุญาตให้แยกวิเคราะห์ข้อผิดพลาดใน `<style>`
VUE-scoped-CSS/no-unused-keyframes	ไม่อนุญาต `@keyframes` ซึ่งไม่ได้ใช้ใน CSS ที่กำหนดขอบเขต
VUE-scoped-CSS/No-unused-selector	ไม่อนุญาตตัวเลือกที่กำหนดไว้ใน CSS ที่ไม่ได้ใช้งานที่ไม่ได้ใช้ใน `<template>`

ไม่มีหมวดหมู่

ไม่มีการตั้งค่าล่วงหน้าเปิดใช้งานกฎในหมวดหมู่นี้ โปรดเปิดใช้งานแต่ละกฎหากคุณต้องการ

ตัวอย่างเช่น:

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

รหัส	คำอธิบาย
Vue-scoped-CSS/No-defecated-V-enter-V-leave-class	ไม่อนุญาตให้คลาส V-enter และ V-Leave
VUE-scoped-CSS/ต้องการการเลือกใช้ Inside	ไม่อนุญาตตัวเลือกที่กำหนดไว้ซึ่งไม่ได้ใช้ภายใน `<template>`
สไตล์ Vue-scoped-CSS/V-DEEP-PSEUDO	บังคับใช้ `:deep()` / `::v-deep()` สไตล์	-
Vue-scoped-CSS/v-global-pseudo-style	บังคับใช้ `:global()` / `::v-global()` สไตล์	-
Vue-scoped-CSS/V-slotted-pseudo	บังคับ `:slotted()` / `::v-slotted()` สไตล์	-

ซึ่งเลิกใช้แล้ว

เรากำลังจะลบกฎที่เลิกใช้ในการเปิดตัวครั้งใหญ่ครั้งต่อไป โปรดย้ายไปยังผู้สืบทอด/กฎใหม่
- เราไม่แก้ไขข้อบกพร่องที่อยู่ในกฎที่เลิกใช้เนื่องจากเราไม่มีทรัพยากรเพียงพอ