@10up/eslint-config 中文文档教程

Question

10up Eslint Config

ESLint 可共享配置

@10up/eslint-config 是 eslint 的可共享配置包，构建于 eslint-airbnb-config 并修改以符合10up 自己的标准。

Installation

1. Install all peer dependencies

npx install-peerdeps --dev @10up/eslint-config

2. Install @10up/eslint-config as a development dependency of your project:

npm install @10up/eslint-config --save-dev

Available ESLint configs

@10up/eslint-config

默认导出包含不特定于任何框架或环境的通用规则。

// eslintrc.js
module.exports = {
    extends: ['@10up/eslint-config'],
};

@10up/eslint-config/react

扩展 @10up/eslint-config 将特定规则添加到 React。

// eslintrc.js
module.exports = {
    extends: ['@10up/eslint-config/react'],
};

@10up/eslint-config/wordpress

扩展 @10up/eslint-config/react 添加来自 @10up/eslint-plugin 的自定义 gutenberg 规则。

此规则需要安装 @wordpress/eslint-plugin 包。

npm install --save-dev @wordpress/eslint-plugin

// eslintrc.js
module.exports = {
    extends: ['@10up/eslint-config/wordpress'],
};

@10up/eslint-config/node

扩展 @10up/eslint-config 将特定规则添加到 Node.js。

// eslintrc.js
module.exports = {
    extends: ['@10up/eslint-config/node'],
};

@10up/eslint-config/jest

为 jest 测试框架添加特定规则。

此规则需要安装 eslint-plugin-jest

npm install --save-dev eslint-plugin-jest

// eslintrc.js
module.exports = {
    extends: ['@10up/eslint-config/react', '@10up/eslint-config/jest'],
};

@10up/eslint-config/legacy

此遗留配置仅包含 ES5 的规则。 它应该用于没有 babel 但仍在编写遗留 JavaScript 代码的项目。

// eslintrc.js
module.exports = {
    extends: ['@10up/eslint-config/legacy'],
};

Usage

为了使用这个配置，选择一个你想要的并将这个配置添加到你的package.json：

{
    "eslintConfig": {
        "extends": "@10up/eslint-config"
    }
}

或者添加一个.eslintrc.js文件到你的项目根目录包含：

module.exports = {
    extends: ['@10up/eslint-config'],
};

TypeScript Support

如果你想要 TypeScript 支持，请确保安装 @typescript-eslint/eslint-plugin 和 @typescript-eslint/parser

npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser

将 eslint 解析器更改为 @typescript- eslint/parser 并添加 typescript 插件

// eslintrc.js
module.exports = {
    parser: '@typescript-eslint/parser',
    extends: ['@10up/eslint-config/react'],
    plugins: ['@typescript-eslint'],
}

VSCode integration

我们建议打开 VSCode 设置以在保存时自动运行 eslint --fix。

"editor.codeActionsOnSave": {
   "source.fixAll.eslint": true,
}

保存后，这将自动格式化您的代码。 您不需要启用 VSCode prettier 扩展或在保存时运行，因为 eslint 会自动为您运行 prettier。

Support Level

活跃：10up 正在为此积极努力，我们希望在可预见的未来继续努力，包括保持对最新版本 WordPress 的测试。 欢迎错误报告、功能请求、问题和请求请求。

Like what you see?