@nostalgiaswag/eslint-plugin-lint

集中管理eslint配置,梳理符合规范的配置,包含前端所有eslint相关配置


Keywords
eslint, eslint-plugin
License
ISC
Install
npm install @nostalgiaswag/eslint-plugin-lint@1.0.0

Documentation

仓库说明

1. 解决目前规范只是文档输出,只能通过code review代码,以及靠个人意识约束,规范没起到作用。
2. 目前市面上虽然有 eslint-config-airbnb 或 eslint-config-standard等规范了,但各业务各使用各的没做到统一。
3. 可按自己团队规范自己实现plugin,以及将各种框架集成在一起如vue,react ,node, navtive等,目前支持vue , vue3.0

使用方法 - Usage

请仔细阅读文章

安装

    cnpm i --save-dev @nostalgiaswag/eslint-plugin-lint

    // 使用后,记得将原有项目内的package.json里的包删除
    // 引入了该配置后,所有lint相关的包,统一版本在项目包里管理
    // 同名的包都可以删除
    {
        "@typescript-eslint/parser": "^4.18.0",
        "eslint": "^7.32.0",
        "eslint-plugin-vue": "^7.19.1",
        "eslint-plugin-node": "~10.0.0",
        "eslint-plugin-eslint-plugin": "~2.1.0",
        "eslint-plugin-promise": "5.2.0",
        "eslint-plugin-babel": "^5.3.1"
    }

修改配置

root根目录下的.eslintrc.js 或者 .eslintrc(没有就创建一个)

// 详情阅读configs文件

module.exports = {
    extends: ['plugin:@nostalgiaswag/lint/xxx'], // xxx的配置
    extends: ['plugin:@nostalgiaswag/lint/vue'] // vue2的配置
};

// 如果需要在旧项目引入,宽松一点的包,引入base-loose
module.exports = {
    extends: ['plugin:@nostalgiaswag/lint/vue'], // vue2的配置
    extends: ['plugin:@nostalgiaswag/lint/base-loose'] // 放松一点的配置
};

备注:

如果需要自动修复能力,请在项目的根目录下按需创建文件

vscode 配置方式

必备:需要安装两个拓展编辑器插件

  1. eslint extension
  2. prettier extension
  3. 创建.vscode 文件夹 并在其中创建 settings.json
  4. 贴代码
{
    "files.eol": "\n",
    "editor.tabSize": 4,
    "eslint.validate": ["javascript", "javascriptreact", "vue"],
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

prettier 配置

{
    // 引入了prettier的复制下面配置
    "editor.formatOnSave": true,
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

参考文章

引入插件


ts 相关插件

prettier 相关插件

关于 parser 的额外说明

@babel/eslint-parser 一定要放在最上面
如果是 vue 的配置,请使用 vue-eslint-parser
e.g

{
    // 这个是无法解析vue文件的
    parser: '@babel/eslint-parser',
    parserOptions: {
        requireConfigFile: false
    },
}

// 解析vue文件
{
    parser: 'vue-eslint-plugin'
}