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

@autobest-ui/eslint-plugin

v3.0.0-alpha.1

Published

js code rules

Downloads

23

Readme

@autobest-ui/eslint-plugin

介绍

ts/js语法检测集成

安装

npm install @autobest-ui/eslint-plugin --save-dev

使用方式

  1. 创建.eslintrc.js文件
  2. 引入依赖
module.exports = {
  root: true,
  extends: ['plugin:@autobest-ui/recommended']
};

标准语法检测

写法为extends: ['plugin:@autobest-ui/recommended'],该方式是前端要求的正式ts/js写法。要求比较严格,主要应用在复杂、频繁维护项目中。

妥协的语法检测

写法为extends: ['plugin:@autobest-ui/compromised'],该方式主要应用在DEMO性质、快速开发的项目中。

tsconfig.json引入common配置

{
  "extends": "@autobest-ui/eslint-plugin/tsconfig-common.json"
}

行元素或文本空格问题

新增@autobest-ui/line-element-whitespace, 处理三种情况

  1. 文本后有行元素或其他行元素, 例如:
    • text<span>xxxx</span> => text <span>xxxx</span>
    • text{'xxxx'} => text {'xxxx'}
  2. 行元素后有文本或其他行元素, 例如:
    • <span>xxxx</span>text => <span>xxxx</span> text
    • <span>xxxx</span><span>xxxx</span> => <span>xxxx</span> <span>xxxx</span><span>xxxx</span>{' '}<span>xxxx</span>
    • <span>xxxx</span>{'xxxx'} => <span>xxxx</span> {'xxxx'}
  3. 模版字符串后有文本或其他行元素, 例如:
    • {'xxxx'}<span>xxxx</span> => {'xxxx'} <span>xxxx</span>
    • {'xxxx'}xxxx => {'xxxx'} xxxx
    • {'xxxx'}{'xxxx'} => {'xxxx'} {'xxxx'}

注意: 有些情况下,我们是不能加空格的,比如英文文字后的句号('.'),感叹号, 逗号, 双引号等特殊情况.下面列举了如下所有情况

// 常用的行元素有下列情况, 其他inline标签(如:sup)用法比较特殊,暂不检测
const InlineTagNames = ['span', 'strong', 'b', 'a', 'i', 'del', 'small', 'em', 'label', 'var'];

// 特殊文本字符, 这种情况下文本与标签之间可以不用空格
// 特殊文字在末尾的情况
const SpecialTextLastCharRegList = [
   /&quot;$/,
   /&apos;$/,
   /&lt;$/,
   /&gt;$/,
   /\$$/,
   /\($/,
   /\)$/,
   /\[$/,
   /]$/,
   /\{$/,
   /}$/,
   /® $/,
   /:$/
];

// 特殊文字在头部的情况
const SpecialTextFirstCharRegList = [
   /^&quot;/,
   /^&apos;/,
   /^&lt;/,
   /^&gt;/,
   /^,/,
   /^\./,
   /^\$/,
   /^!/,
   /^;/,
   /^\(/,
   /^\)/,
   /^\[/,
   /^]/,
   /^\{/,
   /^}/,
   /^® /,
   /^:/
];

webpack eslint配置

  1. 打开Setting => Eslint
  2. 选择Automatic Eslint configuration radio即可