eslint-config-blend-react

eslint-config-blend-react

blend-react 开发及其模板项目使用的 ESLint 配置规则。

如何使用

• 安装 eslint 和 eslint-config-blend-react 为开发依赖包

// NPM
> npm i eslint eslint-config-blend-react --save-dev
// Yarn
> yarn add eslint eslint-config-blend-react --dev

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

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

推荐使用的开发环境

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

• 在保存代码文件时，自动对部分语法和编写习惯进行修复
• 在 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
> npm i prettier prettier-eslint husky lint-staged --save-dev
// Yarn
> yarn add prettier prettier-eslint husky lint-staged --dev

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

{
    "editor.rulers": [80, 120],
    "editor.formatOnSave": true,
    "editor.tabSize": 4,
    "editor.insertSpaces": true,
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    "eslint.codeActionsOnSave.mode": "problems",
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact"
    ],
    "files.trimTrailingWhitespace": true,
    "files.insertFinalNewline": true,
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "javascript.implicitProjectConfig.experimentalDecorators": true,
    "javascript.validate.enable": false,
    "typescript.validate.enable": 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 的文件，其内容为：

下载 prettier 配置

// NPM
> npm i blend-prettier-config --save-dev
// Yarn
> yarn add blend-prettier-config --dev

module.exports = {
    ...require('blend-prettier-config'),
};

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

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

• 重启 VS Code