项目中实际问题：自动保存格式化程度不够，以及git提交时未进行eslint代码检测
解决方案：prettier + eslint fix + git hook precommit
step1：利用prettier(facebook)自动保存优雅格式化代码
npm install prettier --D
在 package.json 中添加如下配置，文件路径可自定义修改：
{
"scripts": {
"format": "prettier --single-quote --trailing-comma es5 --write \'public/recode/**/*.js\'"
}
}
*：npm run format 可利用prettier自定义格式化指定文件,也可忽略该工具
注：eslint集成,针对atom 可装 prettier-atom，该插件可以省略step2在.eslintrc.*中的优化配置( linter-eslint 插件只做检测,不勾选保存)
勾选插件配置.png
cli解释：
-
--write:表示格式化后直接修改文件 -
--trailing-comma es5: 行尾逗号规则,es5表示当对象,数组的最后一项在换行的时候加逗号,类似 eslint 的 comma-dangle 规则. -
--single-quote:强制使用单引号表示字符串. (2,3都可写在配置文件中)
更多内容官网:(https://prettier.io/docs/en/install.html)
step2：prettier 结合.eslintrc.*优化配置
eslint重要配置参数介绍：
- env：{ node: true, es6 : true} //启用环境配置
- parser: bable-eslint //解析器
- parserOptions// 解析器详细配置
- extends:["airbnb-base", "react", "plugin:prettier/recommended"]
// 配置文件继承它前面的配置 - plugins：["import", "react", "prettier"] // 插件
- rules // 自定义配置规则 off 或 0 ：关闭规则 ; warn或1 ：警告; erro或2 ：错误;更多react的eslint规则配置
prettier组合eslint配置：
npm install eslint-plugin-prettier eslint-config-prettier --save-dev
rules添加的配置：(comma-dangle: 末尾是否追加 ','的具体配置)
rules: {
"prettier/prettier": [
"error",
{
// singleQuote: true,
jsxBracketSameLine: true,
trailingComma: "es5"
}
],
"comma-dangle": [
"error",
{
arrays: "ignore",
objects: "always-multiline",
imports: "ignore",
exports: "ignore",
functions: "ignore"
}
],
}
eslint --fix 命令自动修复部分格式（pretter 可理解为其加强版）
step3：设置脚本命令启动 git 钩子（Pre-commit Hook）
Git 钩子(hooks)是在Git 仓库中特定事件(certain points)触发后被调用的脚本。 详情可浏览 https://git-scm.com/book/zh/v2/自定义-Git-Git-钩子
每次提交代码，执行git commit之后进行自动格式化，免去每次人为手动格式化，使远程仓库代码保持风格统一。
使用 husky 结合 lint-staged 保证代码提交质量
husky:把 git 钩子的功能加到了 package的 script 里面了.使我们有能力直接调用其他命令而不用把钩子脚本写在项目的 .git/hook 里面, 方便团队间 git 钩子命令的共享.
lint-staged:这个库检查所有被 git add 加入的文件,对这些文件执行你需要的某些命令,在这里,我们可以执行 eslint 和格式化相关的操作.(类似一个待提交区)
npm install lint-staged husky --save-dev
在package.json添加如下：
{
"scripts": {
"precommit": "lint-staged"
},
"lint-staged": {
"public/recode/**/*.{js,less}": [
"npm run format",
"eslint --fix",
"git add"
]
}
}
//lint-staged可配置更多
{
"*.scss": [
"postcss --config path/to/your/config --replace",
"stylelint",
"git add"
]
},
{"image",......}
代码质量常见错误(部分需手动修改)
- no-undef:不能使用未定义的变量
- radix:使用 parseInt 强制指定进制
- no-unused-vars: 去掉定义/或者 import 了但是未使用的变量
- no-use-before-define: 定义之前使用(请先定义后使用)
- eqeqeq：强制 === , !==
- react/sort-comp： jsx 编写顺序问题 （顺序为：proptype , constructor， 生命周期，自定义方法）
- max-depth: 执行一个块可以嵌套的最大深度, 默认为4层
- no-param-reassign： 不允许再赋值函数的参数；
- no-mixed-operators：逻辑运算符用（）确定优先顺序 //
bad: a && b || c || d; good: (a && b) || c || d;(a*b)+c - no-await-in-loop: 不允许 await 的内部循环;
//bad: for(...){await .....}; good: const results = []; for(....){ results.push(things)} await Promise.all(results)
代码格式常见错误(自动保存修改)：
- comma-dangle: ['error', 'always-multiline’] // 尾部加逗号规则
- consistent-this: 0 // this不期望的别名为 vm
- prefer-reflect: 0 // apply call delete …等方法的使用
- no-var: 0 //允许多个变量连续声明
- import/no-dynamic-require: 0 // require()期望字符串
- import/prefer-default-export: 0 // export期望有 default
- indent: 空格问题
- prefer-template: es6模板字符串语法
- arrow-body-style：[2, 'as-need'] 箭头函数
（）=> 0; () => ({ foo: 0}); (a,b) => {a.push(b);return a} - no-unneeded-ternary: 不要出现三元表达式返回 true|| false //
bad: isYes === 1 ? true : false; good: isYes === 1 ; bad: isYes ? true : false; good: !!isYes - import/no-unresolved:0 // Unable to resolve path to module; eg: emailService = require('../services/email-service'); college引用admin下的services的邮件服务
- space-before-function-paren: Missing space before function parentheses
- array-callback-return:0
- no-trailing-spaces: 不允许空白行
-
no-unexpected-multiline: 不允许混乱多行表达式
检测结果.png
遇到的问题：
- eslint-plugin-import版本依赖问题(升级）
- no-undef
原因:类里面写属性箭头方法为更高版本es写法 stackoverflow解答
解决：升级eslint 以及babel-eslint最新，并配置对应解析器 - prettier格式配置与eslint默认有小部分冲突（重新配置冲突部分）
- Facebook使用的代码转换工具：js-codemode
css3小记：太阳系运转
css3作品集
Math.random().toString(36).substring(7)；// 随机字符
网友评论