1.2.2 • Published 4 months ago

@anjianshi/eslint-config v1.2.2

Weekly downloads
13
License
MIT
Repository
github
Last release
4 months ago

公共 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,也就能正常引入依赖了。