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

Question

eslint-config

我共享的 ESLint & 更漂亮的项目配置

????‍♂️ Made by @abhijithvijayan

捐： 贝宝， Patreon

---

❤️呢？ ⭐️ 它在 GitHub

Features

配置中默认包含这些插件：

• import
• jsx-a11y
• prettier
• react
• react-hooks
• @typescript-eslint/eslint-plugin
• eslint-plugin-node from v2.2.3

Breaking Changes

• Uses @babel/eslint-parser instead of babel-eslint from v2.6.1 (See migration guide)
• Uses Eslint v7 from v2.x.x (See migration guide)
• Dropped usage eslint-config-airbnb in favour of @abhijithvijayan/eslint-config-airbnb

Installation

# npm
npx install-peerdeps @abhijithvijayan/eslint-config --dev

# yarn
npx install-peerdeps @abhijithvijayan/eslint-config --dev --yarn

这将安装所需的 peerDependencies 对于 eslint

注意：由于 这个错误，你 需要将所有关联的插件安装为 devDependencies 才能正常工作。

Usage

将首选基本配置的扩展添加到您的 .eslintrc.json：

{
  "extends": [
    "@abhijithvijayan/eslint-config"
  ],
  "rules": {
    // your overrides
  }
}

Other configs

此配置还公开了 react、node 和 typescript 我经常使用的配置。

TypeScript

要使用 ts 配置，请安装 TypeScript 编译器：

# npm
npm install typescript --save-dev

# yarn
yarn add --dev typescript

.eslintrc.json:

{
  "extends": [
    "@abhijithvijayan/eslint-config/typescript"
  ],
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "rules": {
    // your overrides
  },
}

Node.js

它将与基本配置（推荐）

.eslintrc 结合使用。 json:

{
  "extends": [
    "@abhijithvijayan/eslint-config", // or "@abhijithvijayan/eslint-config/typescript",
    "@abhijithvijayan/eslint-config/node"
  ],
  "parserOptions": {
    // Uncomment both if you are using typescript with node
    // "project": "./tsconfig.json",
    // "sourceType": "module" // https://github.com/mysticatea/eslint-plugin-node#-configs
  },
  "rules": {
    // Uncomment if you are using typescript with node(ES Modules)
    // "node/no-unsupported-features/es-syntax": ["error", {
    //   "ignores": ["modules"]
    // }],

    // your other overrides
  },
}

React

与基本配置结合使用（推荐）

.eslintrc.json:

{
  "extends": [
    "@abhijithvijayan/eslint-config", // or "@abhijithvijayan/eslint-config/typescript",
    "@abhijithvijayan/eslint-config/react"
  ],
  "parserOptions": {
    // Uncomment if you are using typescript configuration
    // "project": "./tsconfig.json"
  },
  "rules": {
    // your overrides
  }
}

With Create React App

打开你的 package.json 并替换 " extends": "react-app" 使用上述配置或删除 extends 条目并创建一个单独的 .eslintrc.json 文件（推荐）

Optional

• 要检查你的文件，您可以将以下脚本添加到您的 package.json：

  "scripts": {
      // other scripts
      "lint": "eslint . --ext .js,.ts,.tsx",
      "lint:fix": "eslint . --ext .js,.ts,.tsx --fix"
  },
  

• 添加一个 .eslintignore 文件，其中包含我的默认值

  ``` 节点模块 dist # typescript默认输出目录 。纱 .pnp.js

  other directories to skip linting

<hr />

## Override

If you'd like to override `eslint` or `prettier` settings, you can add the rules in your `.eslintrc.json` file.

The ESLint rules go directly under `"rules"` while prettier options go under `"prettier/prettier"`.

Note: overriding `prettier` rules(trailing comma, single quote, etc) require including all existing rules as well.

json { “扩展”：[“@abhijithvijayan/eslint-config”]， “规则”：{ “无控制台”：“关闭”， “反应/jsx-props-no-spreading”：“关闭”， “更漂亮/更漂亮”：[ “错误”， { “bracketSpacing”：真实的， “jsxBracketSameLine”：假， “打印宽度”：120， “半”：是的， “单引号”：真实的， “标签宽度”：4， "trailingComma": "全部", “使用标签”：假的， “proseWrap”：“总是” } ] } } ```

With VS Code

要在您的编辑器中显示 lint 错误，您需要配置您的编辑器。

1. 安装 ESLint 包

2. 安装 Prettier package

3. 现在我们需要通过 Code/File → Preferences → 设置。 在编辑 settings.json 文件时更容易输入这些设置，因此请点击右上角的 {} 图标：

   "editor.formatOnSave": true,
   "[javascript]": {
     "editor.formatOnSave": false
   },
   "[javascriptreact]": {
     "editor.formatOnSave": false
   },
   "[typescript]": {
     "editor.formatOnSave": false
   },
   "[typescriptreact]": {
     "editor.formatOnSave": false
   },
   "editor.codeActionsOnSave": {
       "source.fixAll": true,
       "source.fixAll.eslint": false
   },
   "prettier.disableLanguages": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
   

Bugs

Please file an issue 此处 用于错误、缺少文档或意外行为。

Credits

这最初是 eslint-config-wesbos 的一个分支。 感谢 wesbos！

License

麻省理工学院 © Abhijith Vijayan