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

@magicspace/eslint-plugin

v0.1.32

Published

Custom ESLint rules for MagicSpace.

Downloads

154

Readme

@magicspace/eslint-plugin

  • plugin:@magicspace/default
  • plugin:@magicspace/override-dev

安装

使用下面的命令来进行安装

yarn add @magicspace/configs @magicspace/eslint-plugin --dev

使用

使用的时候需要将 parserOptions.project 赋值成 tsconfig.json 相对于 eslintrc 的路径,就像下面这样。

module.exports = {
  extends: ['plugin:@magicspace/default', 'plugin:@magicspace/override-dev'],
  parserOptions: {
    project: './tsconfig.json',
    tsconfigRootDir: __dirname,
  },
};

eslint vscode 插件的配置示例

{
  "eslint.validate": [
    "javascript",
    {
      "language": "typescript",
      "autoFix": true
    }
  ],
  "typescript.tsdk": "node_modules\\typescript\\lib"
}

规则

魔法空格里面集成了一些规则可以提供一些风格层面的检查工作。

Import-Groups

它能够帮助你将 import 语句进行分组,比如:

// 内建模块
import * as FS from 'fs';
import * as Path from 'path';

// 第三方模块
import * as request from 'request';

Import-Groups 提供了两种分组规则:

  1. $node-core 对内建模块进行分组
  2. $node-modules 对第三方模块进行分组

配置形如:

{
  "groups": [
    {"name": "node-core", "test": "$node-core"},
    {"name": "node-modules", "test": "$node-modules"}
  ],
  "ordered": true
}

name 字段可以指定 group 的名字,test 为 group 的匹配规则, 除此之外, 你还可以自己添加一些自定义 group,test 可以为正则表达式

你还可以指定 ordered 字段,来让你的分组变的有顺序, 任意一个分组的顺序变动都会导致 import-groups 抛出 failure ,如果你不想这样, 你可以将它设置为 false

Scoped-Modules

使用此规则之前必须要达成一个约定,即以 @ 开头的模块,是默认不导出的。Scoped-Modules 帮你做了检查的工作,任何以 @ 开头的模块被导出都会抛出 failure

此外, 如果有 index.ts (.js),那么,在此目录下任何不为 @ 的模块都必须被导出

配置 tslint.json 下的 rules 开启该规则:

{
  "scoped-modules": true
}

Explicit-Return-Type

此规则规定,必须要显示的声明函数的返回值, 但是又一些特殊情况可以不必添加返回值。比如

[1, 2, 3].map(item => item + 1);

配置 tslint.json 下的 rules 开启该规则:

{
  "explicit-return-type": true
}

Import-Path-Convention

当你需要导入在 baseUrl 目录下的模块时,这个规则会特别有用

它会帮你检查引入的路径。比如 baseUrl 为 core,有一个模块 foo 存在于 core 目录下

假如当前模块在 baseUrl 之外

import {foo} from '../core/foo'; // failure
import {foo} from 'foo'; //right

假如当前模块在 baseUrl 内

import {foo} from 'foo'; //failure
import {foo} from './foo'; //right

如果你希望 Import-Path-Convention 帮你做这些检查, 并提供修复, 那么你可以在配置项里开启它,并在它的配置里写上 baseUrl 的路径

{
  "import-path-convention": [
    true,
    {
      "baseUrl": "src/core",
      "tsConfigSearchName": "tsconfig.json"
    }
  ]
}

tsConfigSearchName 字段是为了描述处于项目根目录的文件

比如,你可以指定 tsConfigSearchName 为 tsconfig.json,那么 import-path-convention 将会找到项目里的 tsconfig.json,以此来确定项目的根目录

这两个字段都是很必要的,请在使用之前将它们配置好

import-path-no-parent

这个规则能够帮助你避免循环引用

配置 tslint.json 下的 rules 开启该规则:

{
  "import-path-no-parent": true
}

Empty-Line-Around-Blocks

该规则要求在多数含有代码块的语句周围存在适当的空行

配置 tslint.json 下的 rules 开启该规则:

{
  "empty-line-around-blocks": true
}