代码规范 -- eslint & editorconfig

配置eslint

安装

安装eslint；webpack配置用到的eslint-loader；eslint用于解析js的解析器babel-eslint
npm i eslint eslint-loader babel-eslint -D

以airbnb为eslint的配置规则
npm i eslint-config-airbnb -D
及其所需要的插件
npm i eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react -D

node环境、es6环境下的插件
npm i eslint-plugin-node eslint-plugin-promise -D

配置.eslintrc

在项目根目录下新建.eslintrc文件，开始配置。

{
  // 指定js解析器
  "parser": "babel-eslint",

  // 定义ecma版本；sourceType定义为模块化的js编写模式
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
  },

  // 定义运行环境，如不配置browser为true则会报出window、document变量未定义的错误。同时需要配置node为true，因为项目基于webpack构建会用到node中的如process全局变量。
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },

  // 运用airbnb规则，标准规则为standard
  "extends": "airbnb", 

  // 自定义规则
  "rules": {
    "semi": [0] // 是否对结尾分号进行检测 -- 0为不检测
  }
}

配置webpack

module: {
  rules: [{
    test: /\.jsx?$/,
    exclude: /node_modules/,
    use: ['babel-loader', 'eslint-loader']
  }]
}

注意loader的执行顺序为从右到左，eslint-loader需在最右，先进行了eslint验证再进行babel的编译。

接着我们来走一波，然后发现了大量的报错，其中最为多的是这个东西?

Expected linebreaks to be 'LF' but found 'CRLF'

这个就是不同系统下的换行符会有所不同，windows的是CRLF，解决这个问题就需要用到editorconfig了

配置editorconfig

安装插件 -- vscode下

市场里直接搜索EditorConfig for VS Code安装。

配置.editorconfig文件

项目根目录下创建.editorconfig文件，并且配置

# 是否是顶级配置文件，设置为true的时候才会停止搜索.editorconfig文件
root = true

[*]
charset = utf-8
# 末尾行去掉尾随的空格
trim_trailing_whitespace = true 
# 末尾行后加多一行空行
insert_final_newline = true 
# <"tab" | "space"> 制表符类型
indent_style = space  
indent_size = 2
# <"lf" | "cr" | "crlf"> 换行符类型
end_of_line = lf 

项目中使用eslint

eslint报错分析

如上，分别为：
报错的行数 / 错误类型 / 错误描述 / 对应的eslint规则

忽略eslint检测

有时候我们不需要对某些代码进行eslint检测，这时我们可以加上eslint注释?

export default class App extends React.Component { // eslint-disable-line
  render() {
    return <div>Home</div>;
  }
}

结合git使用eslint

我们在代码提交前希望先用eslint检测一遍代码，如果不通过则禁止提交代码。
实施方法如下?

1、安装工具husky来设置git钩子 npm i husky -D
2、配置package.json文件

// husky提供的钩子
"husky": {
  "hooks": {
    // 在执行git commit之前先执行pre-commit，也就是执行eslint检测，若不成功不能进入git commit
    "pre-commit": "npm run lint"
  }
},
"scripts": {
  // eslint检测src目录下的所有拓展名为js和jsx的文件
  "lint": "eslint --ext .js  --ext .jsx src/"
}

结果就是这样?

eslint报错了就直接不给commit