用eslint + prettier + pre-commit管理项目(React)

前言

人是很懒惰的，你刚开始创建的一个规规整整的项目，可能一段时间事后，就回被你无数次的提交代码弄得凌乱不堪。
就算你能保证你的编码风格严谨统一，别人又该如何，每一个人都有不同的编码风格，要保持统一，就要对项目进行适当的管理

正文

接下来介绍个React项目简单管理的一个实践：

1、Eslint

eslint能够帮咱们校验代码，给整个项目的代码定义一个规范，咱们写的代码必须按照这个规范写，不然在校验阶段会报错
这就是强迫症患者的福利了，强迫本身把eslint报的error所有处理掉，不久以后既能够养成良好的编码习惯了

1.安装
npm install eslint babel-eslint --save-dev
也能够全局安装，这样的话eslint命令适用于你的全部项目
npm install eslint -g

2.配置方法
能够运行eslint --init，按照指示一步步配置
也能够直接在根目录新增一个.eslintrc文件进行配置

3.规范定义
能够是你本身定义的一套规范，好比：字符创使用单引号，缩进为2个空格等等
也能够安装一个成熟的规范，而后再配置文件中指定使用这个规范
好比:Airbnb的编码规范是在业界很是流行的一套规范，咱们能够试试
首先安装 eslint-config-airbnb-base
npx install-peerdeps --save-dev eslint-config-airbnb-base
而后在.eslintrc中配置

{
   "extends": ["airbnb-base"],
   "parser": "babel-eslint"，
   "rules": {
       "indent": ["error", 2]
    }
}

rules: 能够在这里覆盖Airbnb的规则，具体的规则定义参照 eslint rules
Airbnb具体的规则能够参考
Airbnb React编码规范

PS:
其实一开始不要麻烦，耐心地跟着这套规范走，不久以后你的编码习惯就会跟Airbnb基本一致了

4.针对react
因为react的组件文件中，有不少违反eslint规范的地方，好比jsx语法，还有头部import的React库
若是不作特殊处理，都是会报错的
因此有了一个针对react的插件：
npm install --save-dev eslint-plugin-react
这个插件能够检查react的jsx语法，jsx文件的缩进问题和部分语法问题

插件的配置仍是在.eslintrc

{
    "parserOptions": { "ecmaFeatures": { "jsx": true } }

    "plugins": [
        "react"
    ],
    "rules": {
        "react/jsx-uses-vars": 1,
        "react/jsx-uses-react": 1
    }
}

5.完整的配置文件

{
  "extends": ["airbnb-base"],
  "parser": "babel-eslint",
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "react/jsx-uses-vars": 1,
    "react/jsx-uses-react": 1,
    "no-tabs": 0,
    "class-methods-use-this": 0,
    "import/no-unresolved": 0,
    "indent": 0,
    "comma-dangle": 0,
    "import/prefer-default-export": 0
  },
  "plugins": [
    "react"
  ],
  "globals": {
    "document": true,
    "navigator": true,
    "window":true,
    "node":true
  },
  "settings": {
    "import/resolver": {
      "node": {
         "extensions": [".js",".jsx"]
      }
    }
  }
}

说明：
globals：配置全局变量如window，document等，没有配置直接使用的话，不能经过eslint的检查
settings.import/resolver.node.extensions: 可让你在import指定后缀的文件的时候，不用写后缀名，如
import Banner from './Banner'

PS: 有一些配置能够不用纠结，莫名其妙报错的话，你能够直接在rules里面覆盖该配置，像这里的comma-dangle，一直给我报错，直接被我覆盖掉了

6.运行
这里有个小坑，若是你是全局安装的eslint，你用到的插件也要全局安装，否则eslint找不到插件会报错
因为我没有全局安装eslint
命令行运行：
./node_modules/.bin/eslint --fix --ext .js --ext .jsx src
--ext后面接要检查文件的后缀，最后一个参数为src，表示只检查src文件夹下的js，jsx文件
可是通常不会直接在命令行运行eslint，能够配合npm 的scripts 或者 pre-commit，后面会说

2、Prettier

prettier是一个javascript的格式化工具，能够彻底统一整个团队的代码风格
执行一行命令，便可全局格式化代码，并统一风格
eslint有一个支持和prettier一块儿使用的插件：eslint-plugin-prettier
可是因为个人eslint使用的是Airbnb的规范，可能与prettier有不少冲突的配置，并且这些配置咱们都不可知，
因此这个介绍单独使用prettier
1.安装
npm install --save-dev prettier

2.配置和规范
根目录下新建 .prettierrc 文件
好比个人配置以下

{
  "printWidth": 80, //一行的字符数，若是超过会进行换行，默认为80
  "tabWidth": 2, //一个tab表明几个空格数，默认为80
  "useTabs": false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减
  "singleQuote": false, //字符串是否使用单引号，默认为false，使用双引号
  "semi": true, //行位是否使用分号，默认为true
  "trailingComma": "none", //是否使用尾逗号，有三个可选值"<none|es5|all>"
  "bracketSpacing": true, //对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
  "parser": "babylon" //代码的解析引擎，默认为babylon，与babel相同。
}

更多配置规则：prettier配置规则

3.配合onchange
可实如今本地开发的时候，保存即格式化
首先安装 onchange
npm install --save-dev onchange
定义npm的scripts以下

{
  "scripts": {
    "dev": "webpack-dev-server & npm run format",
    "format": "onchange 'src/**/*.js' 'src/**/*.jsx' 'src/**/*.scss' -- prettier --write {{changed}}"
  }
}

用onchange监听src下js，jsx和scss后缀的文件，一旦发生改变，执行 prettier 命令，用--write打印出所修改文件的文件名{{change}}
而后在启动本地服务的同时，run format，启动onchange的监听

3、Pre-commit

pre-commit钩子能够在 git commits 以前运行一段脚本
好比在commit代码以前运行eslint，校验失败则代码提交失败，校验成功则容许提交代码

1.安装
npm install --save-dev pre-commit

2.npm scripts配置

{
  "scripts": {
    "dev": "webpack-dev-server & npm run format",
    "format": "onchange 'src/**/*.js' 'src/**/*.jsx' 'src/**/*.scss' -- prettier --write {{changed}}",
    "precommit-msg": "echo 'Pre-commit checks.........' && exit 0",
    "lint": "eslint --ext .js --ext .jsx src"
  },
  "pre-commit": ["precommit-msg", "lint"]
}

用pre-commit定义commit以前，执行两条命令
precommit-msg：输出一些信息避免信息混淆
lint：使用eslint校验代码

这时候你在终端git add 而后git commit的时候，就回启动eslint校验，不经过校验没法提交成功

建议eslint校验不经过的代码本身查复，有助于养成良好的编码习惯
不久之后，你执行eslint就再也没有报错了，吊炸天啦！！

demo地址：https://github.com/shinyshine...