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

@mlz/lint

v1.2.3

Published

一个包含eslint,stylelint, tsconfig的配置文件合集

Downloads

85

Readme

mlz-lint

一个包含eslint(内置tslint规则)、stylelint、tsconfig、prettier的配置文件合集。方便不同项目间统一和共享lint规范。

Installation

npm i -D @mlz/lint

1、安装相应的代码检查工具

以下根据实际情况选择性安装

  • npm i -D eslint stylelint typescript

2、安装编辑器对应插件


Usage

mlz-lint的使用有两种方式

一、通过 yuumi 插件安装使用(待补充)

二、项目直接继承 mlz-lint 配置

  • typescript:在项目根目录新建 tsconfig.json 文件,并写入下面👇代码
// tsconfig.json
{
  "extends": "@mlz/lint/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".", // 必填
    // 自定义
  }
}
  • eslint(内置tslint规则):在项目根目录新建 .eslintrc.js 文件,并加入下面👇代码
// .eslintrc.js
module.exports = {
  "extends": "./node_modules/@mlz/lint/ts-eslintrc.js",
  "rules": {
    // 自定义
  }
}
  • eslint && react(内置tslint规则) :在项目根目录新建 .eslintrc.js 文件,并加入下面👇代码
// .eslintrc.js
module.exports = {
  "extends": "./node_modules/@mlz/lint/ts-eslintrc-react.js",
  "rules": {
    // 自定义
  }
}
  • stylelint:在项目根目录新建 .stylelintrc.json 文件,并加入下面👇代码(注意配置 .stylelintignore 文件,可参照本项目 .stylelintignore 文件)
// .stylelintrc.json
{
  "extends": "@mlz/lint/stylelintrc.json",
  "rules": {
    // 自定义
  }
}

不生效可能原因及解决方法:

  • 1、eslint未启用或执行报错:

    调出eslint控制台(点击vscode右下角eslint打开控制台, 如找不到,则,点击左下角设置按钮 --> 选择setting --> 输入eslint --> 把 Eslint:Always Show StatusEslint:Enable勾选上 --> 点击任意js或ts文件则会出现,若还未出现请升级vscode版本),查看是否执行过程中出现错误

  • 2、vscode版本过低(请升级到1.41.1或以上)

    mac中如果遇到无法升级,则确认vscode是否在应用程序中,如不在则手动把vscode移到应用程序中方可进行升级


AutoFix

1、打开编辑器设置文件(以vscode为例):

command + P  -->  输入setting  --> 选择 settings.json文件

2、在文件中添加如下代码并保存:

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true,
  },

3、修改文件后保存,便会自动修复空格、顺序等风格问题


配置说明

++++++

该项目中的配置为公司前端统一配置,除一些标明可自定义的配置外,其他配置最好不要随意更改,以保持前端代码风格的统一

++++++

tsconfig

详情请见:tsconfig.json

| 配置 | 值 | 原因 | | ---- | ---- | ---- | | target | es2015 | 保留import语法,以便实现模块按需加载,配合@babel/preset-env | module | commonjs | 使用commonjs的方式组织代码 | lib | ["dom", "es2015", "es2016.array.include"] | 把这些库文件包含进编译的过程中保证编译的正确快速执行 | allowJs | true | 允许检查js文件,保证js文件的质量 | checkJs | true | 允许ts检查js文件的错误,保证js文件的质量 | jsx | preserve | 输出.jsx且dom编译后还是原dom方便后续babel等编译 | sourceMap | true | 输出.map文件,方便调试 | outDir | build | 指定输出目录为build | removeComments | true | 删除编译后的所有的注释(使代码安全简洁,减少代码量) | noImplicitAny | true | 类型安全更加严格(强制类型检验) | strictNullChecks | true | null 和 undefined检查,避免错误(严格空校验) | noUnusedLocals | true | 不需要不用的变量 | noImplicitReturns | true | 函数的所有路径都必须有返回值 | moduleResolution | node | 使用node的模块解析策略 | baseUrl | . | 把tsconfig所在的目录当成是解析非相对模块的基准目录 | paths | - | 模块名到基于 baseUrl 的路径映射的列表 | allowSyntheticDefaultImports | true | 允许从没有设置默认导出的模块中默认导入 | experimentalDecorators | true | 启用装饰器

eslint

详情请见ts-eslintrc.js、ts-eslintrc-react.js

stylelint

官方标准 + 些许自定义,详情请见:

  • 官方

  • 自定义: 详见stylelintrc.json