National Patience Month

    @anjianshi/eslint-config

    1.2.2 • Public • Published

    公共 ESLint Rules

    Rules 文件及依赖关系:

    base             基础 JavaScript 语法规则
    typescript       TypeScript 规则
    react            React App 规则(包含 base 和 typescript)
    node             Node.js 环境下的规则(包含 base)
    node-typescript  Node.js 环境下书写 TypeScript 的规则(包含 base、node 和 typescript)
    

    如何使用

    安装

    yarn add --dev typescript eslint @anjianshi/eslint-config

    配置 eslint config

    例如在 .eslintrc.js 中:

    module.exports = {
      extends: [
        '@anjianshi/eslint-config/react'
      ]
    }

    配置 TypeScript 规则

    如果使用了 @anjianshi/eslint-config/typescript,或引用了它的规则文件,
    要求当前 ESLint 配置文件的同级目录里有一个 tsconfig.json

    如果这个文件在别的位置,需要在配置文件里指明:

    module.exports = {
      extends: [
        '@anjianshi/eslint-config/typescript'
      ],
      parserOptions: {
        project: './src/tsconfig.json',
      },
    }

    resolve alias

    Webpack 里配置了 resolve alias 时,ESLint 里也需要相应配置才能正确校验 import 行为。 具体办法是在 .eslintrc.js 里加上一段:

    {
      'settings': {
        'import/resolver': {
          webpack: {
            config: 'webpack.config.js 文件路径',
          },
        },
      }
    }

    以上行为需要 eslint-import-resolver-webpack 这个依赖,
    此包已将它引入进来(虽然这个包自己用不到),无需再次引入。

    VSCode 下正确配置 ESLint

    一、安装 VSCode 插件 ESLint

    二、修改 VSCode 设置(Code - Preferences - Settings)

    {
      "editor.tabSize": 2,
      "files.insertFinalNewline": true,
      "files.trimTrailingWhitespace": true,
    
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      },
      "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "html",
      ],
    }

    三、设置 ESLint workingDirectories(可选) 若 VSCode 的 workspace 配置成类似如下目录结构:

    projects/     // /Users/me/office/projects/
      proj-1/
      proj-2/
      ...
    
    library/      // /Users/me/library/
      lib-1/
      lib-2/

    也就是,workspace 下添加了多个独立的文件夹,每个独立文件夹下又有多个项目。 在开发这些项目(proj-1lib-1...)时,ESLint 默认会把顶层目录作为 workingDirectory,从那个目录下加载插件等依赖,导致找不到依赖。 此时我们可以在这些顶层目录下创建一个 .vscode/setting.json 文件,写入如下内容:

    {
      "eslint.workingDirectories": [
        { "mode": "auto" }
      ]
    }

    这样 ESLint 会改为把 package.json 存在的目录作为 workingDirectory,也就能正常引入依赖了。

    Keywords

    none

    Install

    npm i @anjianshi/eslint-config

    DownloadsWeekly Downloads

    7

    Version

    1.2.2

    License

    MIT

    Unpacked Size

    21.8 kB

    Total Files

    14

    Last publish

    Collaborators

    • anjianshi