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

@uxd.wenge/eslint-config-wg

v0.0.4

Published

wenge前端编码规范文档

Downloads

4

Readme

eslint-config-wg

此规则适用于 JavaScript/Vue 项目的 ESLint 配置规范。

目前已支持 Vue 3.0,需要指定 extends 配置vue3

安装依赖

依赖版本

eslint ^7.32.0
@babel/eslint-parser ^7.15.0
vue-eslint-parser ^7.10.0
eslint-plugin-vue ^7.16.0
eslint-plugin-prettier ^3.4.1
eslint-config-prettier ^8.3.0

使用方法

Vue

npm install --save-dev eslint @babel/eslint-parser vue-eslint-parser eslint-plugin-vue  eslint-plugin-prettier eslint-config-prettier @uxd.wenge/eslint-config-wg@latest

在你的项目的根目录下创建一个 .eslintrc.js 文件,并将以下内容复制进去:

module.exports = {
    extends: [
        '@uxd.wenge/wg',
        // 这里是针对 vue2 的配置
        '@uxd.wenge/wg/vue', 
        // 如果是 vue3 的项目工程,则推荐下面配置
        // '@uxd.wenge/wg/vue3',
    ],
    env: {
        // 你的环境变量(包含多个预定义的全局变量)
        //
        // browser: true,
        // node: true,
        // mocha: true,
        // jest: true,
        // jquery: true
    },
    globals: {
        // 你的全局变量(设置为 false 表示它不允许被重新赋值)
        //
        // myGlobal: false
    },
    rules: {
        // 自定义你的规则
    }
};
  • 项目目录下的 package.json 添加检测指令,举个例子
{
 ...
 "scripts": {
+    "lint:es": "eslint \"src/**/*.{vue,js,jsx}\" --fix",
 }
 ...
}

Vue3 新增规则

| rule | 规则描述 | | ------------------------------------------------------------ | ---------------------------------------------------- | | vue/custom-event-name-casing | 自定义事件名必须用 kebab-case 风格 | | vue/no-arrow-functions-in-watch | watch 中禁止使用箭头函数 | | vue/no-custom-modifiers-on-v-model | 禁止自定义的 v-modal 修饰语 | | vue/no-deprecated-data-object-declaration | 禁止在 data 中使用已废弃的对象定义 | | vue/no-deprecated-destroyed-lifecycle | 禁止使用已废弃的 destroyed 和 beforeDestroy 生命周期 | | vue/no-deprecated-dollar-listeners-api | 禁止使用已废弃的 $listeners | | vue/no-deprecated-dollar-scopedslots-api | 禁止使用已废弃的 $scopedSlots | | vue/no-deprecated-events-api | 禁止使用已废弃的 events 接口 | | vue/no-deprecated-filter | 禁止使用已废弃的 filters 语法 | | vue/no-deprecated-functional-template | 禁止使用已废弃的 functional 模版 | | vue/no-deprecated-html-element-is | 禁止使用已废弃的 is 属性 | | vue/no-deprecated-inline-template | 禁止使用已废弃的 inline-template 属性 | | vue/no-deprecated-props-default-this | 禁止使用已废弃的 this | | vue/no-deprecated-v-bind-sync | 禁止在 v-bind 指令中使用已废弃的 .sync 修饰符 | | vue/no-deprecated-v-on-native-modifier | 禁止使用已废弃的 .native 修饰符 | | vue/no-deprecated-v-on-number-modifiers | 禁止使用已废弃的数字修饰符 | | vue/no-deprecated-vue-config-keycodes | 禁止使用已废弃的 Vue.config.keyCodes | | vue/no-dupe-v-else-if | 禁止在 v-if 和 v-else-if 中出现重复的测试表达式 | | vue/no-duplicate-attr-inheritance | 使用 v-bind="$attrs" 时 inheritAttrs 必须是 false | | vue/no-empty-component-block | 禁止 为空 | | vue/no-invalid-model-keys | 禁止 model 中出现错误的属性 | | vue/no-lifecycle-after-await | 禁止异步注册生命周期 | | vue/no-lone-template | 禁止出现没必要的 | | vue/no-multiple-objects-in-class | 禁止 class 中出现复数的对象 | | vue/no-multiple-slot-args | 禁止给 scoped slots 传递多个参数 | | vue/no-multiple-template-root | 禁止模版中有多个根节点 | | vue/no-mutating-props | 禁止修改组件的 props | | vue/no-ref-as-operand | 禁止直接使用由 ref 生成的变量,必须使用它的 value | | vue/no-setup-props-destructure | 禁止对 setup 中的 props 解构 | | vue/no-sparse-arrays | 禁止在数组中出现连续的逗号 | | vue/no-useless-concat | 禁止没必要的字符拼接 | | vue/no-useless-mustaches | 禁止出现无用的 mustache 字符串 | | vue/no-useless-v-bind | 禁止出现无用的 v-bind | | vue/no-v-for-template-key | 禁止 template 有 v-for 属性时又有 key 属性 | | vue/no-v-for-template-key-on-child | 禁止 template v-for 属性的子节点有 key 属性 | | vue/no-watch-after-await | 禁止在 await 之后调用 watch | | vue/one-component-per-file | 一个文件必须仅包含一个组件 | | vue/order-in-components | 组件的属性必须为一定的顺序 | | vue/require-explicit-emits | emits 属性必须包含 $emit() 中的值 | | vue/require-slots-as-functions | this.$slots.default 必须被当作方法使用 | | vue/require-toggle-inside-transition | transition 内部必须有条件指令 | | vue/return-in-emits-validator | emits 中的方法必须有返回值 | | vue/v-on-event-hyphenation | 禁止在 v-on 的事件名使用横杠 | | vue/valid-v-is | v-is 指令必须合法 |

参考

开发维护

  • 以测试开发驱动,config/rules/*.json 文件都是根据 test/ 文件夹对应的生成的