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-tbjnpm initnpm install

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

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

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

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

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