@actualsize/eslint-config 中文文档教程

Question

@actualsize/eslint-config

About

此 ESLint 配置构建于 Airbnb 的配置 和 Unicorn。 它包括 Prettier 以自动格式化代码。

Usage Instructions

1. 使用 npm i -D eslint @actualsize/eslint-config 或 yarn add -D eslint @actualsize/eslint-config< 在您的项目中安装 eslint 和此配置< /code>

2. 在您的 .eslintrc.json 文件中，将以下内容之一添加到 extends 数组：

Vanilla (default):	"@actualsize/eslint-config"
TypeScript without React :	"@actualsize/eslint-config/configs/ts"
React:	"@actualsize/eslint-config/configs/react"
TypeScript with React:	"@actualsize/eslint-config/configs/ts-react"

就是这样！ 所有扩展配置、Prettier 和一些额外的规则更改应该开箱即用。

---

Example Usage

这应该根据项目而改变，但这里有一个普通项目的良好基线：

.eslintrc

// .eslintrc.json
{
  "env": {
    "node": true,
    "browser": true,
    "es2020": true,
  },
  "extends": [
    "@actualsize/eslint-config"
  ],
}

---

Typescript

如果您使用的是 TypeScript，也将其添加到您的 .eslintrc：

// inside .eslintrc.json root object
"parserOptions": {
    "project": "./tsconfig.json"
}

作为以及项目根目录下的 tsconfig.json 文件：

Node

// tsconfig.json
{
  "compilerOptions": {
    "lib": ["es2020"],
    "module": "commonjs",
    "target": "es2020",

    "sourceMap": true,
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "exclude": [
    "node_modules"
  ]
}

Browser

// tsconfig.json
{
  "compilerOptions": {
    "lib": ["es2020", "dom"],
    "module": "commonjs",
    "target": "es6",

    "jsx": "react",

    "sourceMap": true,
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "exclude": [
    "node_modules"
  ]
}

---

Prettier

并且不要忘记您的 Prettier 配置！

.prettierrc

// .prettierrc
{
  "printWidth": 62,
  "tabWidth": 2,
  "useTabs": true,
  "semicolons": true,
  "singleQuote": false,
  "quoteProps": "consistent",
  "jsxSingleQuote": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always"
}