资讯专栏INFORMATION COLUMN

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

endiat / 2270人阅读

摘要:前言人是很懒惰的,你刚开始建立的一个规规整整的项目,可能一段时间过后,就回被你无数次的提交代码弄得凌乱不堪。

前言

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

正文

接下来介绍个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", //是否使用尾逗号,有三个可选值""
  "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...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/96534.html

相关文章

  • 在Typescript项目中,如何优雅的使ESLintPrettier

    摘要:对于项目的编码规范而言,主要有两种选择和。此外由于性能问题,官方决定全面采用,甚至把仓库作为测试平台,而的解析器也成为独立项目,专注解决双方兼容性问题。最近在我的项目的编码规范中全量的用代替了针对其中遇到的问题做一个记录。   对于Typescript项目的编码规范而言,主要有两种选择ESLint和TSLint。ESLint不仅能规范js代码,通过配置解析器,也能规范TS代码。此外由...

    chemzqm 评论0 收藏0
  • 在Typescript项目中,如何优雅的使ESLintPrettier

    摘要:对于项目的编码规范而言,主要有两种选择和。此外由于性能问题,官方决定全面采用,甚至把仓库作为测试平台,而的解析器也成为独立项目,专注解决双方兼容性问题。最近在我的项目的编码规范中全量的用代替了针对其中遇到的问题做一个记录。   对于Typescript项目的编码规范而言,主要有两种选择ESLint和TSLint。ESLint不仅能规范js代码,通过配置解析器,也能规范TS代码。此外由...

    WilsonLiu95 评论0 收藏0
  • 在Typescript项目中,如何优雅的使ESLintPrettier

    摘要:对于项目的编码规范而言,主要有两种选择和。此外由于性能问题,官方决定全面采用,甚至把仓库作为测试平台,而的解析器也成为独立项目,专注解决双方兼容性问题。最近在我的项目的编码规范中全量的用代替了针对其中遇到的问题做一个记录。   对于Typescript项目的编码规范而言,主要有两种选择ESLint和TSLint。ESLint不仅能规范js代码,通过配置解析器,也能规范TS代码。此外由...

    琛h。 评论0 收藏0
  • 打造个人or团队适的开源项目规范

    摘要:打造个人团队适用的开源项目规范是一个用来优化托管在上的多代码库的工作流的一个管理工具可以让你在主项目下管理多个子项目,从而解决了多个包互相依赖,且发布时需要手动维护多个包的问题。 打造个人or团队适用的开源项目规范 lerna Lerna 是一个用来优化托管在gitnpm上的多package代码库的工作流的一个管理工具,可以让你在主项目下管理多个子项目,从而解决了多个包互相依赖,且发布...

    huangjinnan 评论0 收藏0

发表评论

0条评论

endiat

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<