Eslint-plugin-koot NPM

koot-eslint

Koot.js 开发及其模板项目使用的 ESLint 配置规则。基于 @Daqi 提供的规则开发。

如何使用

安装 eslint 和 eslint-config-koot 为开发依赖包

> npm i eslint eslint-config-koot --save-dev

添加或编辑 ESLint 配置文件 (.eslintrc.js)，将 koot 添加至 extends 选项中

module.exports = {
    // ...
    root: true,
    extends: ['koot']
    // ...
};

推荐使用的开发环境

使用下述方案，可强化开发体验：

在保存代码文件时，自动对部分语法和编写习惯进行修复
在 git commit 之前，自动对部分语法和编写习惯进行修复

需要使用 VS Code (Visual Studio Code) ，以下是完整的配置方案：

下载安装 VS Code : https://code.visualstudio.com/download
在 VS Code 中安装以下扩展:
- ESLint
- Prettier
安装 prettier prettier-eslint husky 以及 lint-staged 为开发依赖包

> npm i prettier prettier-eslint husky lint-staged --save-dev

在项目根目录中创建名为 .vscode 的目录，并在该文件夹内创建名为 settings.json 的文件，其内容为：

{
    "editor.rulers": [80, 120],
    "editor.formatOnSave": true,
    "editor.tabSize": 4,
    "editor.insertSpaces": true,
    "files.trimTrailingWhitespace": true,
    "files.insertFinalNewline": true,
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "javascript.implicitProjectConfig.experimentalDecorators": true,
    "javascript.validate.enable": false,
    "typescript.validate.enable": true,
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        { "language": "typescript", "autoFix": true },
        { "language": "typescriptreact", "autoFix": true }
    ],
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

在项目根目录中创建名为 .prettierrc.js 的文件，其内容为：

module.exports = {
    printWidth: 80,
    singleQuote: true,
    tabWidth: 4,
    jsxBracketSameLine: false,
    useTabs: false,
    semi: true,
    bracketSpacing: true,
    eslintIntegration: true
};

修改 package.json，添加以下内容

    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
        "*.{js,jsx,cjs,mjs,ts,tsx}": [
            "eslint --fix",
            "prettier --write",
            "git add"
        ],
        "*.{json,md,css,less,sass,scss}": [
            "prettier --write",
            "git add"
        ]
    }