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

媒介

人是很懒散的,你刚开始竖立的一个规规整整的项目,能够一段时间事后,就回被你无数次的提交代码弄得凌乱不堪。
就算你能保证你的编码作风严谨一致,他人又该怎样,每个人都有不一样的编码作风,要坚持一致,就要对项目举行恰当的治理

正文

接下来引见个React项目简朴治理的一个实践:

一、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,背面会说

二、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的监听

三、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…

    原文作者:Kuku殿下
    原文地址: https://segmentfault.com/a/1190000015862803
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞