# @digital-rd/eslint-config-conventional

> eslint-config-conventional

Latest version **1.1.0** (published 2024-11-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install @digital-rd/eslint-config-conventional
pnpm add @digital-rd/eslint-config-conventional
yarn add @digital-rd/eslint-config-conventional
bun add @digital-rd/eslint-config-conventional
```

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2024-11-19 |
| First published | 2022-05-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 95.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | lefty |
| Maintainers | lefty666 |
| Keywords | eslint, standard, conventional |

## Links

- npm: https://www.npmjs.com/package/@digital-rd/eslint-config-conventional
- npm.io page: https://npm.io/package/@digital-rd/eslint-config-conventional

## Alternatives

- [eslint-plugin-sonarjs](https://npm.io/package/eslint-plugin-sonarjs.md) — 2.9M weekly downloads
- [eslint-config-expo](https://npm.io/package/eslint-config-expo.md) — 1.5M weekly downloads
- [@matter/protocol](https://npm.io/package/@matter/protocol.md) — 63.5K weekly downloads
- [@eventcatalog/linter](https://npm.io/package/@eventcatalog/linter.md) — 24.8K weekly downloads
- [@inrupt/eslint-config-base](https://npm.io/package/@inrupt/eslint-config-base.md) — 4.5K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2024-11-19
- 1.0.0 — 2022-05-27

## README

# eslint-config-conventional

一份适用于JavaScript/TypeScript/Vue项目的ESLint配置规范。


## 快速开始

根据对应的技术栈选择对应的配置：

- [Base](#Base（built-in）)
- [Vue](#vue)
- [TypeScript](#typescript)
- [Vue TypeScript](#vue-typescript)
- [Vue3 TypeScript](#vue3-typescript)
- [Prettier](#prettier)

## 使用方法

### 基础依赖

在开始使用本配置前，请先确认以下基础依赖的版本，不同配置的依赖有所差异。

- eslint >=8.12.0
- @babel/core >= 7.18.0
- @babel/eslint-parser >= 7.17.0
- @typescript-eslint/eslint-plugin >= 5.25.0
- @typescript-eslint/parser >= 5.25.0
- eslint-plugin-vue >= 9.0.1
- typescript >= 4.6.4
- vue-eslint-parser >= 9.0.2

### Base（built-in）

适用于原生`JavaScript`项目，使用ESLint的规则，parser使用的是[@babel/eslint-parser](https://www.npmjs.com/package/@babel/eslint-parser) ，是本规范的默认配置。

#### 依赖

- [@babel/eslint-parser](https://www.npmjs.com/package/@babel/eslint-parser)
- [eslint-config-conventional](https://www.npmjs.com/package/@digital-rd/eslint-config-conventional)

``` bash
yarn add -D eslint @babel/eslint-parser @digital-rd/eslint-config-conventional
```

#### 配置

``` js
// .eslintrc.js
module.exports = {
  extends: [
    'conventional',
  ],
  env: {
    // 你的环境变量（包含多个预定义的全局变量）
    //
    // browser: true,
    // node: true,
    // mocha: true,
    // jest: true,
    // jquery: true
  },
  globals: {
    // 你的全局变量（设置为 false 表示它不允许被重新赋值）
    //
    // myGlobal: false
  },
  rules: {
    // 自定义你的规则
  },
};
```

### Vue

适用于 `JS` `Vue2` 的项目，继承了`Base`配置，并启用了 [eslint-plugin-vue](https://www.npmjs.com/package/eslint-plugin-vue) 插件的规则，parser使用了 [vue-eslint-parser](https://www.npmjs.com/package/vue-eslint-parser) 。

#### 依赖

- [eslint-plugin-vue](https://www.npmjs.com/package/eslint-plugin-vue) 
- [vue-eslint-parser](https://www.npmjs.com/package/vue-eslint-parser) 
- [eslint-config-conventional](https://www.npmjs.com/package/@digital-rd/eslint-config-conventional)

``` bash
yarn add -D eslint @babel/eslint-parser vue-eslint-parser eslint-plugin-vue @digital-rd/eslint-config-conventional
```

#### 配置

``` js
// .eslintrc.js
module.exports = {
  extends: [
    'conventional',
    'conventional/vue'
  ],
  env: {
    // 你的环境变量（包含多个预定义的全局变量）
    //
    // browser: true,
    // node: true,
    // mocha: true,
    // jest: true,
    // jquery: true
  },
  globals: {
    // 你的全局变量（设置为 false 表示它不允许被重新赋值）
    //
    // myGlobal: false
  },
  rules: {
    // 自定义你的规则
  },
};
```

### TypeScript

适用于 `TypeScript` 项目，继承了`Base`配置，并启用了 [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin) 插件的规则，parser使用了[@typescript-eslint/parser](https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/parser) 。

#### 依赖

- [@typescript-eslint/parser](https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/parser)
- [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin)
- [eslint-config-conventional](https://www.npmjs.com/package/@digital-rd/eslint-config-conventional)

``` bash
yarn add -D eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin @digital-rd/eslint-config-conventional
```

#### 配置

``` js
// .eslintrc.js
module.exports = {
  extends: [
    'conventional',
    'conventional/typescript'
  ],
  env: {
    // 你的环境变量（包含多个预定义的全局变量）
    //
    // browser: true,
    // node: true,
    // mocha: true,
    // jest: true,
    // jquery: true
  },
  globals: {
    // 你的全局变量（设置为 false 表示它不允许被重新赋值）
    //
    // myGlobal: false
  },
  rules: {
    // 自定义你的规则
  },
};
```

### Vue TypeScript

适用于 `TS` `Vue2` 项目，继承了 `Base` `Vue`的配置，并启用了 [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin) 插件的规则，parser使用了 [@typescript-eslint/parser](https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/parser) 。

#### 依赖

- [@typescript-eslint/parser](https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/parser)
- [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin)
- [vue-eslint-parser](https://www.npmjs.com/package/vue-eslint-parser)
- [eslint-plugin-vue](https://www.npmjs.com/package/eslint-plugin-vue)
- [eslint-config-conventional](https://www.npmjs.com/package/@digital-rd/eslint-config-conventional)

``` bash
yarn add -D eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-vue @digital-rd/eslint-config-conventional
```

#### 配置

``` js
// .eslintrc.js
module.exports = {
  extends: [
    'conventional',
    'conventional/vue',
    'conventional/typescript'
  ],
  env: {
    // 你的环境变量（包含多个预定义的全局变量）
    //
    // browser: true,
    // node: true,
    // mocha: true,
    // jest: true,
    // jquery: true
  },
  globals: {
    // 你的全局变量（设置为 false 表示它不允许被重新赋值）
    //
    // myGlobal: false
  },
  rules: {
    // 自定义你的规则
  },
};
```

### Vue3 TypeScript

适用于 `TS` `Vue3` 项目，继承了 `Base` `plugin:vue3 `的配置，对于Vue3新增的规则继承插件 [eslint-plugin-vue](https://www.npmjs.com/package/eslint-plugin-vue)的vue3-recommended ，并启用了 [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin) 插件的规则。parser使用了 [@typescript-eslint/parser](https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/parser) 。

#### 依赖

- [@typescript-eslint/parser](https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/parser)
- [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin)
- [vue-eslint-parser](https://www.npmjs.com/package/vue-eslint-parser)
- [eslint-plugin-vue](https://www.npmjs.com/package/eslint-plugin-vue)
- [eslint-config-conventional](https://www.npmjs.com/package/@digital-rd/eslint-config-conventional)

``` bash
yarn add -D eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-vue @digital-rd/eslint-config-conventional
```

#### 配置

``` js
// .eslintrc.js
module.exports = {
  extends: [
    'conventional',
    'conventional/vue3',
    'conventional/typescript'
  ],
  env: {
    // 你的环境变量（包含多个预定义的全局变量）
    //
    // browser: true,
    // node: true,
    // mocha: true,
    // jest: true,
    // jquery: true
  },
  globals: {
    // 你的全局变量（设置为 false 表示它不允许被重新赋值）
    //
    // myGlobal: false
  },
  rules: {
    // 自定义你的规则
  },
};
```

### Prettier

> 本规范已经不包含所有样式相关的规则，故不需要引入 `eslint-config-prettier`。只需要安装 `prettier` 及相关 VSCode 插件即可。

#### 依赖

- eslint-config-conventional

#### 配置

``` js
// .prettierrc.js
module.exports = {
  ...require('@eslint-config-conventional/prettier')
}
```

## 常见问题

### 在 VSCode 中使用

在 VSCode 中，默认 ESLint 并不能识别 `.vue`、`.ts` 或 `.tsx` 文件，需要在「文件 => 首选项 => 设置」里做如下配置

```
{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    "typescript",
    "typescriptreact"
  ]
}
```

### 保存格式化中Eslint和Prettier的兼容

在VSCode中，需要设置`Code Actions On Save`，保存文件后自动Prettier格式化后再执行Eslint的修复，这样才能获得更多的体验，打开`./vscode/settings.json`

```json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.validate": ["javascript", "javascriptreact", "vue", "typescript", "typescriptreact"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
```


### VSCode 中的 autoFixOnSave 没有效果

如果需要针对 `.vue`、`.ts` 和 `.tsx` 文件开启 ESLint 的 autoFix，则需要配置成：

```
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ]
}
```

## 迁移指南

1. 按需选择适合的配置
2. 根据选择配置的说明文档安装对应的依赖
3. 添加/修改项目的eslint配置文件，原则上尽量减少自定义配置

``` js
// .eslintrc.js
module.exports = {
  // 按需选择对应的配置
  extends: [
    'conventional',
  ],
  // 以下配置酌情处理
  env: {
    // 你的环境变量（包含多个预定义的全局变量）
    //
    // browser: true,
    // node: true,
    // mocha: true,
    // jest: true,
    // jquery: true
  },
  globals: {
    // 你的全局变量（设置为 false 表示它不允许被重新赋值）
    //
    // myGlobal: false
  },
  rules: {
    // 自定义你的规则
  },
};
```

4. 新增/修改项目的prettier配置文件
5. 重启eslint、ts等服务

## 参考

- [airbnb](https://github.com/airbnb/javascript)
- [eslint-config-alloy](https://github.com/AlloyTeam/eslint-config-alloy)
- [eslint-config-ali](https://github.com/alibaba/f2e-spec/tree/main/packages/eslint-config-ali)

---
_Source: https://npm.io/package/@digital-rd/eslint-config-conventional · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._