eslint-config-zati

    1.0.2 • Public • Published

    参考腾讯 AlloyTeam eslint 规范

    原文链接 | Demo(暂用)

    ESLint 规则不仅是一套先进的适用于 React/Vue/Typescript 项目的 ESLint 配置规范,而且也是你配置个性化 ESLint 规则的最佳参考。

    快速开始

    请根据你的项目使用的技术栈选择以下配置:

    使用方法

    内置规则

    npm install --save-dev eslint babel-eslint eslint-config-zati

    在你的项目的根目录下创建一个 .eslintrc.js 文件,并将以下内容复制进去:

    module.exports = {
      extends: [
        'zati',
      ],
      // *************************************************************
      // 请注意!!!以下配置仅适用于私有项目开发定制化需要,公共项目请勿修改
      // *************************************************************
      env: {
        // 你的环境变量(包含多个预定义的全局变量)
        //
        // browser: true,
        // node: true,
        // mocha: true,
        // jest: true,
        // jquery: true
      },
      globals: {
        // 你的全局变量(设置为 false 表示它不允许被重新赋值)
        //
        // myGlobal: false
      },
      rules: {
        // 自定义你的规则
      },
    };

    React

    npm install --save-dev eslint babel-eslint eslint-plugin-react eslint-config-zati

    在你的项目的根目录下创建一个 .eslintrc.js 文件,并将以下内容复制进去:

    module.exports = {
      extends: [
        'zati',
        'zati/react',
      ]
    };

    Vue

    npm install --save-dev eslint babel-eslint vue-eslint-parser eslint-plugin-vue eslint-config-zati

    在你的项目的根目录下创建一个 .eslintrc.js 文件,并将以下内容复制进去:

    module.exports = {
      extends: [
        'zati',
        'zati/vue',
      ]
    };

    TypeScript

    npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-zati

    在你的项目的根目录下创建一个 .eslintrc.js 文件,并将以下内容复制进去:

    module.exports = {
      extends: [
        'zati',
        'zati/typescript',
      ]
    };

    TypeScript React

    npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-config-zati

    在你的项目的根目录下创建一个 .eslintrc.js 文件,并将以下内容复制进去:

    module.exports = {
      extends: [
        'zati',
        'zati/react',
        'zati/typescript',
      ]
    };

    常见问题

    在 WebStorm 中使用

    暂无

    在 VSCode 中使用

    在 VSCode 中,默认 ESLint 并不能识别 .vue.ts.tsx 文件,需要在「文件 => 首选项 => 设置」里做如下配置:

    {
      "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue",
        "typescript",
        "typescriptreact"
      ]
    }

    保存时自动修复 ESLint 错误

    如果想要开启「保存时自动修复」的功能,你需要配置 .vscode/settings.json

    {
      "eslint.validate": ["javascript", "javascriptreact", "vue", "typescript", "typescriptreact"],
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      },
    }

    VSCode 中的 autoFixOnSave 没有效果

    如果需要针对 .vue.ts.tsx 文件开启 ESLint 的 autoFix,则需要配置成:

    {
      "eslint.autoFixOnSave": true,
      "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
          "language": "vue",
          "autoFix": true
        },
        {
          "language": "typescript",
          "autoFix": true
        },
        {
          "language": "typescriptreact",
          "autoFix": true
        }
      ]
    }

    如何结合 Prettier 使用

    eslint-config-zati 不包含所有样式相关的规则了,故不需要引入 eslint-config-prettier。只需要安装 prettier 及相关 VSCode 插件即可。

    下面是.prettierrc.js 配置:

    // .prettierrc.js
    module.exports = {
      // 一行最多 120 字符
      printWidth: 120,
      // 使用 2 个空格缩进
      tabWidth: 2,
      // 不使用缩进符,而使用空格
      useTabs: false,
      // 行尾需要有分号
      semi: false,
      // 使用单引号
      singleQuote: true,
      // 对象的 key 仅在必要时用引号
      quoteProps: 'as-needed',
      // jsx 不使用单引号,而使用双引号
      jsxSingleQuote: false,
      // 末尾需要有逗号
      trailingComma: 'none',
      // 大括号内的首尾需要空格
      // jsx 标签的反尖括号需要换行
      jsxBracketSameLine: false,
      // 箭头函数,只有一个参数的时候,也需要括号
      arrowParens: 'always',
      // 每个文件格式化的范围是文件的全部内容
      rangeStart: 0,
      rangeEnd: Infinity,
      // 不需要写文件开头的 @prettier
      requirePragma: false,
      // 不需要自动在文件开头插入 @prettier
      insertPragma: false,
      // 使用默认的折行标准
      proseWrap: 'preserve',
      // 根据显示样式决定 html 要不要折行
      htmlWhitespaceSensitivity: 'css',
      // vue 文件中的 script 和 style 内不用缩进
      vueIndentScriptAndStyle: false,
      // 换行符使用 lf
      endOfLine: 'lf',
      // 格式化嵌入的内容
      embeddedLanguageFormatting: 'auto',
    };

    VSCode 的一个最佳实践就是通过配置 .vscode/settings.json 来支持自动修复 Prettier 和 ESLint 错误:

    {
      "files.eol": "\n",
      "editor.tabSize": 2,
      "editor.formatOnSave": true,
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "eslint.validate": ["javascript", "javascriptreact", "vue", "typescript", "typescriptreact"],
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      }
    }

    应用CLI

    package.json 参考以下变更

    {
      "lint": "eslint --ext .js,jsx src/ server/",
      "fix": "eslint --fix --ext .js,jsx src/ server/",
      "pretty": "prettier --write \"./{src,server}/**/*.{js,jsx,json}\""
    }

    后续计划

    CI集成

    自动同步构建

    demo

    参考

    版本记录

    1.0.1

    • 调整 @typescript-eslint/explicit-member-accessibility 为 off
    • 调整 prettier: Trailing Commas 为 none, 行尾不要逗号

    Install

    npm i eslint-config-zati

    DownloadsWeekly Downloads

    4

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    74.4 kB

    Total Files

    15

    Last publish

    Collaborators

    • yangjd