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
以上都可以通过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'
}
你就可以使用自己设定的代码规范了。