Eslint
第一步:
第一种:
npm install -g install-peerdeps (全局安装install-peerdeps)
install-peerdeps --dev eslint-config-airbnb (使用install-peerdeps来安装相应的包)
第二种:
npm install eslint --save-dev
npm install eslint-config-airbnb --save-dev // (airbnb的规则)
npm install eslint-plugin-import --save-dev
npm install eslint-plugin-jsx-a11y --save-dev // (airbnb规则依赖于这个库)
npm install eslint-plugin-react --save-dev
第二步:
为了兼容es6 需要安装以下包,不然箭头函数会报错
npm i --save-dev babel-eslint
第三步:
可以运行下方代码进行配置
eslint --init
也可以新建 .eslintrc.js 拷贝以下代码
{
"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"]
}
}
}
}
第四步:
这也是最重要的一步, package 中配置 lint; 在scripts中加入以下代码
"lint": "eslint --ext .js ./src --fix"
OK Eslint 目前就算配置完了,接下来是 prettier
prettier
第一步:
npm install --save-dev prettier (安装prettier)
第二步:新建 .prettierrc 文件,加入下方配置, prettierrc 配置和 Eslint(airbnb) 可能会有冲突,需要注意配置
{
"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相同。
}
package -> scripts
"prettier": "prettier --write src/**/*.js"
第三步:(可忽略,也可配置)
配合onchange 可实现在本地开发的时候,保存即格式化;
npm install --save-dev onchange
package -> scripts
"dev": "webpack-dev-server & npm run format",
"format": "onchange 'src/**/*.js' 'src/**/*.jsx' 'src/**/*.scss' -- prettier --write {{changed}}"
OK , prettier 配置好了。 接下来是git hooks (Pre-commit)钩子
Pre-commit
第一步:
安装包
npm i -D husky lint-staged pretty-quick
第二步:
配置package
"scripts": {
"precommit": "pretty-quick --staged",
},
"lint-staged": {
"src/**/*.{js,jsx}": [
"prettier --write",
"eslint --fix",
"git add"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}
接下来
没了 大佬,难道不好使吗?
npm run lint
npm run prettier
git commit -m 'msg'
是不是会提示你一大堆问题,没错,按照提示解决他,其实最主要的还是eslint 的检验配置,实在解决不掉问题,小弟给你支个招,解决不掉问题,就解决发现问题的人,哈哈哈哈哈,其实就是关掉某个检验 。。。