1.0.0 • Published 4 years ago

eslint-config-sendinfo v1.0.0

Weekly downloads
33
License
-
Repository
-
Last release
4 years ago

eslint-config-sendinfo

简介

eslint-config-sendinfo 是一个可分享 ESLint 配置包,支持 JavaScript、TypeScript、React、Vue 等多种项目类型。

配置包含prettier配置

对于不同项目类型,本包提供了不同的配置文件。你可以在下表中根据自己的项目类型选择对应的配置文件,在 ESLint 配置extends,并安装对应的 pluginparser 依赖:

JavaScript 项目

项目类型配置文件pluginsparser
JavaScripteslint-config-sendinfoeslint-plugin-importESLint 默认 parser
JavaScript + Reacteslint-config-sendinfo/reacteslint-plugin-react eslint-plugin-react-hooks eslint-plugin-importESLint 默认 parser
JavaScript + Vueeslint-config-sendinfo/vueeslint-plugin-vue eslint-plugin-importvue-eslint-parser
JavaScript ES5 版本eslint-config-sendinfo/es5ESLint 默认 parser

TypeScript 项目

项目类型配置文件pluginsparser
TypeScripteslint-config-sendinfo/typescript@typescript-eslint/eslint-plugin eslint-plugin-import@typescript-eslint/parser
TypeScript + Reacteslint-config-sendinfo/typescript/react@typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import@typescript-eslint/parser
TypeScript + Vueeslint-config-sendinfo/typescript/vue@typescript-eslint/eslint-plugin eslint-plugin-vue eslint-plugin-importvue-eslint-parser @typescript-eslint/parser

下面会针对不同项目类型分别介绍安装和使用方法。

Usage

JavaScript 项目(未使用 React 和 Vue 的 ES6+ 项目)

针对未使用 React 和 Vue 的 JavaScript 项目,语言版本支持到 ES2019(ES10),使用 ESLint 原生规则和 eslint-plugin-import 规则。这是本包的默认配置。

安装

npm install --save-dev eslint-config-sendinfo eslint eslint-plugin-import 

使用

{
  "extends": "eslint-config-sendinfo"
}

JavaScript + Vue 项目

针对 JS Vue 的项目,继承了默认配置,并启用了 eslint-plugin-vue 插件的规则,使用 vue-eslint-parser 作为 parser。

安装

npm install --save-dev eslint-config-sendinfo eslint eslint-plugin-import eslint-plugin-vue@next vue-eslint-parser 

使用

{
  "extends": "eslint-config-sendinfo/vue"
}

JavaScript ES5 项目

针对仍在使用 ES5 及之前版本 JS 的老项目,使用 ESLint 原生规则。

安装

npm install --save-dev eslint-config-sendinfo eslint 

使用

{
  "extends": "eslint-config-sendinfo/es5"
}

TypeScript 项目(未使用 React 和 Vue 的 TS 项目)

针对未使用 React 和 Vue 的 TypeScript 项目,继承了默认配置,并启用了 @typescript-eslint/eslint-plugin 插件的规则,使用 @typescript-eslint/parser 作为 parser。

安装

npm install --save-dev eslint-config-sendinfo eslint eslint-plugin-import @typescript-eslint/eslint-plugin @typescript-eslint/parser 

此外需保证项目已安装 typescript 依赖。

使用

{
  "extends": "eslint-config-sendinfo/typescript"
}

TypeScript + Vue 项目

针对 TS Vue 项目,继承了 JS Vue 的配置,并启用了 @typescript-eslint/eslint-plugin 插件的规则,使用 @typescript-eslint/parser 作为 parser。

安装

npm install --save-dev eslint-config-sendinfo eslint eslint-plugin-import eslint-plugin-vue@next vue-eslint-parser @typescript-eslint/eslint-plugin @typescript-eslint/parser 

此外需保证项目已安装 typescript 依赖。

使用

{
  "extends": "eslint-config-sendinfo/typescript/vue"
}

将风格问题降级

为了保证一致的编码风格,本包中大量风格相关的规则被设为了 error 级别,以引起开发者的足够重视。如果你觉得风格问题不足以是 error 级别(有些用户根据 ESLint error 进行流程卡点),本包还提供了一套名为 'essential' 的配置文件,这套配置将所有风格问题降级为 warn 级别,仅将必要问题报告为 error,引用方式为在相应配置的 eslint-config-sendinfo 后面加上 /essential,如对 JS React 项目为 eslint-config-sendinfo/essential/react、对 TS Vue 项目为 eslint-config-sendinfo/essential/typescript/vue

Learn more

  • 如果你对 ESLint 还不熟悉,可以阅读官网的 Getting Started 快速入门。
  • 了解如何在继承本包的基础上对项目 ESLint 进行个性化配置,可参考官网的 Configuring ESLint。下面简介下 ESLint 配置中的几个常用字段:
    • extends: 继承一组规则集。"extends": "eslint-config-sendinfo", 表示继承本包定义的规则配置。
    • rules: 配置规则,这里定义的规则会覆盖 extends 的规则。如果觉得本包开启的某条规则过于严格,你可以暂时在这里将其关闭。
    • parser: 设置 ESLint 的解析器。ESLint 使用 espree 作为默认的解析器,可以通过这个参数指定其他的解析器。比如指定为 babel-eslint,以解析 Babel 支持但 ESLint 默认解析器不支持的语法。
    • globals: 指定代码中可能用到的全局变量,以免全局变量被 no-undef 规则报错。
    • env: 指定代码的运行环境,每个环境预定义了一组对应的全局变量,本包已开启的环境有 browser、node、jquery、es6 及几个测试框架的环境。
  • 了解如何为 IDE 配置 ESLint,可参考官网的 Integrations
  • 了解常用的 ESLint 命令,如 --fix--ext-f,可参考官网的 Command Line Interface