@resolid/config

Resolid 通用配置, 包含了 TypeScript, Eslint 和 Prettier 的基础配置

安装

pnpm add -D @resolid/config

TypeScript 配置

增加下面内容到 tsconfig.json

普通项目

{
  "extends": "@resolid/config/tsconfig.base"
}

React 项目

{
  "extends": "@resolid/config/tsconfig.react"
}

ESLint 配置

本配置包是纯 ESM 包, 并使用了 ESLint 扁平配置, 需要使用 eslint.config.js 文件来进行配置

语言选项默认为 ecmaVersion: 2022, sourceType: 'module'

基本 Lint 配置

// eslint.config.js
import eslintBase from "@resolid/config/eslint.base";

/** @type {import('eslint').Linter.FlatConfig[]} */
export default [...eslintBase];

TypeScript Lint 配置

// eslint.config.js
import eslintTypescript from "@resolid/config/eslint.typescript";

/** @type {import('eslint').Linter.FlatConfig[]} */
export default [...eslintTypescript];

React Lint 配置

// eslint.config.js
import eslintReact from "@resolid/config/eslint.react";

/** @type {import('eslint').Linter.FlatConfig[]} */
export default [...eslintReact];

ESLint 环境设置

// eslint.config.js

// 浏览器环境
import eslintBowser from "@resolid/config/eslint.bowser";

// Node 环境
import eslintNode from "@resolid/config/eslint.node";

/** @type {import('eslint').Linter.FlatConfig[]} */
export default [...eslintBowser, ...eslintNode];

ESLint 配置查看

你可以进入拥有 eslint.config.js 文件的目录运行下面的命令来检查

npx @eslint/config-inspector@latest

Prettier 设置

// .prettierrc.js

import prettierConfig from "@resolid/config/prettier";

/**
 * @type {import("prettier").Config}
 */
const config = {
  ...prettierConfig,
};

export default config;

致谢

• ESLint Config Inspector 用于检查和理解 ESLint 平面配置的可视化工具。