6.eslint和editorconfig配置

本章节内容主要时要时参照官方文档配置即可。

eslint配置

在根项目目录项新建.eslintrc文件

// 这里要安装 eslint-config-standard包，安装完后按照提示，安装相关的依赖。
// 这里主要时对项目中所有内容生效，要求比较低
{
  "extends": "standard"
}

然后在client目录下新建同样的文件，来规范client端的代码

// babel-eslint ，  eslint-config-airbnb及其相关依赖包
{
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
  },
  "extends": "airbnb",
  "rules": {
    "semi": [0]
  }
}

在webpack客户端和服务端的配置文件中，在rules下新增一个rule。

{
        enforce: 'pre',  // 在babel编译之前进行检查
        test: /.(js|jsx)$/,
        loader: 'eslint-loader', // 使用eslint-loader，需安装
        exclude: [
          resolvePath('../node_modules')
        ]
      },

配置完这些后，我们启动我们的服务。会发现出现很多错误，window环境下可以会见到很多"LF"的错误，这是因为不同的操作系统，行末的符号时不一致的。所以我们需要配置editorconfig文件。现在主流的ide,如webstorm,vs code都带有edit的插件，在项目根目录下新建.editorconfig文件，按照如下配置即可。

root = true  // 是否为根节点，说明在子目录下也可配置该文件

[*] // 用于所有文件
charset = utf-8  //编码格式
indent_style = space  //缩进样式
indent_size = 2  // 缩进大小
end_of_line = lf  // 以lf结尾
insert_final_newline = true  // 自动在文件末尾插入新行
trim_trailing_whitespace = true  // 去除行末的空格

git hook

在提交代码之前进行lint检查，如果不合格，不能提交代码。以前一直用的是husky -哈士奇，后来在vue-cli中看到了yorkie,看说明应该是husky的改进版本。下面来说说两者的配置方式。

// package.json的scripts增加lint命令，检查client目录下的代码
    "lint": "eslint --ext .js --ext .jsx client/"
    
    // husky:在scripts下配置
    "precommit": "npm run lint"
    
    // yorkie, 与scripts平级
      "gitHooks": {
        "pre-commit": "npm run lint"
      }

这样，在你commit代码前就会进行检查，不符合要求的代码不能提交。

本节的配置位于仓库的2-9分支