ESlint配置指南

ESlint配置指南原文连接

为了团队的代码的优良风格，需要做一些规范。如果只是在git上定一些规范，去认真看并且去实施的人，肯定是少之又少。所以决定整一套代码规范的验证工具，用来规范提交。看了一遍，觉得eslint不错，所以选择了他。

配置指南

eslint支持三种配置文件：Javascript，JSON，YAML。 eslint支持三种配置方法，在项目里添加.eslintrc隐藏文件，或在package.json里配置eslintConfig，或者在命令行里添加配置文件。

当前项目安装

安装：

npm install eslint --save-dev

初始化：

./node_modules/.bin/eslint --init，该命令会现实一些对话框，让你选择需要的配置。

检查文件：

./node_modules/.bin/eslint yourfile.js

全局安装

全局安装：

(sudo) npm install eslint i -g

eslint --init

eslint yourfile.js

配置

当使用eslint init会生成一个配置文件.eslintrc.js

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

semi和quotes就是规则名，后面的配置有三种选择：

"off" or "0"：表示这个规则关闭，
"warn" or "1"：表示这个规则是一个警告处理
"error" or "2"：表示这个规则是一个错误处理

常用的配置有以下几个：

environments(环境变量)，Globals(全局变量)，Rules(规则)，Plugins(插件)

具体的描述可以看eslint文档。

配置sublime支持eslint

---

• SublimeLinter：安装指南
• SublimeLinter-contrib-eslint：安装指南
• Javascript Beatiful： package control里下载

---

以上都可以通过sublime插件安装

配置Javascript beautiful的文件：

preferences->package settings->javascript beautiful->settings user

{
    "indent_size": 2,
    "indent_char": " ",
    "indent_level": 0,
    "indent_with_tabs": false,
    "preserve_newlines": true,
    "max_preserve_newlines": 10,
    "jslint_happy": false,
    "brace_style": "collapse",
    "keep_array_indentation": false,
    "keep_function_indentation": false,
    "space_before_conditional": true,
    "break_chained_methods": false,
    "eval_code": false,
    "unescape_strings": false,
    "wrap_line_length": 0,

    // jsbeautify options
    "format_on_save": true,
    "use_original_indentation": false
}

同时设置sublime的格式：

preferences->Settings-User

  "tab_size": 2,
  "translate_tabs_to_spaces": true

铜板街前端规范：

module.exports = {
  "root": true,
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "extends": "vue",
  "plugins": ["flow-vars", "react"],
  "globals": {
    "$": true,
    "define": true,
    "require": true
  },
  "env": {
    "browser": true,
    "node": true,
    "commonjs": true,
    "es6": true,
    "amd": true
  },
  "rules": {
    // 不需要
    "space-before-function-paren": 0,
    "eol-last": 0,
    "no-extra-semi": 0,
    "semi": 0,
    "eqeqeq": 0,
    "one-var": 0,
    "no-undef": 0,

    // 警告
    "no-extra-boolean-cast": 1,
    "no-extra-parens": 1,
    "no-empty": 1,
    "no-use-before-define": [1, "nofunc"],
    "complexity": [1, 10],
    "no-unused-vars": 1,

    // vue
    "flow-vars/define-flow-type": 1,
    "flow-vars/use-flow-type": 1,

    // react
    "react/jsx-uses-react": 2,
    "react/jsx-uses-vars": 2,

    // 错误
    "comma-dangle": [2, "never"],
    "no-debugger": 2,
    "no-constant-condition": 2,
    "no-dupe-args": 2,
    "no-dupe-keys": 2,
    "no-duplicate-case": 2,
    "no-empty-character-class": 2,
    "no-invalid-regexp": 2,
    "no-func-assign": 2,
    "valid-typeof": 2,
    "no-unreachable": 2,
    "no-unexpected-multiline": 2,
    "no-sparse-arrays": 2,
    "no-shadow-restricted-names": 2,
    "no-cond-assign": 2,
    "no-native-reassign": 2,

    // 代码风格
    "no-else-return": 1,
    "no-multi-spaces": 1,
    "key-spacing": [1, {
      "beforeColon": false,
      "afterColon": true
    }],
    "block-scoped-var": 2,
    "consistent-return": 2,
    "accessor-pairs": 2,
    "dot-location": [2, "property"],
    "no-lone-blocks": 2,
    "no-labels": 2,
    "no-extend-native": 2,
    "no-floating-decimal": 2,
    "no-loop-func": 2,
    "no-new-func": 2,
    "no-self-compare": 2,
    "no-sequences": 2,
    "no-throw-literal": 2,
    "no-return-assign": [2, "always"],
    "no-redeclare": [2, {
      "builtinGlobals": true
    }],
    "no-unused-expressions": [2, {
      "allowShortCircuit": true,
      "allowTernary": true
    }],
    "no-useless-call": 2,
    "no-useless-concat": 2,
    "no-void": 2,
    "no-with": 2,
    "space-infix-ops": 2,
    "valid-jsdoc": [2, {
      "requireParamDescription": true,
      "requireReturnDescription": true
    }],
    "no-warning-comments": [2, {
      "terms": ["todo", "fixme", "any other term"],
      "location": "anywhere"
    }],
    "curly": 1,

    // common js
    "no-duplicate-imports": 1
  }
};

封装成组件

eslint的组件配置一般以eslint-conifg-xxx命名。

那么我们就建一个eslint-config-tbj作为我们铜板街的格式规范库。

mkdir eslint-config-tbj && cd eslint-config-tbj
npm init
npm install

新建一个入口文件 index.js 输入上面的规范

然后npm link eslint-config-tbj全局化库

下面你就可以通过在任何一个项目里新建一个.eslintrc.js文件，然后输入：

module.exports = {
    extends: 'eslint-config-tbj'
}

你就可以使用自己设定的代码规范了。