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

@fate-lovely/standard

v0.8.0

Published

JavaScript standard style for myself

Downloads

2

Readme

ShuoYe Standard

朔夜项目使用的JS Linter。在Standard JS的基础上,做了部分改动。

参考

注意

目前,由于ESLint的问题,对于?号操作符多行模式下的缩进会报错,需要使用/* eslint-disable /*来关闭相关校验,相关Issue

// this is the correct style, but `standard` will complain
/* eslint-disable */
const A = condition ?
  [
    1,
    2,
    3,
  ]
  :
  [
    4,
    5,
    6,
  ]
/* eslint-enable */

安装配置

使用husky配置@shuoye/standard作为pre-commit的钩子,推荐使用snazzy来美化输出。

yarn add -D husky
yarn add -D @shuoye/standard
yarn add -D snazzy
// vim package.json
{
  "scripts": {
    "precommit": "standard src/**/*.{js,jsx,vue} | snazzy"
  }
}

规则

standard的基础上,做了如下改动和修改。

  • 引号使用双引号而不是单引号(quotes

  • 数组,对象等如果跨行,末尾一定要有逗号comma-dangle

  • 函数名和函数参数之间不需要空格,除了asyncArrow

    // bad
    function a () {...}
    var a = function () {...}
    var b = async() => {...}
      
    // good
    function a() {...}
    var a = function() {...}
    var b = async () => {...}
  • 关键词前后都需要添加空格,除了ifswitchfor, catch后不需要添加空格。

    // bad
    if (...) {...}
    
    if() {
        ...
    } else{...}
    
    if() {
    
    }else {...}
    
    for () {
      ...
    }
    
    try {
    
    } catch (err) {
    
    }
    
    // good
    if() {...}
    
    if() {
    
    } else {...}
    
    for() {
      ...
    }
    
    try {
    
    } catch(err) {
    
    }
  • 默认使用eslint-babel作为parser,主要是默认parser目前不支持Class Property,而这个特性很有用。

  • ?:这两个操作符的换行规则比较特殊,如果比较短,那么全部在一行,如果比较长,?后跟一个换行,而:前后都跟上一个换行。

    var a = short ? var1 : var2
    var b = long ?
      var3
      :
      var4

全局变量

所有的全局变量应该都带有window前缀,除了documentnavigator。如果因为某些原因引入了全局变量,必须要告知Standard,否则将会报错。

  • 在文件顶部添加如下备注

    /* global var1, var2 */
  • package.json中添加如下内容

    "standard": {
      "globals": ["var1", "var2"]
    }

禁用检查

在某些情况下,需要禁用样式检查,具体请看ESLint disabling rules文档。简单来说,有两种方式。

  1. 使用eslint-disable-line注释来禁止检查某一行。
// 下面这一行不会进行样式检查
var a   = 100 // eslint-disable-line 
  1. 使用eslint-disableeslint-enable注释来禁止检查某一段区域的代码。
// 下面这段被注释包裹的代码都不会进行样式检查
/* eslint-disable */
var a   = 100
var b   = 200
...
/* eslint-enable */