eslint-config-focus-fe

焦点前端团队 eslint 规范

目的

• 尽早发现代码错误，规避潜在风险
• 团队代码风格统一，遵循一定规范

制定原则

• 基于现有规范（eslint:recommend | eslint-plugin-vue/recommended）调整
• 能够帮助发现代码错误的规则全部开启
• 禁止使用JS糟粕语法的规则全部开启
• 代码风格尽量保持统一，项目中可自定义调整

使用

内置规则

npm install --save-dev eslint @babel/eslint-parser eslint-config-focus-fe

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

module.exports = {
  extends: [
    'focus-fe',
  ],
  env: {
    // 环境变量
    browser: false,
    node: true,
    es6: true
  },
  globals: {
    // 全局变量
  },
  rules: {
    // 自定义规则
  },
}

Vue 项目

npm install --save-dev eslint @babel/eslint-parser vue-eslint-parser eslint-plugin-vue eslint-config-focus-fe

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

module.exports = {
  extends: [
    'focus-fe',
    'focus-fe/vue',
  ],
  env: {
    // 环境变量
    browser: false,
    node: true,
    es6: true
  },
  globals: {
    // 全局变量
  },
  rules: {
    // 自定义规则
  },
}

React 项目

npm install --save-dev eslint @babel/eslint-parser @babel/preset-react@latest eslint-plugin-react eslint-config-focus-fe

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

module.exports = {
  extends: [
    'focus-fe',
    'focus-fe/react',
  ],
  env: {
    // 环境变量
    browser: false,
    node: true,
    es6: true
  },
  globals: {
    // 全局变量
  },
  rules: {
    // 自定义规则
  },
};

相关工具

husky

husky 可以让我们向项目中方便添加 git hooks，使用方式参考：https://www.npmjs.com/package/husky。

lint-staged

使用 lint-staged 工具，可以仅检测 git 仓库暂存区文件，减少代码提交前校验阶段耗时，减少对老项目的改动。