Quick-eslint NPM

quick-eslint

🎃 quick-eslint - 快速项目eslint配置

一、快速使用

1、安装

npm i quick-eslint -D

或

yarn add -D quick-eslint

2、创建 .eslintrc.js

module.exports = {
  // 使用不同的预设配置
  extends: ['./node_modules/quick-eslint/envs/react'],
};

可选预设：

react
vue
node
uniapp

3、创建 .eslintignore

node_modules

4、配置项目根目录下的 .vscode/settings.json

{
  "editor.tabSize": 2,
  "files.associations": {
    "**/package.json": "json",
    "**/*.json": "jsonc"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "eslint.workingDirectories": [
    {
      "mode": "auto"
    }
  ],
  "eslint.trace.server": "verbose",
  "editor.codeActionsOnSave": {
    "editor.action.fixAll": true,
    "source.fixAll.eslint": true
  },
  "eslint.format.enable": true,
  "eslint.lintTask.enable": true
}

5、格式美化（prettier）

在项目根目录创建 .editorconfig，eslint-plugin-prettier 会自动读取该文件中的配置

当然也可以用 .prettierrc 文件代替 .editorconfig

# https://editorconfig.org
root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
max_line_length = 80
trim_trailing_whitespace = true
quote_type = single

[*.md]
max_line_length = 0
trim_trailing_whitespace = false

[COMMIT_EDITMSG]
max_line_length = 0

6、pre-commit eslint 校验

安装 lint-staged 和 husky

yarn add -D lint-staged@12.4.1 husky@4.0.1

在 package.json 写入

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "**/*.{js,jsx,ts,tsx,vue}": "eslint"
}

二、在 monorepo 项目中使用

以 rush.js 的项目为例

1、给项目中的所有包安装 quick-eslint

rush add -p quick-eslint --dev

2、给每个包的根目录下创建 .eslintrc.js

module.exports = {
  extends: ['./node_modules/quick-eslint/envs/react'],
};

3、格式美化（prettier）同上

4、配置项目根目录下的 .vscode/settings.json

{
  "editor.tabSize": 2,
  "files.associations": {
    "**/package.json": "json",
    "**/*.json": "jsonc"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "eslint.workingDirectories": [
    {
      "mode": "auto"
    }
  ],
  "eslint.nodePath": "common/temp/node_modules",
  "eslint.trace.server": "verbose",
  "eslint.options": {
    "resolvePluginsRelativeTo": "../../common/temp/node_modules"
  },
  "editor.codeActionsOnSave": {
    "editor.action.fixAll": true,
    "source.fixAll.eslint": true
  },
  "eslint.format.enable": true,
  "eslint.lintTask.enable": true
}

4、precommit eslint 校验

创建 common/autoinstallers/lint-staged并进入该目录

在package.json中写入

"dependencies": {
  "lint-staged": "11.1.4"
}

更新 autoinstaller

rush update-autoinstaller --name lint-staged

创建 common/git-hooks/pre-commit 并写入

node common/scripts/install-run-rush.js lint-staged || exit $?

创建 common/scripts/lint-staged.js 并写入

#!/usr/bin/env node

const path = require('path');

const node_modules = path.join(
  __dirname,
  '..',
  'autoinstallers/lint-staged/node_modules'
);

const lintStaged = require(path.join(node_modules, 'lint-staged'));

main();

async function main() {
  try {
    // https://github.com/okonet/lint-staged/pull/1080
    const success = await lintStaged();
    if (!success) process.exit(1);
  } catch (error) {
    if (error.message) {
      // terminal.writeErrorLine(error.message);
    } else {
      throw error;
    }
    process.exit(1);
  }
}

在 common/config/rush/comman-line.json 中写入

{
  "name": "lint-staged",
  "commandKind": "global",
  "summary": "Use lint-staged to do some check before commit",
  "shellCommand": "node common/scripts/lint-staged.js",
  "safeForSimultaneousRushProcesses": true,
  "autoinstallerName": "lint-staged"
}