npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@yomukizrj/eslint-config-vue

v0.1.0

Published

vue2&vue3的通用配置

Downloads

3

Readme

eslint vue通用配置

vue api使用规范

vue/no-v-html⚠️

尽量避免使用v-html

vue/no-restricted-v-bind

规则不允许在应用程序中使用的v-bind参数名称。

<template>
  <!-- ✗ BAD -->
  <MyInput :v-model="x" />
  <div :v-if="x" />
</template>

vue/no-useless-v-bind❌🔨

禁止使用无意义的v-bind

<template>
  <!-- ✗ BAD -->
  <div v-bind:foo="'bar'"/>
  <div :foo="'bar'"/>
</template>

vue/prefer-separate-static-class❌🔨

禁止在:class中使用静态类。

<template>
  <!-- ✗ BAD -->
  <div :class="'static-class'" />
  <div :class="{'static-class': true, 'dynamic-class': foo}" />
  <div :class="['static-class', dynamicClass]" />

  <!-- ✓ GOOD -->
  <div class="static-class" />
  <div class="static-class" :class="{'dynamic-class': foo}" />
  <div class="static-class" :class="[dynamicClass]" />
</template>

vue 命名规范

vue/component-options-name-casing❌🔨

components中注册组件时,使用PascalCase

vue/component-name-in-template-casing❌🔨

template中的组件命名使用PascalCase

vue/custom-event-name-casing

自定义事件使用kebab-case

vue/multi-word-component-names

要求组件名称始终是多个单词,除了index

/* ✓ GOOD */
emit('my-event')

vue 代码格式化

vue/block-tag-newline❌🔨

在块级标签打开和关闭之前强制换行,最大空行数量为1。

<!-- ✓ GOOD -->
<script>

export default {
}

</script>

vue/padding-line-between-blocks❌🔨

要求在给定的两个块之间使用空行。

<!-- ✓ GOOD -->
<template>
  <div></div>
</template>

<script>
export default {}
</script>

<style></style>

vue/define-macros-order❌🔨

规定definePropsdefineEmits排序。defineProps在前。

<!-- ✓ GOOD -->
<script setup>
defineProps(/* ... */)
defineEmits(/* ... */)
</script>

vue/html-comment-content-spacing❌🔨

在 HTML 注释中实施统一的间距。

vue/no-irregular-whitespace

禁止在.vue中使用不规则的空格。

template中的代码格式规范

vue/array-bracket-spacing❌🔨

template中,禁止在数组括号存在间隙。

  • [['foo'], 'bar', 'baz']
  • [ ['foo'], 'bar']

vue/arrow-spacing❌🔨

template中,箭头函数箭头的前后使用间隙。(a) => {}

vue/block-spacing❌🔨

template中,在打开块之后和关闭块之前强制在块内部使用空格。

  • function foo() { return true; }

vue/brace-style❌🔨

template中,规定大括号样式:

if-else结构中的else语句以及catchfinally必须位于前面的结束大括号之后的行上。

并且允许单行。

function nop() { return; }

if (foo) { bar(); }

if (foo) { bar(); }
else { baz(); }

try { somethingRisky(); }
catch(e) { handleError(); }

class C
{
    static { foo(); }

    static
    { foo(); }
}

class D { static { foo(); } }

vue/comma-dangle❌🔨

template中,规定尾随逗号的使用:

  • arrays中,不使用尾随逗号
  • objects中,不使用尾随逗号
  • imports中,不使用尾随逗号
  • exports中,不使用尾随逗号
  • functions中,不使用尾随逗号

vue/comma-spacing❌🔨

template中,规定执行逗号的间隙:

  • 前无
  • 后有
var arr = [1, 2];
var arr = [1,, 3]
var obj = {"foo": "bar", "baz": "qur"};

vue/comma-style❌🔨

template中,需要在数组元素、对象属性或变量声明的同一行后面和同一行上使用逗号。

vue/dot-location❌🔨

template中,对象属性的.跟在属性同一行。

var foo = object
.property;
var bar = object.property;

vue/dot-notation❌🔨

template中,对象尽量强制使用.

  • foo["bar"];

vue/eqeqeq❌🔨

template中,强制使用== !==,除了这些情况:

typeof foo == 'undefined'
'hello' != 'world'
0 == 0
true == true
foo == null

vue/func-call-spacing❌🔨

template中,禁止函数名和开头括号之间有空格。

  • 🚫fn ();

vue/key-spacing❌🔨

template中,规定对象的:前后间隙:

  • 前无
  • 后有
  • { "foo": 42 }

vue/keyword-spacing❌🔨

template中,在关键字之前和之后实施一致的间距。

vue/no-constant-condition⚠️

template中,条件语句尽量不要使用常量表达式。

vue/no-empty-pattern

template中,禁止空解构。

vue/no-extra-parens❌🔨

template中,禁止在函数表达式周围使用不必要的括号

vue/no-loss-of-precision

template中,禁止使用超过精度的文字数字

vue/no-restricted-syntax

template中,禁止使用以下语句:

  • With
  • Debugger
  • Labeled

vue/no-sparse-arrays

template中,禁止使用稀疏数组。

vue/object-curly-newline❌🔨

template中,在打开和关闭大括号之前的换行:

  • 如果属性内部或属性之间有换行符,则需要换行符。否则,不允许换行符。
  • 要求两个花括号要么都有换行符,要么都没。

vue/object-curly-spacing❌🔨

template中,强制大括号有一定间距。

vue/object-property-newline❌🔨

template中,强制对象属性放置在单独的行上。

vue/object-shorthand❌🔨

vue/operator-linebreak❌🔨

template中,运算符在前。

vue/prefer-template❌🔨

template中,使用模板字符代替字符串串联。

vue/quote-props❌🔨

template中,对象文字属性名称周围要么都加引号,要么都没引号。

vue/space-in-parens❌🔨

template中,禁止括号内存在间距。

vue/space-infix-ops❌🔨

template中,要求运算符周围存在空格。

vue/space-unary-ops❌🔨

template中,在一元运算符之前或之后实施一致的间距。

vue/template-curly-spacing❌🔨

template中,禁止在模板字符串的嵌入表达式周围使用空格。