使用 eslint 和 editorconfig 规范代码

项目中使用eslint

为什么使用eslint : 为了保持代码风格的统一

在做vue项目的时候，基本上都会使用 vue-cli 脚手架去创建一个vue 项目，里面可以选择使用eslint 代码检测，我相信大多数人都关闭了，在以前我是不用eslint 工具的，我会觉得使用很麻烦，到处都在报错。

而且需要配置很多规则，增加了开发难度。（我太low了）

但是多人合作，为了保持代码风格的统一，还是需要一套规范，让大家阅读代码的时候比较清晰，加上现在编辑器上很多插件，可以快速的帮我们格式化代码，因此使用eslint 早就是一种趋势了。

话不多说，接下来如何使用eslint 和配置eslint。

首先需要安装eslint 的依赖包

eslint ，eslint-loader， babel-eslint 是最基本的，另外我做的是react项目，因此用到了 airbnb 团队的规则 (eslint-config-airbnb) 剩下的一些是 airbnb包需要的依赖，具体的看你自己要用什么规则就装什么规则。

　　　 "eslint-loader": "^2.1.1",

　　　 "babel-eslint": "^10.0.1",

"eslint": "^5.12.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-node": "^8.0.1",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-react": "^7.12.3",
    "eslint-plugin-standard": "^4.0.0"

安装好后进入webpack.config.js 的配置文件中，配置eslint 规则

module.exports = {  
  module: {
    rules: [
      {
        enforce: 'pre', // 在所有loader编译之前执行eslint检查
        test: /\.(js|jsx)$/,
        loader: 'eslint-loader',
        exclude: [
          path.join(__dirname, '../node_modules')
        ]
      },
     ],
     ...
  },
  ...        
}

enforce配置一定要写上！需要要在所以loader编译之前去检测
test配置表示 只验证 js 和 jsx 结尾的文件
loader配置 表示使用 eslint-loader处理
exclude配置 表示不检测 node_modules 下的js 和 jsx文件


接下来需要配置具体的规则，在项目的跟目录下(或者你需要使用eslint的目录下)创建 .eslintrc的配置文件，该文件下可以配置具体规则

{
    "parser": "babel-eslint",
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "parserOptions":{
        "ecmaVersion": 6,
        "sourceType": "module"
    },
    "extends": "airbnb",
    "rules": {
        "semi": [0],
        "no-unused-vars": [0],
        "react/jsx-filename-extension": [0]
    }
}

parser 是配置 eslint 的解析器

env 是配置eslint 使用的环境 brower表示支持浏览器环境，因为我的项目用到了ssr 渲染里面用的node环境，所以我配置了 node: true选项

extends 是继承什么规则，我前面有讲我是用的 airbnb团队的 eslint规则，如果你不需要那个规则，就可以填写 ‘standard’ 使用标准规则。

parserOptions 中的 ecmaVersion 表示解析 es的版本，我项目用的是es6 ，所以填写的是6,

rules 里面是具体的规则,可以参照官网，需要开启或者屏蔽的规则的就去这里面配置官网 rules规则

配置好运行项目就可以检测到了。如果某一行不需要验证，则可以在这一行加上注释 // eslint-disable-line

const NextApp = require('./app.jsx').default // eslint-disable-line

配置 .editorconfig

为什么配置.editorconfig: 解决不同运行环境，不同编辑器运行同一个项目的差异

为什么要配置.editorconfig 呢？因为不同的编辑器在处理不用操作的时候默认方式不一致，因此需要统一操作的规范。

比如 tab 缩进有的是4格，有的是2格。结尾换行的的时候 windows 使用的是 crlf ，而 mac 和 linux 使用的 lf。

接下来在项目根目录下创建.editorconfig的配置文件

root = true

[*]
charset = utf-8
indent_style = space
index_size = 2
end_of_line = LF
insert_final_newline = true
tirm_trailing_whitespace = true

charset 设置字符集为 utf-8

index_style 缩进方式使用空格

index_size tab 缩进2个空格

end_of_line 换行方式统一为LF

insert_final_newline 保存文件时在最后新插入一行

trim_trailling_whitespace 去掉行尾的空白字符

还可以配置其他的，还是按照你需要的规则配置。

拜了个拜！