eslint-config-liaoyf

前端 React 项目 EsLint 配置文件。主要使用：

• airbnb 代码风格指南
• prettier：代码格式化

覆盖规则列表

具体覆盖规则请查看 index.js 文件。

安装

$ yarn add @typescript-eslint/eslint-plugin eslint-config-airbnb-typescript eslint-config-liaoyf eslint babel-eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-compat eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react prettier -D
// or
$ npm install --dev @typescript-eslint/eslint-plugin eslint-config-airbnb-typescript eslint-config-liaoyf eslint babel-eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-compat eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react prettier

使用

在根目录中新建.eslintrc.js文件：

针对 react 项目：

module.exports = {
    extends: ["liaoyf"],
    rules: {
        // 进行规则覆盖
    }
};

针对 react + typescript 项目：

module.exports = {
    extends: ["liaoyf/react-typescript"],
    rules: {
        // 进行规则覆盖
    }
};

IDE 开启 eslint 检测和自动修复

Webstrom

1. 在File -> Setting -> Languages & Frameworks -> Javascript -> Code Quality Tools -> Eslint中开启 Eslint 检测。
2. 在File -> Setting -> Keymap -> Plug-ins -> Javascript Support -> Fixed Eslint Problems中右键点击Add keyboard shortcut，使用Ctrl + E覆盖默认快捷键。

VSCode

配置教程