Eslint Style Demo
配置React+Eslint+Airbnb
- 本文GitHub地址
- 點擊觀看Webpack4.x+Babel7.x+React16.x平臺搭建
- 點擊觀看Webpack4.x+Babel7.x+React16.x平臺配置CSS晓褪、SASS斩启、Antd
新建項目
按照上一篇文章的方法新建一個新項目eslint-style-demo
安裝eslint
- 安裝
eslint，可選本地安裝或者全局安裝与纽，這里選擇本地安裝
npm i -D eslint
- 初始化并生成配置文件
.eslintrc.js,各初始化參數(shù)可以先隨便選，后面再做修改
./node_modules/.bin/eslint --init
- 安裝對babel和react的支持
npm i -D babel-eslint eslint-plugin-react
- 修改
.eslintrc.js配置文件如下,打開一個js文件可以查看eslint效果
module.exports = {
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly",
"Babel": true,
"React": true
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
}
};
引入Airbnb規(guī)則
- 安裝相關(guān)插件
npm i -D eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y
- 修改
.eslintrc.js配置文件塘装，設(shè)置extends部分為airbnb規(guī)則急迂，增加rules
module.exports = {
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": [
"airbnb",
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly",
"Babel": true,
"React": true
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
//關(guān)閉換行符操作系統(tǒng)格式問題
"linebreak-style": [
"off",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
],
// 禁止縮進錯誤
"indent": 0,
// 關(guān)閉不允許使用 no-tabs
"no-tabs": "off",
"no-console": 1,
// 設(shè)置不沖突 underscore 庫
"no-underscore-dangle":0,
// 箭頭函數(shù)直接返回的時候不需要 大括號 {}
"arrow-body-style": [2, "as-needed"],
"no-alert":"error",
// 設(shè)置是否可以重新改變參數(shù)的值
"no-param-reassign": 0,
// 允許使用 for in
"no-restricted-syntax": 0,
"guard-for-in": 0,
// 不需要每次都有返回
"consistent-return":0,
// 允許使用 arguments
"prefer-rest-params":0,
// 允許返回 await
"no-return-await":0,
// 不必在使用前定義 函數(shù)
"no-use-before-define": 0,
// 允許代碼后面空白
"no-trailing-spaces": 0,
// 關(guān)閉大括號內(nèi)的換行符要求
"object-curly-newline": 0,
// 有一些 event 的時候，不需要 role 屬性蹦肴，不需要其他解釋
"jsx-a11y/no-static-element-interactions":0,
"jsx-a11y/click-events-have-key-events":0,
// 類成員之間空行問題
"lines-between-class-members":0,
// 不區(qū)分是否在 despendencies
"import/no-extraneous-dependencies": 0,
// 引用時候根據(jù)根目錄基礎(chǔ)
"import/no-unresolved": 0,
// 關(guān)閉解構(gòu)賦值報錯
"react/destructuring-assignment": 0,
// 允許在 .js 和 .jsx 文件中使用 jsx
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
// jsx > 緊跟著屬性
"react/jsx-closing-bracket-location": [1, "after-props"],
// 不區(qū)分是否是 無狀態(tài)組件
"react/prefer-stateless-function": 0僚碎，
// prop-types忽略children屬性
"react/prop-types": [1, { ignore: ["children"]}],
// 關(guān)閉禁止prop-types類型
"react/forbid-prop-types": 0,
// 關(guān)閉default-props檢查
"react/require-default-props":0
}
};
- 在App.js組件測試查看效果
